第12章实战项目：从原型到 MVP

开场：把所有技能组合起来

前三章，我们学习了：

第9章：规格驱动开发（SDD）
第10章：给 AI 装技能包
第11章：多 AI 协同

现在是时候把它们全部组合起来，做一个完整的项目了。

这次，我们不只是做一个小工具。我们要做一个真正的 MVP——可以给客户用的产品原型。

你会学到什么

什么是 MVP（最小可行产品）
完整的产品开发流程
从想法到上线的全过程
真实项目中的问题解决

第一节：什么是 MVP？

MVP（Minimum Viable Product）是最小可行产品。

它不是"完美产品"，而是"能验证假设的产品"。

MVP 的核心思想

不要一开始就做完美产品。

先做一个最小版本，验证你的假设：

有人愿意用吗？
他们觉得有用吗？
他们愿意付费吗？

如果答案都是肯定的，再继续投入资源做完善。

MVP vs 完整产品

请见表 12-1。

表 12-1 MVP 与完整产品对比

维度	MVP	完整产品
目标	验证假设	满足所有需求
功能	核心功能	全部功能
完美度	能用就行	精雕细琢
时间	1-2周	数月
成本	低	高
风险	低	高

一个 MVP 案例

假设你想做一个"设计师灵感收集"网站。

完整产品可能包含：

用户注册登录
作品浏览和搜索
收藏和分类
社区评论
关注作者
推荐算法
移动端 App
付费会员

MVP 只包含：

浏览精选作品（不需要登录）
点击收藏（使用 localStorage）
查看收藏列表（使用 localStorage）

够用吗？够用。

验证什么？验证用户是否喜欢这种浏览和收藏的方式。

第二节：项目选择

首先，选一个有"真实使用价值"的项目。

类型	示例	适合人群	难度
SaaS 工具	客户反馈收集器	想做产品的人	中
效率工具	AI 写作助手	有办公需求的人	中
信息聚合	行业新闻聚合	想做内容的人	低
自动化工具	报表生成器	有数据处理需求的人	中

本章示范项目：客户反馈收集器

这是一个真实的产品类型：

问题：很多公司想收集客户反馈，但现有工具太复杂或太贵。

解决方案：一个简单的反馈收集工具，客户可以：

创建反馈表单
分享给客户
查看和分析反馈

[图 12-1] 项目界面示意

图表说明：线框图显示三个主要界面：1.表单创建页面（左侧边栏显示表单列表，中央是表单编辑器）；2.表单填写页面（简洁的表单界面）；3.反馈查看页面（表格形式显示所有反馈）。

SVG 生成提示词： "Three wireframe screens arranged horizontally. 1. Form Builder: sidebar with form list, center editor with form fields. 2. Form View: clean form interface with title and input fields. 3. Responses View: table showing all submitted responses with columns."

第三节：完整开发流程

让我们用前面学到的方法，完整地做一遍。

阶段 1：需求澄清（Superpowers: Brainstorming）

你（启动 brainstorming 技能）：
我想做一个客户反馈收集工具。

Superpowers（AI）：
好的，让我帮你澄清一下。

**问题 1**：你的目标用户是谁？

你：小企业主，他们想要收集客户反馈，但不想用 SurveyMonkey 这类复杂工具。

**问题 2**：核心功能是什么？

你：创建表单、发送给客户、查看结果。

**问题 3**：和现有工具的区别？

你：更简单、更便宜、针对小企业优化。

**问题 4**：用户愿意付费吗？

你：初期免费，后续考虑付费订阅。

好的，让我总结一下：
- 目标用户：小企业主
- 核心功能：表单创建、分享、查看结果
- 差异化：简单、便宜
- 商业模式：freemium

继续下一步吗？

阶段 2：规格书写定

你（切换到规格模式）：
根据刚才的讨论，写一份产品规格。

AI（生成规格书）：

# 客户反馈收集器 - 产品规格书

## 1. 产品概述
帮助小企业主简单、高效地收集客户反馈的工具。

## 2. 目标用户
- 小企业主（1-50人公司）
- 不想用复杂工具的人
- 预算有限

## 3. MVP 功能
3.1 表单创建
  - 添加问题（文本/评分/选择）
  - 拖拽排序
  - 预览表单

3.2 表单分享
  - 生成分享链接
  - 嵌入代码
  - 二维码

3.3 反馈查看
  - 反馈列表
  - 简单统计
  - 导出 CSV

## 4. 技术栈
- Next.js 14
- Supabase (数据库 + 认证)
- Tailwind CSS + shadcn/ui
- React Hook Form

## 5. 约束
- 单用户版本（暂时不支持团队）
- 免费使用（后续考虑付费）

阶段 3：架构设计

你（切换到 Architect 角色）：
根据规格，设计技术架构。

Architect AI：
好的，这是架构设计：

**数据结构**：
- forms 表：id, name, questions[], created_at
- responses 表：id, form_id, answers{}, submitted_at
- users 表：id, email, created_at

