最近我在做那个给孩子用的背诵 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 强约束”

这是我为我的背诵工具生成的新版原型

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

Image

拿着生成的这个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 判断理解是否正确。
  1. 接龙模式 (Relay Mode - 开口)：
  • Level 1 (引导)：AI 读上句，孩子读下句（有文字提示）。
  • Level 2 (盲背)：文字被遮挡，孩子需要凭记忆接龙，错误时 AI 会提示。
  • Level 3 (互换)：孩子领读，AI 接龙。
  1. 舞台模式 (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.