This is the real AI programming: Gemini builds a multilingual TOMATO clock App in 3 minutes-XHUGE News

The ability of AI programming is evolving at an alarming rate. In the past, programming tools such as Cursor, Claude Code, and Codex were also very capable, but after all, there was still a certain threshold for use. Now that Gemini 3 Pro is here, it directly reduces the threshold to zero, from understanding the requirements document (PRD) to delivering a complete and interactive product, and making things out of it.The aesthetics are still very good, unlike others, the UI is either the same or there are various small flaws that need to be optimized. Now that Gemini 3.0 is directly in place in one step, it can only be said that Google is indeed too strong.

Today, let me share how I use it Gemini 3 Pro Preview Build a Pomodoro App. What's amazing about Gemini is not that it can write code, but that it can build a fully functional app with zero handwriting, and understand the iteration requirements just right-for example, I need to add a multi-language switching function, it can layout the implementation of this requirement in a reasonable place.

Step 1: Let Gemini transform into a product manager (generate PRD)

As a good cow and horse, I have always had strict requirements for my efficiency, so I want a tomato clock that is minimalist, beautiful and supports task management. But I don't want to write my own requirements document, so I opened Gemini's newly released thinking mode and asked it to make me a requirements document for the Tomato Clock App.

The approximate prompt words are as follows：

As a product manager, please write a streamlined PRD for a tomato clock app called “FocusFlow”. Core functions： 25 minutes of concentration/5 minutes of rest, task list management, simple data statistics function. UI style： Modern, minimalist, with red as the main color. Technology stack requirements： React +Tailwind CSS.

