实战复盘：我是如何用 Gemini3 Pro 输出“生产级 UI”的？
实战复盘：我是如何用 Gemini3 Pro 输出“生产级 UI”的？
实战复盘：我是如何用 Gemini3 Pro 输出“生产级 UI”的？ 实战复盘：我是如何用 Gemini3 Pro 输出“生产级 UI”的？ Modified December 2, 2025 拿着生成的这个UI交互，加上需求文档，直接可以开启 Vibe coding 了。 总结一下 AI 确实强，但它还没强到能读懂你的脑电波。 要想得到惊艳的结果，我们不能只做“提问者”，而要学会做“指挥官”。 给足上下文，给足参考系，给足技术约束 ，这才是独立开发者用 AI 提效的正确姿势。 希望我的这些小技巧能帮大家少走点弯路。 附件 产品需求文档 (AI PRD) 1.产品定位 (Role & Goal) • 它是谁 (Role) ： ◦ 身份 ：一位不仅懂诗词，还懂“儿童心理学”的 AI 陪练伙伴。 ◦ 角色 ：它不是冷冰冰的考官，而是像“导演”或“彩排伙伴”一样，引导孩子从理解意境到开口背诵。 ◦ 拟人化 ：提供不同性格的教练（如活泼的贝贝、智慧的吴老师、搞怪的 Sparky），让孩子有陪伴感。 • 给谁用 (Target Audience) ： ◦ 核心用户 ：6 12 岁的小学生（K12阶段）。他们面临背诵古诗文或英语课文的压力，觉得枯燥且难以坚持。 ◦ 决策用户 ：家长。希望孩子能高效、快乐地完成背诵作业，同时保护视力。 • 目标 (Goal) ： ◦ 核心目标 ：将“死记硬背”转化为“闯关游戏”。 ◦ 价值主张 ：通过 AI 语音交互和多模态（图文）辅助，让背诵过程可量化（徽章系统）、可视化（记忆卡片）、有趣化（接龙与拼图）。 2.核心功能 (Key Features) A. 首页与任务管理 (Dashboard) • 任务卡片流 ：展示当前学习的诗词列表。 • 五维成就系统 ：每个任务对应 5 个徽章槽位，直观展示进度。 ◦ ✏️ 填空 (Fill) ：完成挖空练习。 ◦ 🧩 拼图 (Puzzle) ：完成乱序重组。 ◦ 📖 故事 (Story) ：完成 AI 意境问答。 ◦ 🤝 接龙 (Relay) ：完成人机接龙挑战。 ◦ 🏆 大师 (Master) ：完成最终全篇背诵（根据分数获得金银铜牌）。 • 内容录入 ：支持 OCR 拍照扫描（模拟）或从内置经典诗词库添加。 B. 学习模式 (The "Walkman") • 记忆卡片 ：正面是文字，背面是 AI 根据诗句生成的助记图像（Mnemonic Image）。 • 随身听播放器 ：支持全篇朗读、分段朗读。 C. 趣味练习 (Mini Games) • 挖空练习 (Magic Ink) ：AI 智能识别名词/动词进行遮挡，通过键盘选择填空。 • 诗词拼图 (Word Puzzle) ：将打散的诗句碎块重新排序。 D. AI 教练核心流程 (The AI Coach Flow) 核心亮点 这是一个递进式的三阶段背诵法： 1. 故事模式 (Story Mode 理解) ： ◦ AI 朗读一句，生成画面，并提出引导性问题（如：“你脑海中出现了什么画面？”）。 ◦ 孩子语音回答，AI 判断理解是否正确。 2. 接龙模式 (Relay Mode 开口) ： ◦ Level 1 (引导) ：AI 读上句，孩子读下句（有文字提示）。 ◦ Level 2 (盲背) ：文字被遮挡，孩子需要凭记忆接龙，错误时 AI 会提示。 ◦ Level 3 (互换) ：孩子领读，AI 接龙。 3. 舞台模式 (The Stage 考核) ： ◦ 全篇背诵挑战。 ◦ 救生圈机制 (Lifesaver) ：背不出来可以点击“偷看 (Peek)”，但会计入“提示扣分”。 E. 结算与反馈 (Result & Feedback) 最新优化 • 算式化评分 ：清晰展示 准确度 (Base Score) 提示扣分 (Penalty) = 最终得分 (Final Score) 。 • 导演笔记 ：AI 生成一句情感化的评语（如“感情很到位！”）。 • 纠错高亮 ：标红读错的字（可点击重听），标绿读得极好的字（给予正反馈）。 3.设计调性 (Vibe) • 视觉风格 (Visual Style) ： ◦ 温暖 (Warm & Cozy) ：主色调采用 Brand Cream ( FFFDF6 ) 和 Brand Yellow ( FFD768 )，营造纸质书般的护眼感，避免刺眼的纯白。 ◦ 圆润 (Rounded & Soft) ：所有的卡片、按钮使用超大圆角 ( rounded 3xl / rounded full )，给人安全、亲和的感觉，像玩具积木。 ◦ 拟物化 (Skeuomorphic Touches) ：结算页设计成“打孔笔记本”或“成绩单”的样式，增强仪式感。 • 交互反馈 (Juicy Interactions) ： ◦ 多汁 (Juicy) ：点击要有回弹 ( active:scale 95 )，错误要有晃动 ( shake )，成功要有纸屑 ( confetti )。 ◦ 宽容 (Forgiving) ：AI 的语音识别允许一定的容错率，鼓励为主。报错时使用温柔的提示（“哎呀，再试一次”），而不是生硬的“错误”。 • 语言风格 (Voice & Tone) ： ◦ 中英文自适应 ：中文模式下使用“太棒了！”、“导演笔记”、“准确度”等亲切词汇；英文模式保持 Encouraging tone。 ◦ 伙伴感 ：不使用“系统提示”，而是以教练的口吻说话（如：“Coach BeiBei is checking...”）。 系统提示词 Role You are an expert Sr. Frontend Engineer and UI/UX Designer. Tech Stack (Strict Constraints) 1. Framework: React (Functional Components with Hooks). 2. Styling: Tailwind CSS. (Do NOT use custom CSS classes, use standard Tailwind utility classes for everything). 3. Icons: lucide react. 4. Components: Build form scratch using Tailwind, but mimic the visual style of "shadcn/ui" (clean borders, subtle shadows, rounded corners, ample whitespace). Design System • Color Palette: Use Slate 50 to Slate 900 for neutrals. Use Indigo 600 or Violet 600 for primary actions. • Spacing: Use generous padding (p 6, p 8) to create breathing room. • Radius: Use rounded xl or rounded 2xl for cards and buttons to make it friendly. 拿着生成的这个UI交互，加上需求文档，直接可以开启 Vibe coding 了。 总结一下 AI 确实强，但它还没强到能读懂你的脑电波。 要想得到惊艳的结果，我们不能只做“提问者”，而要学会做“指挥官”。 给足上下文，给足参考系，给足技术约束 ，这才是独立开发者用 AI 提效的正确姿势。 希望我的这些小技巧能帮大家少走点弯路。 附件 产品需求文档 (AI PRD) 1.产品定位 (Role & Goal) • 它是谁 (Role) ： ◦ 身份 ：一位不仅懂诗词，还懂“儿童心理学”的 AI 陪练伙伴。 ◦ 角色 ：它不是冷冰冰的考官，而是像“导演”或“彩排伙伴”一样，引导孩子从理解意境到开口背诵。 ◦ 拟人化 ：提供不同性格的教练（如活泼的贝贝、智慧的吴老师、搞怪的 Sparky），让孩子有陪伴感。 ◦ 身份 ：一位不仅懂诗词，还懂“儿童心理学”的 AI 陪练伙伴。 ◦ 角色 ：它不是冷冰冰的考官，而是像“导演”或“彩排伙伴”一样，引导孩子从理解意境到开口背诵。 ◦ 拟人化 ：提供不同性格的教练（如活泼的贝贝、智慧的吴老师、搞怪的 Sparky），让孩子有陪伴感。 • 给谁用 (Target Audience) ： ◦ 核心用户 ：6 12 岁的小学生（K12阶段）。他们面临背诵古诗文或英语课文的压力，觉得枯燥且难以坚持。 ◦ 决策用户 ：家长。希望孩子能高效、快乐地完成背诵作业，同时保护视力。 ◦ 核心用户 ：6 12 岁的小学生（K12阶段）。他们面临背诵古诗文或英语课文的压力，觉得枯燥且难以坚持。 ◦ 决策用户 ：家长。希望孩子能高效、快乐地完成背诵作业，同时保护视力。 • 目标 (Goal) ： ◦ 核心目标 ：将“死记硬背”转化为“闯关游戏”。 ◦ 价值主张 ：通过 AI 语音交互和多模态（图文）辅助，让背诵过程可量化（徽章系统）、可视化（记忆卡片）、有趣化（接龙与拼图）。 ◦ 核心目标 ：将“死记硬背”转化为“闯关游戏”。 ◦ 价值主张 ：通过 AI 语音交互和多模态（图文）辅助，让背诵过程可量化（徽章系统）、可视化（记忆卡片）、有趣化（接龙与拼图）。 2.核心功能 (Key Features) A. 首页与任务管理 (Dashboard) • 任务卡片流 ：展示当前学习的诗词列表。 • 五维成就系统 ：每个任务对应 5 个徽章槽位，直观展示进度。 ◦ ✏️ 填空 (Fill) ：完成挖空练习。 ◦ 🧩 拼图 (Puzzle) ：完成乱序重组。 ◦ 📖 故事 (Story) ：完成 AI 意境问答。 ◦ 🤝 接龙 (Relay) ：完成人机接龙挑战。 ◦ 🏆 大师 (Master) ：完成最终全篇背诵（根据分数获得金银铜牌）。 ◦ ✏️ 填空 (Fill) ：完成挖空练习。 ◦ 🧩 拼图 (Puzzle) ：完成乱序重组。 ◦ 📖 故事 (Story) ：完成 AI 意境问答。 ◦ 🤝 接龙 (Relay) ：完成人机接龙挑战。 ◦ 🏆 大师 (Master) ：完成最终全篇背诵（根据分数获得金银铜牌）。 • 内容录入 ：支持 OCR 拍照扫描（模拟）或从内置经典诗词库添加。 B. 学习模式 (The "Walkman") • 记忆卡片 ：正面是文字，背面是 AI 根据诗句生成的助记图像（Mnemonic Image）。 • 随身听播放器 ：支持全篇朗读、分段朗读。 C. 趣味练习 (Mini Games) • 挖空练习 (Magic Ink) ：AI 智能识别名词/动词进行遮挡，通过键盘选择填空。 • 诗词拼图 (Word Puzzle) ：将打散的诗句碎块重新排序。 D. AI 教练核心流程 (The AI Coach Flow) 核心亮点 这是一个递进式的三阶段背诵法： 1. 故事模式 (Story Mode 理解) ： ◦ AI 朗读一句，生成画面，并提出引导性问题（如：“你脑海中出现了什么画面？”）。 ◦ 孩子语音回答，AI 判断理解是否正确。 ◦ AI 朗读一句，生成画面，并提出引导性问题（如：“你脑海中出现了什么画面？”）。 ◦ 孩子语音回答，AI 判断理解是否正确。 2. 接龙模式 (Relay Mode 开口) ： ◦ Level 1 (引导) ：AI 读上句，孩子读下句（有文字提示）。 ◦ Level 2 (盲背) ：文字被遮挡，孩子需要凭记忆接龙，错误时 AI 会提示。 ◦ Level 3 (互换) ：孩子领读，AI 接龙。 ◦ Level 1 (引导) ：AI 读上句，孩子读下句（有文字提示）。 ◦ Level 2 (盲背) ：文字被遮挡，孩子需要凭记忆接龙，错误时 AI 会提示。 ◦ Level 3 (互换) ：孩子领读，AI 接龙。 3. 舞台模式 (The Stage 考核) ： ◦ 全篇背诵挑战。 ◦ 救生圈机制 (Lifesaver) ：背不出来可以点击“偷看 (Peek)”，但会计入“提示扣分”。 ◦ 全篇背诵挑战。 ◦ 救生圈机制 (Lifesaver) ：背不出来可以点击“偷看 (Peek)”，但会计入“提示扣分”。 E. 结算与反馈 (Result & Feedback) 最新优化 • 算式化评分 ：清晰展示 准确度 (Base Score) 提示扣分 (Penalty) = 最终得分 (Final Score) 。 • 导演笔记 ：AI 生成一句情感化的评语（如“感情很到位！”）。 • 纠错高亮 ：标红读错的字（可点击重听），标绿读得极好的字（给予正反馈）。 3.设计调性 (Vibe) • 视觉风格 (Visual Style) ： ◦ 温暖 (Warm & Cozy) ：主色调采用 Brand Cream ( FFFDF6 ) 和 Brand Yellow ( FFD768 )，营造纸质书般的护眼感，避免刺眼的纯白。 ◦ 圆润 (Rounded & Soft) ：所有的卡片、按钮使用超大圆角 ( rounded 3xl / rounded full )，给人安全、亲和的感觉，像玩具积木。 ◦ 拟物化 (Skeuomorphic Touches) ：结算页设计成“打孔笔记本”或“成绩单”的样式，增强仪式感。 ◦ 温暖 (Warm & Cozy) ：主色调采用 Brand Cream ( FFFDF6 ) 和 Brand Yellow ( FFD768 )，营造纸质书般的护眼感，避免刺眼的纯白。 ◦ 圆润 (Rounded & Soft) ：所有的卡片、按钮使用超大圆角 ( rounded 3xl / rounded full )，给人安全、亲和的感觉，像玩具积木。 ◦ 拟物化 (Skeuomorphic Touches) ：结算页设计成“打孔笔记本”或“成绩单”的样式，增强仪式感。 • 交互反馈 (Juicy Interactions) ： ◦ 多汁 (Juicy) ：点击要有回弹 ( active:scale 95 )，错误要有晃动 ( shake )，成功要有纸屑 ( confetti )。 ◦ 宽容 (Forgiving) ：AI 的语音识别允许一定的容错率，鼓励为主。报错时使用温柔的提示（“哎呀，再试一次”），而不是生硬的“错误”。 ◦ 多汁 (Juicy) ：点击要有回弹 ( active:scale 95 )，错误要有晃动 ( shake )，成功要有纸屑 ( confetti )。 ◦ 宽容 (Forgiving) ：AI 的语音识别允许一定的容错率，鼓励为主。报错时使用温柔的提示（“哎呀，再试一次”），而不是生硬的“错误”。 • 语言风格 (Voice & Tone) ： ◦ 中英文自适应 ：中文模式下使用“太棒了！”、“导演笔记”、“准确度”等亲切词汇；英文模式保持 Encouraging tone。 ◦ 伙伴感 ：不使用“系统提示”，而是以教练的口吻说话（如：“Coach BeiBei is checking...”）。 ◦ 中英文自适应 ：中文模式下使用“太棒了！”、“导演笔记”、“准确度”等亲切词汇；英文模式保持 Encouraging tone。 ◦ 伙伴感 ：不使用“系统提示”，而是以教练的口吻说话（如：“Coach BeiBei is checking...”）。 系统提示词 Role You are an expert Sr. Frontend Engineer and UI/UX Designer. Tech Stack (Strict Constraints) 1. Framework: React (Functional Components with Hooks). 2. Styling: Tailwind CSS. (Do NOT use custom CSS classes, use standard Tailwind utility classes for everything). 3. Icons: lucide react. 4. Components: Build form scratch using Tailwind, but mimic the visual style of "shadcn/ui" (clean borders, subtle shadows, rounded corners, ample whitespace). Design System • Color Palette: Use Slate 50 to Slate 900 for neutrals. Use Indigo 600 or Violet 600 for primary actions. • Spacing: Use generous padding (p 6, p 8) to create breathing room. • Radius: Use rounded xl or rounded 2xl for cards and buttons to make it friendly. 🔗 原文链接： https://mp.weixin.qq.com/s/bNw Wv54... https://mp.weixin.qq.com/s/bNw Wv54... 原创 小品匠 产品炼丹指北2025年11月22日 22:20 天津 最近我在做那个给孩子用的背诵 App。一开始，我在 Cursor 里还是用之前流传的老方法，用HTML+ Tailwind CSS的方式，来生成原型。 我试了Claude Sonnet4.5、GPT Codex、Gemini2.5pro。不是说不能用吧，但是总是感觉差点儿意思，咋一看可以。但是作为产品细扣的话，总是有问题。要不是添加了很多冗余元素，要不是风格很差。 所以之前我的用法是，我把PRD梳理完，丢给这三个模型，让他们分别输出。同时让他们分别给彼此挑毛病，给我提供一些交互上的灵感； 但是Gemini3 pro发布之后，我发现整个玩儿法都变了，我已经完全可以让它生成“生产级”的原型交互了，在文章的后面，我会附上提示词、PRD文档、原型UI截图。 今天就把我总结的一套 高质量原型生成工作流 分享给大家，全是踩坑踩出来的干货。 第一招：别让 AI 猜，它猜出来的都是“平均值” 很多时候我们觉得 AI 生成的东西“平庸”，是因为我们的输入太模糊。AI 为了不出错，只能给出一个最安全、最普通的方案。 要想出精致的原型，你得先当好产品经理。 我现在的做法是，在写代码前，先给 AI 投喂一段 “微型 PRD” （需求文档）。这不是八股文，而是要明确告诉它三件事： 1. 给谁用？ （比如我的 App 是给小学生用的，那风格就得是大圆角、高对比度、活泼的。） 2. 核心路径是什么？ （不要说“做一个首页”，要说“用户进来第一眼要看到今日任务，其次是进度条，最后是大大的开始按钮”。） 3. 内容填充（Mock Data）： 这一点超重要！告诉 AI：“不要留白，请用真实的模拟数据填满界面。”这里看你使用的工具，最好能接入nanobanana，可以直接让它生成相应的图片等内容，让内容填充的更加丰满 实测对比： • ❌ 输入：做一个背单词卡片。 • ✅ 输入：做一个背单词卡片，内容是“Apple”，音标是 [ˈæpl]，例句要有一句简单的英文儿歌，背景要是柔和的淡黄色。 第二招：直接甩图！视觉参考是降维打击 这是我在 Gemini 上发现的最强功能，也是很多人忽略的一点。 文字描述风格（比如“现代化”、“极简”）其实很抽象，AI 理解的“极简”可能和我们要的“极简”完全不是一回事。 最简单的办法：直接“抄”作业。 如果你喜欢多邻国（Duolingo）那种果冻质感的按钮，或者喜欢 Linear 那种极客风的黑色面板： 1. 手机截图截下来。 2. 扔给 AI（Gemini 支持多模态输入）。 3. 说一句： “参考这张图的配色逻辑和按钮质感，生成我的页面。” 这一招简直是降维打击。因为图片包含了极其丰富的信息量：间距、阴影参数、字体层级，AI 通过读图能瞬间对齐你的审美标准，比你写 500 字的 Prompt 都有用。 第三招：给 AI 穿上“技术紧身衣” 有了文档，有了参考图，最后一步是 约束技术栈 。 如果不加限制，AI 可能会给你写一大堆 <style 标签或者原生的 CSS，这种代码即使好看，也完全没法维护，是一次性的垃圾代码。 要生成“生产级”的原型，必须强制约束它使用 工业界的标准组合 。 我现在每次生成前，都会把这段话作为 System Prompt（系统设定） 垫底： 你是一个高级前端专家。在生成代码时，必须严格遵守以下约束： 1. 框架： 只使用 React (Hooks)。 2. 样式： 严禁手写 CSS！必须全部使用 Tailwind CSS 的原子类（这是保证设计规范的关键）。 3. 图标： 使用 lucide react 。 4. UI 风格： 模仿 shadcn/ui 的设计语言（细边框、柔和阴影、大留白）。 这就像是给 AI 穿上了一套“紧身衣”。有了 Tailwind 和 Shadcn 的约束，AI 就像在做填空题，想做得丑都难。 最后的实战效果 把上面三招结合起来： “清晰的文档” + “参考图投喂” + “React/Tailwind 强约束” 这是我为我的背诵工具生成的新版原型