五步使用 Gemini 打造优雅 APP（上篇）：从想法到设计规范

前言

功能强大但没人愿意用——这是很多独立开发者的痛点。

90% 的用户下载前会先看截图。界面粗糙，再好的功能也白搭。

换个思路：设计先行

先确定 UI 风格，再开发功能——新功能直接套用设计系统，避免反复返工。一套好的设计规范，是个人开发者最宝贵的杠杆。

为什么用 Gemini 做 UI？

Claude Code 擅长快速实现功能，但构建设计系统不是它的强项。对于零基础开发者，对话式 AI 更适合：

• • 给出完整的设计规范（配色、字体、组件、间距）
• • 解释每个设计决策背后的原理
• • 一步步引导你构建专业级设计系统

（别担心，下篇文章你会看到 Claude Code 在部署阶段的精彩表现）

你能学到什么

今天我展示完整的五步流程，从产品想法到设计系统落地——所有提示词都给你，零基础也能复现。

第一步：生成产品需求文档

准备工作

在开始之前，先明确”要做什么”。

平台说明：本文所有提示词都在 Gemini 网页版中使用。

如果你没有 Gemini Pro，使用其他对话式 AI 大模型（如 Claude、GPT-4 等）也可以——上篇主要是针对文档和初期架构的设计，对模型能力要求不高，关键是提示词结构。

设计前的认知

很多人把 UI 设计当次要环节。实际上，设计和用户体验应该和功能一起考虑。

所以第一步不是画界面，而是用 AI 生成产品需求文档。

📱 真实案例：时薪转换器

这是我实际构建的「时薪转换器」应用。

核心概念：

• • 将时间实时转化为金钱数字，产生”损失厌恶”心理
• • 帮助用户减少无效时间投入（刷短视频、无效会议等）
• • 基于行为经济学理论设计

我使用的 Prompt（精简版）：

我需要一个「时薪转换器」应用的 MVP PRD 文档。

产品理念：基于行为经济学和损失厌恶心理学，将时间实时转化为金钱数字，帮助用户减少无效时间投入。

请生成包含以下内容的 PRD：

1. 1. 产品概述（背景、核心价值、目标用户）
2. 2. 核心用户流程
3. 3. 功能模块详解（包含用户故事、核心体验、UI 状态与行为）
4. 4. UI 设计规范（配色方案、字体排版、组件样式）
5. 5. 数据结构设计
6. 6. 开发优先级路线图

输出要求：结构化 markdown，简洁 actionable，可直接指导开发。

AI 的输出结果：

执行摘要：构建一个时间价值管理应用，通过将时间实时转化为金钱数字，利用损失厌恶心理学帮助用户减少无效时间投入。

核心功能：

• • 实时计时器（带金额显示）
• • 时薪设置与调整
• • 历史记录统计
• • 数据可视化分析
• • 损失提醒功能

生成的 PRD 包含：

• • 产品概述与目标用户
• • 核心用户流程（5 个主要场景）
• • 3 个功能模块详解（首页仪表盘、沉浸式计时器、历史统计）
• • 完整的 UI 设计规范（配色、字体、组件）
• • 数据结构与开发优先级

到这里，我们对 MVP 的构建有了明确方向。这些信息将指导后续的 UI 设计。

如果觉得生成的 PRD 文档不够清晰，看得头晕怎么办？

我采取的方法就是让 AI 生成对应的逻辑图。这样看起来就挺清晰，不仅有逻辑功能还体现了主要功能和核心概念。

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

第二步：提取功能与 UX 规格

现在我们有了 PRD，但信息太多，需要提取直接影响设计的内容。

🎨 实践效果：UI/UX 功能规格

基于上面的 PRD，我生成了完整的 UI/UX 功能规格说明书。

我使用的 Prompt（精简版）：

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

我已完成产品 PRD，现在需要你基于 PRD 生成完整的 UI/UX 功能规格说明书。

请为每个功能模块提供：

1. 1. 用户故事（As a [person], I want to [action], so that I can [benefit]）
2. 2. 核心体验（Core Experience）
3. 3. UI 状态与行为（UI States & Behaviors）
• • 默认状态、加载状态、空状态、错误状态
• • 交互方式、视觉反馈、动画效
  4. 高级用户与边缘情况

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

AI 的输出结果（以时薪转换器为例）：

功能：实时计时器

• • 用户故事：作为用户，我想要看到时间流逝时对应的金钱损失，以激励自己专注
• • 正常状态：大号金额显示 + 计时器运行中
• • 空状态：显示”开始计时”按钮引导
• • 错误状态：显示”时薪未设置，请先设置”提示
• • UX 要求：金额数字醒目，计时状态有视觉反馈（脉冲动画）

功能：历史统计

• • 用户故事：作为用户，我想要查看每天的时间浪费情况，了解自己的使用习惯
• • 正常状态：柱状图显示每天的有效/无效时间比例
• • 加载状态：显示数据加载动画
• • 错误状态：显示”暂无历史数据”空状态
• • UX 要求：图表直观，支持点击查看详情