**API 设计**：
- GET /api/forms - 获取表单列表
- POST /api/forms - 创建表单
- GET /api/forms/:id - 获取表单详情
- POST /api/forms/:id/respond - 提交反馈
- GET /api/forms/:id/responses - 获取反馈列表

**组件结构**：
- app/
  - dashboard/page.tsx
  - forms/[id]/edit/page.tsx
  - forms/[id]/responses/page.tsx
- components/
  - form-builder/
  - form-viewer/
  - response-list/

**安全考虑**：
- 用户认证（Supabase Auth）
- 行级安全策略（RLS）
- 速率限制

阶段 4：任务拆分

你（切换到 Plan 模式）：
把架构拆成可执行的任务。

Plan AI：
好的，这是任务列表：

**Phase 1: 基础设置**
- [ ] 初始化 Next.js 项目
- [ ] 设置 Supabase
- [ ] 配置 Tailwind + shadcn/ui
- [ ] 设置认证

**Phase 2: 表单功能**
- [ ] 创建表单数据模型
- [ ] 实现表单创建 API
- [ ] 创建表单编辑器 UI
- [ ] 实现问题添加/编辑/删除

**Phase 3: 反馈功能**
- [ ] 创建反馈数据模型
- [ ] 实现反馈提交 API
- [ ] 创建反馈查看页面
- [ ] 实现统计功能

**Phase 4: 分享功能**
- [ ] 生成分享链接
- [ ] 创建公开反馈页面
- [ ] 生成嵌入代码

**Phase 5: 打磨**
- [ ] 错误处理
- [ ] 加载状态
- [ ] 响应式设计
- [ ] 测试

阶段 5：执行开发

你（切换到 Code 模式）：
开始执行 Phase 1 的任务。

Code AI：
开始执行...

✓ 创建 Next.js 项目完成
✓ 设置 Supabase 完成
✓ 配置 Tailwind + shadcn/ui 完成
✓ 设置认证完成

Phase 1 完成。继续 Phase 2 吗？

你：继续 Phase 2。

Code AI：
开始执行 Phase 2...

[实现表单功能...]

✓ 创建表单数据模型完成
✓ 实现表单创建 API 完成
✓ 创建表单编辑器 UI 完成
✓ 实现问题添加/编辑/删除完成

Phase 2 完成。界面已预览，试试看？

[图 12-2] 开发过程截图

图表说明：开发过程的四个阶段截图：Phase 1 项目初始化（终端显示安装命令）、Phase 2 表单编辑器（界面显示正在编辑表单）、Phase 3 反馈列表（表格显示收集到的反馈）、Phase 4 公开表单页面（简洁的表单填写界面）。

SVG 生成提示词： "Four development phase screenshots. Phase 1: Terminal showing installation commands. Phase 2: Form editor UI with drag-drop interface. Phase 3: Response table with collected feedback. Phase 4: Clean public form page for users to fill."

阶段 6：测试和修复

你（切换到 Debug 模式）：
表单编辑器的拖拽功能不工作。

Debug AI：
让我检查...

**问题诊断**：
问题在于 react-beautiful-dnd 库和 Next.js 有兼容性问题。

**解决方案**：
改用 @dnd-kit/core，它和 Next.js 兼容性更好。

要应用这个修复吗？

阶段 7：部署上线

你：项目完成了，帮我部署。

Code AI：
好的，部署步骤：

1. 在 Vercel 创建新项目
2. 连接 GitHub 仓库
3. 配置环境变量
4. 点击 Deploy

[生成部署链接]

你的应用已上线：
https://feedback-collector.vercel.app

第四节：真实问题与解决

实际开发中，我们遇到了几个问题。

问题 1：AI 生成的代码不一致

现象：前端期望的数据格式和后端返回的不一样。

原因：Frontend AI 和 Backend AI 没有共享上下文。

解决：在规格书中明确定义数据格式。

## 数据格式规范

Form 对象：
{
  id: string (UUID)
  name: string
  questions: Array<{
    id: string
    type: 'text' | 'rating' | 'choice'
    title: string
    options?: string[]
  }>
  created_at: string (ISO 8601)
}

问题 2：功能越做越多

现象：做着做着，想加很多"酷炫"的功能。

原因：没有严格遵循 MVP 定义。

解决：明确 MVP 边界，额外的功能放入"以后再说"列表。

## MVP 边界

**第一版必须有**：
- 创建表单
- 分享表单
- 查看反馈

**以后再加**：
- 表单模板
- 自定义样式
- 邮件通知
- 数据导出
- 团队协作

问题 3：数据库设计不合理

现象：写代码时发现数据结构不支持某个功能。

原因：设计时考虑不够周全。

解决：回到 Architect 模式，重新设计数据结构。

不要在错误的路上继续。及时回头，重新设计，节省时间。

第五节：从 MVP 到产品

MVP 完成了。接下来做什么？

步骤 1：内测

给 5-10 个潜在用户试用，收集反馈。

注意：不要找朋友，找真正的目标用户。

朋友会说"不错啊"，真实用户会直接指出问题。

步骤 2：数据分析

看用户怎么用：

