五步使用 Gemini 打造精美 APP（下篇）：从状态简报到完整应用

前言

上篇文章完成了前三步：生成 PRD、提取 UX 规格、建立设计系统。

设计规范定义了组件的样式，但没说明在不同状态下的表现。

第四步：生成应用状态简报

按钮的默认、按下、加载、错误状态，颜色和动画如何变化，都要写清楚。这样开发时才知道怎么实现。

第五步：用 Google AI Studio 将设计转化为代码

上篇提到 Claude Code 擅长快速实现功能。这次我用 Google AI Studio——免费、长上下文、代码生成能力强，适合将完整的设计简报转化为可运行的 React 应用。

下面展示最后两步的流程，所有提示词都给你。

第四步：生成应用状态简报

准备工作

本文继续使用 Gemini 网页版生成状态简报。

现在我们有了：

• • 完整的 PRD 文档
• • 清晰的功能列表和 UX 规格
• • 详细的设计系统规范

下一步是基于这些内容，生成每个功能的每个界面状态的详细说明。

设计前的认知

很多人认为开发人员可以直接从设计系统规范开始写代码。但设计规范只定义了”组件长什么样”，没有定义”在不同状态下长什么样”。

举个例子。设计规范定义了按钮的默认样式，但没有定义：

• • 按钮按下时的动画效果
• • 按钮禁用时的颜色和透明度
• • 按钮加载时是否显示 spinner
• • 按钮错误时是否显示红色边框

所以第四步不是画界面，而是用 AI 生成应用状态简报。

真实案例：时薪转换器状态简报

这是我实际生成的「时薪转换器」应用状态简报。

核心概念很简单：

• • 每个功能有多个界面状态（如默认、运行中、暂停、错误）
• • 每个状态都有明确的布局、颜色、动画、交互说明
• • 开发人员可以直接对照实现，设计还原度极高

我使用的 Prompt（精简版）：

你是资深 SaaS 产品设计师，专注于产品设计和解决用户问题。

我已完成产品 PRD、UX 规格和设计系统规范，现在需要你生成完整的应用状态简报（State Brief）。

状态简报是对每个功能的每个界面状态的详细描述——包括布局、颜色、动画、交互方式。

请为每个功能模块提供：

1. 1. 界面名称
2. 2. 状态列表（如初始、运行、暂停、错误）
3. 3. 详细说明：布局、颜色、动画、交互方式

生成的内容包括：

Feature: Dashboard (首页资产仪表盘)

• • Home View State 1 (Default / Active User) – 卡片式资产布局、金额数字展示、动态岛待机状态
• • Home View State 2 (Scrolled) – 导航转场、Sticky Header 高斯模糊、列表项渐入动画
• • Home View State 3 (AI Coach Modal Active) – 焦点状态、打字机效果、触觉反馈

Feature: Active Timer (沉浸式计时器)

• • Timer Focus View State 1 (Running / Loss Mode) – 巨大呼吸圆环、红色脉冲光环、金额跳动
• • Timer Focus View State 2 (Paused) – 紧张感释放、颜色变化、弹簧动效
• • Timer Focus View State 3 (Category Selection) – Grid 布局弹窗、选中高亮、震动反馈

Feature: Value Calculator (价值换算器)

• • Calculator Modal State 1 (Input Focus) – 键盘自动升起、计算器风格输入框
• • Calculator Modal State 2 (The Verdict / Result) – 结论式结果展示、荧光笔高亮效果

Feature: History & Stats (历史与统计)

• • Chart View State 1 (Data Visualization) – 面积图、交互光标、触觉反馈
• • Chart View State 2 (Range Switching) – 形变动画、平滑过渡

Feature: Onboarding (时薪设置)

• • Settings Modal State 1 (Input) – 双 Tab 模式、实时换算
• • Settings Modal State 2 (Success) – Lottie 动画、Count Up 动画

如果觉得生成的状态简报不够清晰怎么办？

我让 AI 提供每个状态的详细说明，包括：

• • 具体的像素值（如圆角 32px、Blur 20px）
• • 精确的颜色代码（如 Alert Red #FF4B4B）
• • 详细的动画参数（如 Scale 0.95 → 1.05，Duration 2s）
• • 明确的交互反馈（如 Haptic Tick 震动）

这样开发人员可以直接对照实现，无需猜测。

完整 Prompt + 生成结果：👉 见文末「案例资源」

文档详细列出了每个功能的每个界面状态，包括布局、颜色、动画等具体参数。

第五步：使用 Google AI Studio 构建应用

准备工作

先了解一下 Google AI Studio。

本文使用 Google AI Studio，选择 Gemini 3 Pro Preview 模型。

为什么用 Google AI Studio？

• • 免费使用，提供 Gemini 3 Pro Preview 免费额度
• • 长上下文窗口，可以一次性处理完整的设计简报
• • 界面右侧会实时显示渲染的 UI 模型，所见即所得
• • 点击右上角的部署功能，可直接部署到网页端查看效果

快速上手 Google AI Studio：

1. 1. 访问平台：打开 https://aistudio.google.com
2. 2. 创建应用：点击”New App”创建新应用
3. 3. 选择模型：选择 Gemini 3 Pro Preview（支持实时预览）
4. 4. 输入 Prompt：在左侧输入框粘贴你的需求
5. 5. 查看预览：右侧会实时显示生成的 UI 界面
6. 6. 调整优化：根据预览效果调整 Prompt
7. 7. 部署应用：点击右上角”Deploy”部署到网页端
8. 

设计前的认知

很多人认为需要把所有功能一次性告诉 AI。但 Google AI Studio 的实时预览功能更适合逐步构建——一个 feature 一个 feature 地添加，每次都能看到效果，及时调整。