Gemini quickly generated a clearly structured PRD, including an overview, functional modules (timer core, task management, settings, statistical overview), UI/UX specifications, data structure references, programming tips, etc. (Check the appendix”Minimalist and Efficient tomato clock" requirements document).

Step 2: Build the core application

With this hot PRD, I switched to the code building environment of Google AI Studio.

Click “Build” in the left menu to enter the ”Build your ideas with Gemini" interface. Click “Add Files“ in the dialog box to upload the requirements document, and enter it in the dialog box：

According to this PRD, help me build this app.

Click “Build” and Gemini goes directly to Code Assistant Mode, start building：

Thinking (Thinking)： It analyzes the PRD and plans the component structure, including Timer, TaskList, and Statistics.
Build (Building)： In the Code window on the right, the code starts to be written quickly, and the preview starts to render in real time.
done： About a few tens of seconds later, a red tomato clock with a huge countdown appeared in front of him. It is already operational! The countdown is accurate and tasks can be added. There are no problems with UI design and functional use. magical!

Step 3: Iterative development-add multi-language support

The first basic version is in English. Taking into account daily use, I hope it can support Chinese. Therefore, I want it to support the free switching of simplified Chinese, traditional Chinese and English to facilitate users in different languages.：

Added language switching function to support simplified Chinese, traditional Chinese and English.

I did not say where this function should be placed. Gemini automatically performs requirements analysis and planning. In a few tens of seconds, it adds a beautiful button-style language switching function to the settings. Get the benefits of the card!

Step 4: Preview and final effect

Click “Full screen” in the upper right corner of the preview window, I experienced the final version of FocusFlow Tomato bell.

It supports three modes, you can customize the time of each mode, and set the automatic start of concentration and rest:

Focus (Focus): Default is 25 minutes.
Short Break (Short Break): Default is 5 minutes.
Long Break (Long Break): Default is 15 minutes.

Very convenient task management mode：

Freely add, name, and delete tasks, and mark completed/unfinished；
Set an estimated number of tomato clocks for each task.

Open the statistical overview and you can see: the number of tomato clocks completed today; the total time to focus on today (hours/minutes).

Open the settings, you can adjust: language; turn on/off the tone.

In the whole process, I haven't opened any professional code tools, and I haven't manually modified a line of code. In addition to writing and previewing, Gemini 3's AI programming interface (refer to the upper right corner of the screenshot) also provides a series of follow-up options that developers feel comfortable with, which marks its shift from a “chatbot” to a true “cloud IDE”.

summary

The experience of writing apps using Gemini 3 is quite subversive. From building programs according to PRD to handling complex logical refactoring, to the final one-click deployment and delivery, Gemini 3 has demonstrated a very high degree of completion. For non-technical personnel, the threshold for building their own tools has been lowered like never before. As long as you have an idea, you can let AI realize it. It can be said that this is the real AI programming.

Appendix: ”Minimalist and Efficient Tomato Clock" requirements document (generated by Gemini)

1. Project overview

Develop a Web-based single-file React application. The application combines a tomato work timer, a lightweight to-Do List (To-Do List), and simple data statistics. The goal is to help users stay focused and manage daily tasks.

2. Technology Stack Requirements (Critical Stack)

frame: React (Functional Components, Hooks)
style: Tailwind CSS (used for all layout, color, responsive design, and animation)
icon: Lucide-React (use icons in the form of React components)
Data persistence: Localsteage (save tasks, settings, and statistics without backend)
File structure: Single file (App. js / App. jsx), contains all components and logic.

3. Core functional modules

3.1 Timer Core (Timer Core)

Three modes:
1. Focus (Focus): Default is 25 minutes.
2. Short Break (Short Break): Default is 5 minutes.
3. Long Break (Long Break): Default is 15 minutes.
Control function:
- Start (Start) / Pause (Pause)
- Reset–The initial time to reset back to the current mode.
- Skip –Switch directly to the next mode (e.g. focus-> short rest).
Automatic flow logic:
- End of concentration-> automatically/manually enter a short break.
- Every time you complete 4 concentration cycles - > automatically suggest/enter a long rest.
Visual feedback:
- Countdown display (MM:SS).
- Page title (document. title) Is updated with the countdown, which is convenient for users to view when switching tabs.
- Circular progress bar or linear progress bar, which changes as time decreases.

3.2 Task Management (Task Management)

CRUD operation:
- Add a new task.
- Delete the task.
- Edit the task name.
- Mark complete/incomplete.
Task estimation:
- Set the estimated number of tomato clocks for each task (Est. Pomodoros).
Current task:
- Users can click on a task in the list to set it as “currently focused task”, and “In progress: [task name]” will be displayed above the timer.

3.3 Settings (Settings)

Custom duration: Allows users to modify the number of minutes for concentration, short rest, and long rest.
Sound switch: Turn on/off the end tone (using a simple HTML5 Audio API or Beep simulation).
Automatic start: Whether the next concentration will automatically start at the end of the break (Toggle switch).

3.4 Statistical Overview (Simple Analytics)

The number of tomato clocks completed today.
The total time to focus on today (hours/minutes).

4. UI/UX design specifications

4.1 Color scheme (Theme)

The application should dynamically change the main tone according to the current mode to enhance the sense of immersion：

Focus mode: Soft red/tomato color (Tailwind: bg-red-500 / bg-rose-600)
Short break: Fresh blue-green (Tailwind: bg-teal-500 / bg-cyan-600)
Long rest: Calm blue (Tailwind: bg-blue-500 / bg-indigo-600)
background: The overall background should be light gray or very light corresponding color, keep it clean.

4.2 Layout structure (Layout)

Header: Logo + Settings button + Statistics overview button.
Main Stage (timer):
- A huge time number is displayed in the center.
- Below is the Pill-shape mode switcher.
- Below is the huge circular Start/Pause button (with hover micro-interaction effect).
Task Section (Task Area):
- Located under the timer.
- “Current task" is highlighted.
- The task list is card-based design, using a white background + a slight shadow.
- The add task button should be eye-catching.

4.3 Interaction details

Click the button to get started active:scale-95 The zoom effect (Tailwind).
Mode switching should have a smooth color transition animation (transition-colors duration-500).
The input box must have a clear Focus state.

5. Data Structure reference (Scheme)

// Task object interface Task { id: string; title: string; isCompleted: boolean; estPomodoros: number; actPomodoros: number; // Actual cost } // Set object interface Settings { focusTime: number; // Minutes shortBreakTime: number; longBreakTime: number; autoStartBreaks: boolean; autoStartPomodoros: boolean; }

6. Programming Tips (Prompt Tips for AI)

Please make sure that all status updates (especially the countdown timer) are used useEffect Can accurately handle the clear interval to prevent memory leaks.
Please use useLocalStorage Customize the hook to handle the reading and saving of data.
Please give priority to ensuring mobile adaptation (Mobile First) and use Flexbox and Grid layout.
Please do not introduce external image resources, use all icons lucide-react。

This is the real AI programming: Gemini builds a multilingual Tomato clock App in 3 minutes