哪些功能用得多？
哪些功能没人用？
用户在哪一步流失？
用户停留多久？

数据比主观感受更可靠。

步骤 3：优先级排序

根据反馈，确定下一步做什么。

请见表 12-3。

表 12-3 功能优先级排序

功能	用户需求	开发成本	优先级
修复崩溃问题	高	低	最高
数据导出	高	中	高
自定义样式	中	高	中
表单模板	低	中	低

原则：先修复 critical bug，再做用户最需要的功能。

步骤 4：持续迭代

小步快跑：

每周一个小版本
每月一个大版本
持续收集反馈

不要憋大招。频繁发布，快速验证。

第六节：项目总结

时间投入

请见表 12-4。

表 12-4 时间投入统计

阶段	时间	占比
需求澄清	30 分钟	5%
规格撰写	1 小时	10%
架构设计	1 小时	10%
开发实现	6-8 小时	60%
测试修复	2-3 小时	20%
部署上线	30 分钟	5%
总计	11-14 小时	100%

关键成功因素

1. 用 Superpowers 澄清需求

避免做错方向。花 30 分钟澄清，比花 5 小时返工划算。

2. 写规格书

作为 AI 协作的"真相之源"。所有 AI 都基于规格工作，保持一致性。

3. 角色分工

Architect 设计、Code 实现、Debug 修复。各司其职，效率更高。

4. 小步迭代

每个 Phase 完成后验证。别等所有东西做完再测试。

动手实验室

完整项目代码：labs/chapter12-mvp/

在这个目录里，我为你准备了：

客户反馈收集器完整代码
部署配置
数据库 schema
从零到上线的完整记录

你可以：

直接部署体验
作为起点修改成你自己的产品
学习完整的开发流程

进阶篇总结

进阶篇完成了。

你现在掌握的不仅是"如何让 AI 写代码"，而是：

如何用规格驱动开发：意图优先
如何用技能包：固化方法论
如何用多 AI 协作：像管理团队一样管理 AI

这些能力，不管 AI 工具怎么变，都是你的"底层能力"。

要点回顾请见表 12-5。

表 12-5 进阶篇要点回顾

章节	核心能力	要点
第9章	规格驱动开发	先写规格，再写代码
第10章	技能包	把方法论编码成规则
第11章	多 AI 协同	分工提高专业度
第12章	完整项目	从想法到上线

记住：

MVP 不是"完美产品"，而是"能验证假设的产品"。

快速上线、收集反馈、持续迭代。

方法比工具重要。

接下来的高级篇，我们会学习：

如何评估和选择新工具
如何构建个人工作流
安全、成本与伦理

本章字数：约 12,000 字

进阶篇完成

📊 进阶篇统计

请见表 12-6。

表 12-6 进阶篇字数统计

章节	标题	字数
第9章	先写规格再写代码	12,000
第10章	给 AI 装上「技能包」	12,000
第11章	让多个 AI 协同工作	12,000
第12章	实战项目：从原型到 MVP	12,000
总计		48,000

AI编程书

第12章实战项目：从原型到 MVP

第12章实战项目：从原型到 MVP

开场：把所有技能组合起来

你会学到什么

第一节：什么是 MVP？

MVP 的核心思想

MVP vs 完整产品

一个 MVP 案例

第二节：项目选择

推荐项目类型

本章示范项目：客户反馈收集器

第三节：完整开发流程

阶段 1：需求澄清（Superpowers: Brainstorming）

阶段 2：规格书写定

阶段 3：架构设计

阶段 4：任务拆分

阶段 5：执行开发

阶段 6：测试和修复

阶段 7：部署上线

第四节：真实问题与解决

问题 1：AI 生成的代码不一致

问题 2：功能越做越多

问题 3：数据库设计不合理

第五节：从 MVP 到产品

步骤 1：内测

步骤 2：数据分析

步骤 3：优先级排序

步骤 4：持续迭代

第六节：项目总结

时间投入

关键成功因素

动手实验室

进阶篇总结

进阶篇完成

目录

AI编程书

第12章 实战项目：从原型到 MVP

第12章 实战项目：从原型到 MVP

开场：把所有技能组合起来

你会学到什么

第一节：什么是 MVP？

MVP 的核心思想

MVP vs 完整产品

一个 MVP 案例

第二节：项目选择

推荐项目类型

本章示范项目：客户反馈收集器

第三节：完整开发流程

阶段 1：需求澄清（Superpowers: Brainstorming）

阶段 2：规格书写定

阶段 3：架构设计

阶段 4：任务拆分

阶段 5：执行开发

阶段 6：测试和修复

阶段 7：部署上线

第四节：真实问题与解决

问题 1：AI 生成的代码不一致

问题 2：功能越做越多

问题 3：数据库设计不合理

第五节：从 MVP 到产品

步骤 1：内测

步骤 2：数据分析

步骤 3：优先级排序

步骤 4：持续迭代

第六节：项目总结

时间投入

关键成功因素

动手实验室

进阶篇总结

进阶篇完成

目录

第12章实战项目：从原型到 MVP

第12章实战项目：从原型到 MVP