这份规格的价值：

• • 开发人员可以直接对照实现 UI 组件
• • 设计还原度高，所有交互细节都有说明
• • 避免开发过程中的反复沟通

第三步：生成设计系统规范

现在我们有了清晰的功能列表和 UX 要求，可以开始构建设计系统了。

有两种方法：

1. 1. 直接开始：如果你已有完整的风格构思，直接编码实现
2. 2. 找灵感 + AI 生成：推荐！找喜欢的应用界面作为参考

我们使用第二种方法。

🖼️ 实践效果：完整 UI/UX 设计规范

这是基于前面两步（PRD + UX 规格）生成的完整 UI/UX 设计规范。

我使用的 Prompt（精简版）：

你是资深 SaaS 产品设计师，专注于极简美学和直观体验。

我已完成产品 PRD 和 UX 规格，现在需要你生成完整的 UI/UX 设计规范（Design System）。

请基于以下内容：

1. 1. 我提供的 HTML 页面代码（主页、历史记录、计时器）
2. 2. UI 参考风格图（现代金融/SaaS 审美）

请生成包含以下模块的设计规范：

1. 1. 执行摘要（电梯演讲、问题陈述、目标用户、解决方案、MVP 成功指标）
2. 2. 配色体系（主色/辅助色/功能色/中性色，每个标注 Hex 代码和详细用途）
3. 3. 字体排版（字族、字重、所有文本样式层级及尺寸）

完整 Prompt + 226 行设计规范：👉 见文末「案例资源」

AI 的输出结果（226 行完整设计规范）：

🎨 完整配色体系

主色调：Primary Dark Green #174717、Primary Lime #B1EB71辅助色：Secondary Green Light #F4FBE4、Secondary Surface #F5F7F5功能色：Alert Red #FF4B4B、Trend Green #00B050中性色：Text Primary #111111、Card White #FFFFFF

📝 字体排版系统

双字体策略：中文 Noto Sans SC，英文/数字 Inter（等宽）字重层级：Regular 400 → Black 900文本样式：Display 38-48px、Heading 1-3、Body 14-15px、Caption 12-13px

🧩 组件样式规范

按钮：Primary（深绿背景）、Secondary（青柠背景）、Square Icon 40x40px卡片：Standard Card 圆角 24px，柔和阴影输入框：高度 56px，圆角 12px图标：Small 16px / Standard 24px / Large 28px

📐 间距与布局系统

基于 4pt 网格：8px / 12-16px / 24px / 32-40px圆角规范：12px（小按钮）、20-24px（列表项）、32-36px（大型容器）

⚡ 动效与交互

呼吸效果：Scale 0.95 → 1.1，Duration 2s微交互：Button Press Scale 0.97Modal 转场：Slide up from bottom，cubic-bezier(0.16, 1, 0.3, 1)

🌗 深色模式适配

完整配色映射：Dark Background #0A0C0A、Dark Surface #1C1F1C、Dark Brand Color #B1EB71

这份规范的价值：

• • 所有颜色、尺寸、圆角都有具体数值
• • 开发人员可以直接对照实现每个 UI 组件
• • 设计还原度高，无需反复沟通
• • 支持深色模式，考虑完整

💡 如何找 UI 设计灵感？

我用的参考网站和资源：

推荐网站：

• • Dribbble：https://dribbble.com – 高质量设计师作品，搜索”SaaS dashboard”、”finance app”等关键词
• • Mobbin：https://mobbin.com – 真实移动应用设计参考，可以筛选 iOS/Android
• • Behance：https://www.behance.net – 综合性设计平台，有完整的设计案例展示

我的搜索策略：

1. 1. 先确定核心风格关键词（如”minimal fintech”、”Forest-inspired”）
2. 2. 在这些网站搜索关键词，浏览 20-30 个案例
3. 3. 截图保存 3-5 个最喜欢的，上传给 Gemini 3.0 Pro 网页版作为审美参考
4. 4. 告诉 Gemini：不必完全照搬，但要提供设计方向性洞察

这样生成的配色方案和组件样式，既符合现代审美，又有自己的特色。

📚 完整案例与素材

关于「时薪转换器」的完整素材（PRD文档、UI/UX规格、设计系统、Prompt模板），我将在下篇文章末尾附上下载链接。

如何获取？

1. 1. 关注本公众号：第一时间收到下篇推送
2. 2. 下篇文末：所有完整素材的链接
3. 3. 免费分享：包括我使用的所有 Prompt 模板

敬请期待下篇！

下篇预告

下篇文章将展示：

• • 第四步：生成应用状态简报
• • 第五步：完整应用整合与优化
• • 完整素材：PRD、UI/UX规格、设计系统、Prompt模板全部分享

关注公众号，别错过！

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