所以我们用第二种方法：逐步添加功能。

实践效果：从设计到可运行应用

这是基于状态简报生成的完整 React 应用。

我使用的 Prompt（精简版）：

你是资深前端架构师和 UI/UX 设计师，专注于构建高保真、可交互的原型。

我的应用设计简报如下：

技术栈：

• • React + Hooks
• • Tailwind CSS
• • Lucide React 图标

设计要求：

• • 移动优先（375-430px）
• • iOS 风格美学
• • 单文件输出
• • 响应式设计
• • 数据模拟
• • 可交互状态

开发规则：

• • 逐个添加功能
• • 输出完整代码
• • 保持功能完整

应用概览：【粘贴第四步生成的状态简报】

第一个功能：【粘贴第一个功能的状态简报】

请生成完整的 React 代码（App.js 或 App.jsx）。

完整 Prompt + 生成结果：👉 见文末「案例资源」

生成的结果很不错。

生成的应用包含：

• • 首页仪表盘（Dashboard Feature）- 卡片式资产布局、金额展示、最近交易列表
• • 计时器界面（Active Timer Feature）- 沉浸式界面、红色呼吸圆环、实时金额跳动
• • 历史记录（History & Stats Feature）- 面积图可视化、时间维度切换、交互光标

实际效果展示：

计时器功能：沉浸式界面、红色呼吸圆环、实时金额跳动

历史记录功能：面积图可视化、交互光标、时间维度切换

这份代码完全可运行，复制粘贴即可使用，符合 React 最佳实践，设计还原度高。

我的使用流程

我的实际工作流程：

1. 1. 访问 Google AI Studio：打开 https://aistudio.google.com
2. 2. 创建新应用：点击”New App”创建一个新的应用项目
3. 3. 选择模型：选择 Gemini 3 Pro Preview（支持右侧实时预览）
4. 4. 粘贴 Prompt 模板：将上面的 Prompt 模板粘贴到左侧输入框
5. 5. 替换第一个 Feature：将 Prompt 中【粘贴第一个功能的状态简报】的部分，替换成第四步生成的状态简报中的第一个功能（如”首页仪表盘”）
6. 6. 等待生成：AI Studio 会读取你的 Prompt，然后在右侧自动修改代码并生成对应的网页界面
7. 7. 实时预览与微调：
• • 查看右侧生成的 UI 效果
• • 如果有问题，直接在输入框告诉 AI 如何修改
• • AI 会立即调整代码，右侧界面实时更新
• • 反复调整直到满意为止

1. 8. 添加第二个 Feature：
• • 第一个功能确认无误后，继续在输入框粘贴第二个功能的状态简报
• • 告诉 AI：”添加这个功能到现有应用中”
• • 右侧会显示更新后的完整应用
2. 9. 逐步完善：以此类推，逐步添加所有功能，直到应用完整
3. 10. 部署查看：点击右上角的”Deploy”按钮，将应用部署到网页端，方便在真实浏览器中查看效果

关键技巧：

• • 每次只添加一个功能，让 AI 逐步构建应用
• • 充分利用右侧实时预览，及时发现问题
• • 不满意就直接告诉 AI 如何修改，无需手动改代码
• • Prompt 中的设计要求部分确保所有组件风格统一
• • 使用 iOS 风格的圆角、阴影、动画保持一致性

这样生成的代码质量高，符合 React 最佳实践，并且完全遵循你的设计简报。

完整案例与素材

关于「时薪转换器」的完整素材（PRD文档、UI/UX规格、设计系统、状态简报、React 代码、Prompt模板）。

如何获取？

关注本公众号，回复关键词：「app」，即可获取完整素材包下载链接。

包含内容：

五步生成 APP 的核心文档 + + 完整 Prompt

• • 功能规格书（Feature Specs）
• • 构建产品规范（Product Requirements）
• • 生成产品设计简报（Design Brief）
• • 应用状态简报（State Brief）
• • 从设计到代码实现（Implementation）

实战案例：时薪转换器

• • 完整 PRD 文档
• • 完整 UX 规格
• • 完整设计系统
• • 完整状态简报

说明：以上内容均为实战教学材料，所有 Prompt 都可以直接复制使用。

总结：完整的五步流程

回顾一下完整的流程：

总耗时：约 4-5 小时（零基础也能完成）

核心理念：

• • 设计先行：先确定设计系统，再开发功能
• • 工具组合：Gemini（设计） + Google AI Studio（代码）= 完整流程
• • 零基础友好：所有提示词都提供，直接复制粘贴即可

你能得到什么：

• • 一套完整的设计系统（可复用于其他项目）
• • 一个可运行的精美应用
• • 端到端的 AI 辅助开发经验

写在最后

这套流程的核心价值不是”替代设计师”或”替代开发者”，而是降低创造门槛。

零基础的人可以快速验证产品想法，获得专业级的设计和代码。有经验的人可以提高效率，将重复性工作交给 AI，专注于创意和策略。

设计先行 + 工具组合——这是我探索出的最有效的路径。

如果你也用这套流程做出了应用，欢迎在评论区分享！

系列文章

• • 上篇：五步使用 Gemini 打造精美 APP（上篇）：从想法到设计规范
• • 下篇：五步使用 Gemini 打造精美 APP（下篇）：从状态简报到完整应用

关注公众号，获取更多 AI 辅助开发的实战教程！

如果这篇文章对你有帮助，欢迎点赞、分享给更多想学 AI 辅助开发的朋友！

有问题或建议？欢迎在评论区留言，我会一一回复！