这才是真正的 AI 编程：Gemini 3 几分钟构建多语言番茄钟App

AI 编程的能力正在以惊人的速度进化。以往Cursor、Claude Code、Codex等编程工具虽然能力也很强，但使用上毕竟还有一定门槛，现在Gemini 3 Pro来了，它直接把门槛降到零，从理解需求文档（PRD）到交付完整、可交互的产品，而且做出来的东西审美还很在线，不像其他的要么UI千篇一律，要么各种小瑕疵，需要优化。现在Gemini 3.0直接一步到位，只能说谷歌确实太强了。

今天，我来分享一下我是如何使用 Gemini 3 Pro Preview 构建一个番茄钟（Pomodoro）App的。Gemini 令人惊叹的不是它能写代码，而是它能零手写构建一个完整功能的App，并且恰到好处地理解迭代需求——比如我需要增加一个多语言切换功能，它就能在合理的地方布局这个需求的实现方式。

第一步：让 Gemini 变身产品经理 (生成 PRD)

作为一个好牛马，我对自己的效率一向严格要求，因此我想要一个番茄钟，极简、美观且支持任务管理。但我不想自己写需求文档，因此我打开Gemini 新发布的思考模式，让它给我做一个番茄钟App的需求文档。

大致的提示词如下：

请你作为一名产品经理，为一个名为 “FocusFlow” 的番茄钟 App 撰写一份精简的 PRD。 核心功能： 25分钟专注/5分钟休息、任务列表管理、简单数据统计功能。 UI风格： 现代、极简、以红色为主色调。 技术栈要求： React + Tailwind CSS。

Gemini 迅速生成了一份结构清晰的 PRD，包含了概述、功能模块（计时器核心、任务管理、设置、统计概览）、UI/UX 规范以及数据结构参考、编程提示等。（查看附录的“极简高效番茄钟”需求文档）。

第二步：构建核心应用

拿着这份热乎的 PRD，我切换到了 Google AI Studio 的代码构建环境。

点击左侧菜单的“Build” 进入，“Build your ideas with Gemini” 这个界面。点击对话框 “Add Files“ 上传需求文档，并在对话框里输入：

根据这份 PRD，帮我构建这个 App。

点击“Build”，Gemini 直接进入了 Code Assistant 模式，开始构建：

思考（Thinking）： 它分析了 PRD，规划了组件结构，包括Timer，TaskList，Stats。
构建（Building）： 右侧的Code窗口里代码开始飞快的编写，预览（Preview）开始实时渲染。
完成： 大约几十秒后，一个红色的、带有巨大倒计时的番茄钟就出现在了眼前。它已经可以运行了！倒计时准确，任务可以添加。UI设计和功能使用上都没啥问题。神奇！

第三步：迭代开发——增加多语言支持

第一个基础版是英文的，考虑到日常使用，我希望它能支持中文，因此我想让它支持简体中文、繁体中文和英文的自由切换，方便不同语言的用户使用：

增加语言切换功能，支持简体中文、繁体中文和英文。

我没有说这个功能应该放在哪里。Gemini 自动执行需求分析和规划，几十秒，它在设置里增加了一个挺好看的按钮式的语言切换功能。卡到好处！

第四步：预览与最终效果

点击预览窗口右上角的 “Full screen”，我体验了最终版本的 FocusFlow 番茄钟。

它支持三种模式，可以自定义每种模式的时间，设置自动开始专注和休息:

专注 (Focus): 默认 25 分钟。
短休息 (Short Break): 默认 5 分钟。
长休息 (Long Break): 默认 15 分钟。

很方便的任务管理模式：

自由添加、命名、删除任务，标记完成/未完成；
为每个任务设定预估的番茄钟数量。

打开统计概览，可以看到：今日完成的番茄钟数量；今日专注总时长（小时/分钟）。

打开设置，可以调整：语言；打开/关闭提示音。

整个过程，我没有打开过任何专业的代码工具，没有手动修改一行代码。除了编写和预览，Gemini 3 的AI编程界面（参考截图右上角）还提供了一系列让开发者感到舒适的后续操作选项，这标志着它从一个“聊天机器人”转向了一个真正的“云端 IDE”。

總結

使用 Gemini 3 编写 App 的体验是相当颠覆性的。从按照 PRD 构建程序到处理复杂的逻辑重构，再到最后的一键部署交付，Gemini 3 展现了极高的完成度。对于非技术人员来说，构建自己工具的门槛被前所未有地降低了，你只要有想法，就可以让AI去实现。可以说，这才是真正的AI编程。

