案例背景
某创业团队需设计一款"AI 学习助手" App，从概念到高保真原型。传统流程：
| 环节 | 传统方式 | 耗时 | 痛点 |
|---|---|---|---|
| 用户调研 | 问卷+访谈 | 16 小时 | 样本少 |
| 竞品分析 | 逐个截图 | 12 小时 | 不全面 |
| 需求定义 | 文档撰写 | 8 小时 | 主观 |
| 用户旅程 | 画流程图 | 8 小时 | 迭代慢 |
| 信息架构 | 画结构图 | 6 小时 | 调整难 |
| 线框图 | 逐页绘制 | 24 小时 | 30 页×48 分 |
| 高保真设计 | 逐页精修 | 32 小时 | 细节多 |
| 设计系统 | 定义组件 | 8 小时 | 规范乱 |
| 评审迭代 | 多轮修改 | 16 小时 | 沟通成本 |
| 总计 | 2 人 2 周 | 130 小时 | 效率低 |
目标：用 AI 把全流程压缩到 5 天 1 人。
工具组合
| 工具 | 角色 | 选型理由 |
|---|---|---|
| Claude Code | 需求分析 + 用户旅程 | 长上下文处理调研数据 |
| GPT-4 | 竞品分析 + 功能规划 | 商业洞察与逻辑强 |
| Figma MCP | 设计系统 + 原型生成 | 直接操作 Figma |
| Cursor | 脚本编写 | IDE 内处理设计文件 |
| Brave Search MCP | 竞品调研 | 实时搜索竞品动态 |
| Prompt Chaining | 流水线编排 | 串联调研-设计-评审 |
5 天整体规划
| 天数 | 阶段 | 产出 |
|---|---|---|
| Day 1 | 用户调研 + 竞品分析 | 用户画像 + 竞品矩阵 |
| Day 2 | 需求定义 + 用户旅程 | PRD + 旅程图 |
| Day 3 | 信息架构 + 设计系统 | IA 图 + 组件库 |
| Day 4 | 线框图 + 高保真设计 | 30 页高保真原型 |
| Day 5 | 评审 + 迭代 | 终版原型 + 设计文档 |
实施步骤
Day 1：用户调研与竞品分析
Prompt 1：让 Claude Code 分析用户调研数据
你是资深用户研究员。请分析以下用户调研数据：
## 数据来源
{research_data}（问卷 200 份 + 访谈 10 人）
## 分析要求
1. 用户分群（按目标/行为/人口统计）
2. 核心痛点 Top 5
3. 核心需求 Top 5
4. 用户画像（3 个典型画像）
5. 使用场景（5 个主要场景）
## 输出
1. 用户分群表
2. 痛点-需求映射表
3. 3 个用户画像（含目标/痛点/行为/引言）
4. 场景故事板
Prompt 2：用 Brave Search MCP 做竞品调研
搜索"AI 学习助手 App 2026"的竞品信息：
1. 搜索主流竞品的功能与评价
2. 搜索用户对竞品的吐槽
3. 搜索竞品的定价策略
4. 汇总为竞品矩阵
Prompt 3：让 GPT-4 做竞品分析与差异化
你是产品策略专家。请基于以下竞品数据做差异化分析：
## 竞品数据
{competitor_data}
## 分析
1. 竞品功能对比矩阵
2. 竞品定价对比
3. 竞品用户口碑
4. 市场空白点（蓝海机会）
5. 我们的差异化定位
6. 核心功能优先级排序
## 输出
1. 竞品矩阵表
2. 差异化定位声明
3. MVP 功能清单（按 P0/P1/P2 排序）
产出：3 个用户画像 + 竞品矩阵 + 差异化定位 + MVP 功能清单。
Day 2：需求定义与用户旅程
Prompt 4：让 Claude Code 生成 PRD
你是资深产品经理。请基于以下信息生成 PRD：
## 产品信息
- 名称：AI 学习助手
- 定位：{positioning}
- 目标用户：{personas}
- 核心功能：{mvp_features}
## PRD 结构
1. 产品概述（背景/目标/价值主张）
2. 目标用户（3 个画像）
3. 功能需求（按模块分组，含优先级）
4. 非功能需求（性能/安全/兼容）
5. 成功指标（DAU/留存/满意度）
6. 里程碑计划
## 要求
1. 每个功能含用户故事（As a... I want... So that...）
2. 标注功能优先级（P0/P1/P2）
3. 标注验收标准
Prompt 5：让 GPT-4 设计用户旅程
你是 UX 设计师。请设计以下用户旅程：
## 用户画像
{persona}
## 核心场景
{scenario}
## 旅程设计
1. 用户触点（发现→注册→使用→付费→推荐）
2. 每个触点的用户行为
3. 每个触点的用户情绪（😊😐😞）
4. 每个触点的痛点与机会
5. 关键转化节点
## 输出
用户旅程图（表格）：
| 阶段 | 触点 | 行为 | 情绪 | 痛点 | 机会 | 设计要点 |
产出：完整 PRD + 3 个用户旅程图。
Day 3：信息架构与设计系统
Prompt 6：让 Claude Code 设计信息架构
你是信息架构专家。请设计 App 的信息架构：
## 功能清单
{features}
## 设计要求
1. 按用户心智模型组织（非按功能模块）
2. 导航层级不超过 3 层
3. 核心功能 3 次点击内可达
4. 标注每个页面的功能与内容
## 输出
1. 信息架构树状图（文本描述）
2. 页面清单（30 个页面）
3. 导航结构设计
4. 页面跳转关系
Prompt 7：让 Figma MCP 生成设计系统
用 Figma MCP 创建设计系统：
## 设计系统要求
1. 色彩系统：主色/辅色/语义色/中性色
2. 字体系统：标题/正文/辅助（大小/粗细/行高）
3. 间距系统：4/8/12/16/24/32/48/64
4. 圆角系统：4/8/12/16/24
5. 阴影系统：3 级阴影
6. 组件库：按钮/输入框/卡片/导航/列表/弹窗
## 执行
1. 创建 Figma 文件"AI学习助手-设计系统"
2. 创建色彩 Styles
3. 创建文字 Styles
4. 创建组件 Components
产出：信息架构图 + 页面清单 + Figma 设计系统。
Day 4：线框图与高保真设计
Prompt 8：让 GPT-4 生成页面线框图描述
你是 UI 设计师。请为以下页面生成详细的设计描述：
## 页面信息
- 页面名：{page_name}
- 功能：{feature}
- 用户故事：{user_story}
## 设计描述要求
1. 页面布局（顶部/中部/底部）
2. 组件清单（用设计系统的组件）
3. 内容清单（文字/图片/图标）
4. 交互说明（点击/滑动/弹窗）
5. 空状态/加载状态/错误状态
## 输出
页面设计规格（可直接指导 Figma 绘制）
Prompt 9：用 Figma MCP 批量生成页面
基于以下设计规格，用 Figma MCP 创建页面：
## 设计规格
{design_spec}
## 执行
1. 创建 Frame（375x812，iPhone 尺寸）
2. 按规格放置组件
3. 应用设计系统 Styles
4. 添加交互原型链接
## 页面清单（30 页）
1. 启动页
2. 登录/注册
3. 首页（学习 dashboard）
4. 课程列表
5. 课程详情
6. 学习播放页
7. 笔记页
8. 习题页
9. 进度统计
10. 个人中心
...（共 30 页）
Prompt 10：让 Claude Code 做设计一致性检查
请检查以下 30 个页面的设计一致性：
## 页面设计
{pages}
## 检查项
1. 色彩使用是否一致（只用设计系统色）
2. 字体使用是否一致
3. 间距是否遵循 8px 网格
4. 组件是否复用（非重复造轮子）
5. 图标风格是否统一
6. 交互模式是否一致
7. 空状态是否完整
## 输出
不一致清单 + 修正建议
产出：30 页高保真原型 + 一致性检查报告。
Day 5：评审与迭代
Prompt 11：让 GPT-4 生成设计评审文档
你是设计评审专家。请对以下原型做评审：
## 原型信息
{prototype}
## 评审维度
1. 用户旅程完整性
2. 功能覆盖度（对照 PRD）
3. 可用性（Nielsen 启发式）
4. 视觉一致性
5. 交互合理性
6. 边缘状态完整性
## 输出
| 维度 | 评分（1-5） | 问题 | 建议 |
Prompt 12：生成设计交付文档
生成设计交付文档：
## 内容
1. 设计概要
2. 设计系统说明
3. 页面清单与说明
4. 交互规范
5. 开发注意事项
6. 切图清单
7. 动效说明
## 格式
Markdown，可导入 Notion
产出：评审报告 + 设计交付文档 + 终版原型。
关键 Prompt 合集汇总
| Prompt | 用途 | 工具 |
|---|---|---|
| 1 | 用户调研分析 | Claude Code |
| 2 | 竞品搜索 | Brave Search MCP |
| 3 | 差异化分析 | GPT-4 |
| 4 | PRD 生成 | Claude Code |
| 5 | 用户旅程 | GPT-4 |
| 6 | 信息架构 | Claude Code |
| 7 | 设计系统 | Figma MCP |
| 8 | 线框图描述 | GPT-4 |
| 9 | 批量生成页面 | Figma MCP |
| 10 | 一致性检查 | Claude Code |
| 11 | 设计评审 | GPT-4 |
| 12 | 交付文档 | Claude Code |
效果数据
| 指标 | 传统流程 | AI 流水线 | 提升 |
|---|---|---|---|
| 总耗时 | 130 小时（2 人 2 周） | 35 小时（1 人 5 天） | 3.7 倍 |
| 页面数量 | 30 页 | 30 页 | - |
| 用户画像 | 2 个 | 3 个 | +50% |
| 竞品分析 | 5 家 | 8 家 | +60% |
| 用户旅程 | 2 条 | 3 条 | +50% |
| 设计系统组件 | 15 个 | 28 个 | +87% |
| 评审维度 | 3 个 | 6 个 | +100% |
| 边缘状态覆盖 | 60% | 95% | +58% |
| 成本 | 2 人 2 周 | API 约 $35 | - |
关键发现
- Figma MCP 是核心加速器：直接生成组件与页面，省去手动绘制。
- 用户旅程驱动设计：先画旅程再画页面，避免"为设计而设计"。
- 设计系统先行：先建系统再画页面，一致性提升 87%。
- AI 评审补盲点：AI 能系统性检查边缘状态，人工容易遗漏。
经验总结
成功要点
- 调研先行：用 AI 分析 200 份问卷 + 10 人访谈，数据驱动设计。
- 设计系统优先：先建系统再画页面，效率与一致性双提升。
- 批量生成：用 Figma MCP 批量生成 30 页，而非逐页手绘。
- 一致性检查：AI 自动检查色彩/字体/间距一致性。
踩过的坑
- Figma MCP 生成不够精细：基础布局可以，细节仍需人工调整。
- AI 不懂品牌调性：生成的配色需人工调整以符合品牌。
- 交互设计太"标准"：AI 生成的交互偏通用，创意交互需人工。
- 组件命名不一致：AI 生成的组件命名需统一规范。
- 页面跳转遗漏：30 页的跳转关系复杂，需人工补充。
不可 AI 化的环节
- 品牌视觉定义：品牌调性需人工决策
- 创意交互设计：创新交互需设计师创意
- 用户体验直觉：某些 UX 判断需经验
- ** stakeholder 沟通**：设计评审需人际沟通
复用建议
这套方案可迁移到：
- Web 应用设计：调整画布尺寸与导航模式
- Dashboard 设计：增加数据可视化组件
- 小程序设计：调整组件为小程序原生
- 企业内部工具：增加权限与角色设计
- 营销落地页：增加转化优化设计
核心是 Prompt Chaining 串联调研-设计-评审，每个环节独立可调试。
工具版本
- Claude Code：v1.0.20+
- GPT-4：gpt-4o
- Figma MCP：最新版
- 5 天 API 总成本：约 $35（Claude $20 + GPT-4 $15）