核心结论：AI 原型开发的关键是先给清晰上下文，再让 AI 分步执行。先确定用户流程、页面结构、数据模型和验收标准，再开始生成代码。
适用时机：需求验证完成后、Day 4 AI 编程日、Demo Day 前的快速迭代。
一、工作原则
| 原则 | 具体做法 | 验收标准 |
|---|---|---|
| 先原型，后代码 | 先做低保真或高保真界面，再交给 AI 开发 | 用户能看懂页面目标和主要操作 |
| 先闭环，后丰富 | 只做一个核心流程，不急着加所有功能 | 用户能完成一次完整任务 |
| 先结构，后风格 | 写清页面、数据、状态、错误和权限 | AI 不需要反复猜业务规则 |
| 先验收，后扩展 | 每次生成后跑本地预览、截图和基本测试 | 页面能打开，交互能走通，错误可定位 |
- 01需求验证
- 02用户流程
- 03页面原型
- 04design.md
- 05AI 编程
- 06本地验证
- 07现场试用
- 08迭代清单
二、推荐工具组合
| 阶段 | 工具 | 用途 | 注意事项 |
|---|---|---|---|
| 原型 | Open Design、Stitch、Figma | 快速生成页面和组件结构 | 先看用户路径是否成立，再追求视觉细节 |
| 代码 | Codex、Claude Code、Cursor | 生成页面、API、状态和基础测试 | 任务要小步拆分，每步都验收 |
| 前端 | Next.js、React、Tailwind、静态 HTML | 根据复杂度选择技术栈 | 活动 Demo 可优先选部署简单的方案 |
| 数据 | Supabase、SQLite、JSON 文件 | 存用户、项目、订单和反馈 | 先满足验证，后续再优化架构 |
| 验证 | 浏览器、Playwright、截图 | 检查页面是否真的可用 | 移动端和桌面都要看 |
三、原型制作流程
1. 写用户流程
| 步骤 | 用户动作 | 页面反馈 | 失败状态 |
|---|---|---|---|
| 进入 | 打开落地页或工具页 | 5 秒内理解产品能解决什么问题 | 文案模糊、按钮找不到 |
| 输入 | 填写文本、上传文件或选择模板 | 输入区域清晰，示例可参考 | 字段太多、格式不明确 |
| 生成 | 点击生成或分析 | 显示加载状态和进度提示 | 等待过久、无反馈 |
| 查看 | 阅读结果、评分或建议 | 结果结构化，可复制或导出 | 结果太长、无法行动 |
| 转化 | 保存、分享、注册或付费 | 明确下一步动作 | 没有价值锚点 |
2. 写 design.md
# 产品目标
目标用户：
核心任务：
第一版只解决：
# 页面结构
1. 首屏：一句话价值、示例、主按钮
2. 输入区：字段、示例、限制
3. 结果区：结构、评分、导出
4. 反馈区：点赞、评论、联系方式
# 数据模型
User:
Project:
Feedback:
Payment:
# 视觉规则
颜色：
字体：
按钮：
卡片：
# 验收标准
- 桌面和移动端都能使用
- 无控制台错误
- 关键流程可完成
- 文案没有溢出3. 给 AI 的项目提示词
你是资深产品工程师。请根据以下 design.md 实现一个可运行 MVP。
要求：
1. 先阅读现有文件结构，再决定改哪些文件。
2. 保留现有技术栈和风格。
3. 先完成核心用户流程，再补充细节。
4. 添加必要的空状态、错误状态、加载状态和移动端适配。
5. 完成后运行本地验证，并说明验证结果。
业务目标：
目标用户：
核心流程：
输入：
输出：
限制：四、开发执行流程
| 阶段 | 工程动作 | 验收动作 |
|---|---|---|
| 脚手架 | 确定技术栈、目录结构、依赖和启动命令 | 本地能打开首屏 |
| 核心页面 | 实现输入、结果、操作按钮和状态提示 | 用户能完成一次任务 |
| 数据联通 | 接数据库、文件或浏览器本地存储 | 刷新后关键数据仍可读取 |
| AI 能力 | 接模型 API、提示词模板和错误处理 | 输入不同样例都能得到可解释输出 |
| 体验打磨 | 移动端、加载态、空状态、可复制、导出 | 现场用户能独立试用 |
| 发布前检查 | 跑 lint、测试、截图、隐私和密钥检查 | 无明显错误，可交给别人打开 |
原型验收清单
页面首屏 5 秒内能讲清产品价值。
核心流程可以从输入走到结果。
用户不用问开发者，也能找到下一步动作。
桌面和移动端都没有文字溢出或按钮挤压。
空状态、错误状态、加载状态都有文案。
没有把 API key、数据库密码、支付密钥写进前端代码。
至少 3 个真实用户完成试用并留下反馈。
五、常见问题处理
| 问题 | 原因 | 处理方式 |
|---|---|---|
| AI 一次写太多，项目跑不起来 | 任务范围过大 | 拆成页面、数据、API、样式、测试五步执行 |
| 页面好看但没人用 | 缺少真实任务和输入输出闭环 | 回到用户流程，先做一件高频任务 |
| 功能反复改不清楚 | 没有验收标准 | 每个功能写输入、输出、错误和完成定义 |
| 移动端很乱 | 布局缺少响应式约束 | 用固定比例、网格、最大宽度和文本换行规则 |
| 模型输出不可控 | 提示词缺少格式和示例 | 给 JSON schema、样例输入和样例输出 |
六、最终交付物
design.md：产品目标、页面结构、数据模型、视觉规则、验收标准。
可运行 MVP：本地和线上至少一个环境可打开。
核心流程截图：桌面和移动端各一张。
用户反馈表：至少 3 条现场反馈和下一轮修改优先级。
README：启动命令、环境变量、部署地址和维护说明。