附录：“极简高效番茄钟”需求文档（Gemini 生成）

1. 项目概述

开发一个基于 Web 的单文件 React 应用。该应用结合了番茄工作法计时器、轻量级待办事项列表（To-Do List）和简单的数据统计功能。目标是帮助用户保持专注，并管理每日任务。

2. 技术栈要求 (Critical Stack)

框架: React (Functional Components, Hooks)
样式: Tailwind CSS (用于所有布局、颜色、响应式设计和动画)
图标: Lucide-React (使用 React 组件形式的图标)
数据持久化: LocalStorage (保存任务、设置和统计数据，无需后端)
文件结构: 单文件 (App.js / App.jsx)，包含所有组件和逻辑。

3. 核心功能模块

3.1 计时器核心 (Timer Core)

三种模式:
1. 专注 (Focus): 默认 25 分钟。
2. 短休息 (Short Break): 默认 5 分钟。
3. 长休息 (Long Break): 默认 15 分钟。
控制功能:
- 开始 (Start) / 暂停 (Pause)
- 重置 (Reset) – 重置回当前模式的初始时间。
- 跳过 (Skip) – 直接切换到下一个模式（如：专注 -> 短休息）。
自动流转逻辑:
- 专注结束 -> 自动/手动进入短休息。
- 每完成 4 个专注周期 -> 自动建议/进入长休息。
视觉反馈:
- 倒计时显示 (MM:SS)。
- 网页标题 (document.title) 随倒计时更新，方便用户切换标签页时查看。
- 环形进度条或线性进度条，随时间减少而变化。

3.2 任务管理 (Task Management)

CRUD 操作:
- 添加新任务。
- 删除任务。
- 编辑任务名称。
- 标记完成/未完成。
任务估算:
- 为每个任务设定预估的番茄钟数量（Est. Pomodoros）。
当前任务:
- 用户可以点击列表中的某个任务将其设为“当前专注任务”，计时器上方会显示“正在进行: [任务名]”。

3.3 设置 (Settings)

自定义时长: 允许用户修改专注、短休息、长休息的分钟数。
声音开关: 开启/关闭结束提示音（使用简单的 HTML5 Audio API 或 Beep 模拟）。
自动开始: 休息结束是否自动开始下一个专注（Toggle开关）。

3.4 统计概览 (Simple Analytics)

今日完成的番茄钟数量。
今日专注总时长（小时/分钟）。

4. UI/UX 设计规范

4.1 配色方案 (Theme)

应用应根据当前模式动态改变主色调，增强沉浸感：

专注模式: 柔和的红色/番茄色 (Tailwind: bg-red-500 / bg-rose-600)
短休息: 清新的蓝绿色 (Tailwind: bg-teal-500 / bg-cyan-600)
长休息: 沉稳的蓝色 (Tailwind: bg-blue-500 / bg-indigo-600)
背景: 整体背景应为浅灰或极淡的对应色系，保持干净。

4.2 布局结构 (Layout)

Header: Logo + 设置按钮 + 统计概览按钮。
Main Stage (计时器):
- 居中显示巨大的时间数字。
- 下方为 Pill-shape (药丸状) 的模式切换器。
- 再下方为巨大的圆形 Start/Pause 按钮（带悬停微交互效果）。
Task Section (任务区):
- 位于计时器下方。
- “当前任务” 突出显示。
- 任务列表卡片化设计，使用白色背景 + 轻微阴影。
- 添加任务按钮要醒目。

4.3 交互细节

按钮点击要有 active:scale-95 的缩放效果（Tailwind）。
模式切换要有平滑的颜色过渡动画 (transition-colors duration-500)。
输入框要有清晰的 Focus 状态。

5. 数据结构参考 (Schema)

// 任务对象
interface Task {
  id: string;
  title: string;
  isCompleted: boolean;
  estPomodoros: number;
  actPomodoros: number; // 实际花费
}

// 设置对象
interface Settings {
  focusTime: number; // 分钟
  shortBreakTime: number;
  longBreakTime: number;
  autoStartBreaks: boolean;
  autoStartPomodoros: boolean;
}

6. 编程提示 (Prompt Tips for AI)

请确保所有状态更新（特别是计时器倒数）使用 useEffect 能够准确处理清除 Interval，防止内存泄漏。
请使用 useLocalStorage 自定义 Hook 来处理数据的读取和保存。
请优先保证移动端适配（Mobile First），使用 Flexbox 和 Grid 布局。
请不要引入外部图片资源，所有图标使用 lucide-react。