📊 页面导航
适用角色与上手难度
🎯 学习产出： 看完就能用 Claude Code 独立完成「想法 → PRD → 可点击原型 → 评审 PPT」全流程
🚀 AI 能力提升： 自动化工作流、技能扩展、设计协作
产品经理实战：从需求到原型全流程
预计阅读时间: 18 分钟
把 Claude Code 想象成一个24 小时在线的超级助理——你跟它用中文聊天，它帮你写文档、画原型、做 PPT。不需要写一行代码。
这篇做什么：带你用一个真实需求，从头到尾跑一遍。每步都告诉你：输入什么、会看到什么、拿到什么。
预计时间：90 分钟（装工具 10 分钟，动手 80 分钟）
先看结果：以前 vs 现在
假设老板说：「我们用户反馈太乱了，搞个反馈收集系统。」
┌─────────────────────────────────────────────────────────────────┐
│ 以前（3 天，4 个人） │
│ │
│ 第 1 天上午 你自己打开 Word 写 PRD │
│ 第 1 天下午 跟设计师约会议，口头描述页面长什么样 │
│ 第 2 天 设计师出初版稿，你提修改意见 │
│ 第 3 天上午 设计师改完，你再确认 │
│ 第 3 天下午 前端照着设计稿切图，你检查效果 │
│ 第 4 天 准备 PPT，约评审会 │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 现在（90 分钟，你一个人） │
│ │
│ 10 分钟 装好 6 个小工具（一次性的） │
│ 20 分钟 跟 Claude Code 聊天，它出结构化 PRD │
│ 10 分钟 一句话出设计规范（配色、字体、间距全自动） │
│ 15 分钟 一句话生成 3 个可点击打开的页面原型 │
│ 10 分钟 原型导入 Figma（可选，没有 Figma 也能用浏览器看原型） │
│ 5 分钟 一键生成评审 PPT │
└─────────────────────────────────────────────────────────────────┘
开始前：把工具装好
就像买了新手机先装 App 一样。只需要装一次，之后一直能用。
第一步：打开终端
不管 Windows 还是 Mac，在 Claude Code 的终端里粘贴以下命令即可。
第二步：逐条复制粘贴
🔴 这两条必须装（1 分钟）：
# 记忆助手 — 帮你记住项目背景，下次开对话不用重新解释
npx skills add https://github.com/anthropics/skills --skill claude-mem
# 需求助手 — 把模糊的想法变成结构化的 PRD
/plugin marketplace add anthropics/skills
/plugin install feature-dev@claude-plugins-official
🟡 这两条做设计时用（1 分钟）：
# 设计规范助手 — 从哪里找配色、字体、间距方案
npx skills add https://github.com/anthropics/skills --skill ui-ux-pro-max
# 原型助手 — 从描述生成可点击的网页
npx skills add https://github.com/anthropics/skills --skill frontend-design
🟢 这条做汇报时用（30 秒）：
# PPT 助手 — PRD 一键变 PPT
npx skills add https://github.com/anthropics/skills --skill ppt-master
怎么看装没装上
在 Claude Code 里输入 /plugin list。屏幕上出现 4 个插件名字，就是装好了。
动手案例：做一个「用户反馈收集系统」
故事背景
你在一家 SaaS 公司做产品经理。公司有个在线协作工具，类似 Notion 那种。
现在的痛点是：
用户反馈靠微信群吼、靠邮件发、靠同事口头转述。客服同事手工记在 Excel 里，产品团队完全看不到全局。不知道用户最痛的是什么，优先级全凭感觉。
老板说：「搞个反馈收集功能，让用户能提交反馈，我们能处理和追踪。」
你打开 Claude Code，开始干活。
第 1 步：让 Claude Code 记住你是谁（5 分钟）
就像新同事入职，先介绍一下背景。
你输入：
记住以下信息，后面会用到：
我负责的产品是一个 SaaS 在线协作工具，叫 WorkHub。
用户可以写文档、做项目管理。
用户主要是互联网公司员工，20-35 岁，每天用 3-5 小时。
现在的痛点是用户反馈太乱，没有系统管理。
我接下来要做「用户反馈收集系统」这个功能。
项目名叫 feedback-system。
你会看到：Claude Code 回复类似「已记录」，表示记住了。下次开新对话，你说「继续做 feedback-system」，它不需要你重新解释。
就像给你的助理写了一张工作备忘。
第 2 步：把想法变成 PRD（20 分钟）
现在正式开始做需求。你需要的是一个结构化的 PRD 文档——但不用自己打开 Word 写。
你输入：
/feature-dev
我需要做一个用户反馈收集功能，帮我按阶段引导完成 PRD。
功能描述：
- 用户可以在产品里提交反馈（选分类、写描述、传截图）
- 管理员能看到所有反馈列表，回复用户，改状态，批量导出
- 有个仪表盘展示反馈趋势
角色：
- 提交者：普通注册用户
- 处理者：客服同事（3 人）+ 我一个管理员
第一版限制：
- 截图不能超过 5MB，格式只支持 PNG 和 JPG
- 反馈状态走 4 步：待处理 → 处理中 → 已回复 → 已关闭
- 先不做 AI 自动分类这种复杂功能
接下来会发生什么：
Claude Code 不会直接写 PRD。它会像有经验的同事一样，反过来问你：
🤖 Claude Code：梳理需求前，先跟你确认几个边界情况：
1. 没登录的人能看到反馈列表吗？
2. 用户提交后发现自己写错了，能编辑吗？能的话多久之内？
3. 管理员点「关闭」时必须填关闭原因吗？
4. 批量导出，是导出当前页面显示的数据，还是数据库里所有的？
5. 状态变了要不要自动发邮件通知用户？
你逐条回答就好。
你只需要回答每一条。不用自己想边界情况——它会替你想。
然后它会分 7 个阶段推进：
阶段 ① 需求澄清 → 追问边界场景，你逐条确认
产出：需求确认单
阶段 ② 方案设计 → 出数据库表和页面清单
你只需要确认「这个表结构对吗」
阶段 ③ 任务拆解 → 把大需求拆成小任务
你只需要确认「这个先后顺序对吗」
阶段 ④~⑦ → 写代码、做审查、出测试、打包交付
（这几步你可以跳过，直接让开发团队接手）
最终你拿到的：
docs/feedback-system/
├── prd.md # 📄 完整 PRD 文档，直接拿去评审
├── requirements.md # 📋 需求澄清确认单
├── design/
│ ├── database.md # 🗄️ 数据库表设计
│ └── api-design.md # 🔌 接口设计
└── tasks.md # 📝 开发任务拆分清单
prd.md 可以直接发给团队评审。你不用自己列大纲、写背景、整理用户故事——全部自动生成。
第 3 步：定设计风格（10 分钟）
PRD 里的需求清楚了，接下来要想页面长什么样。你不是设计师也能搞定——告诉 Claude Code 你要的感觉就行。
你输入：
用 ui-ux-pro-max 帮我出设计规范。
产品是一个管理后台页面（给管理员用的）。
感觉要专业、干净、不花哨。
主色用蓝色系，让人感觉靠谱。
你会看到：
🤖 Claude Code：
风格：Minimalism（极简风）
原则：去掉一切多余元素，不重要的信息不出现。
配色方案：
┌──────────────────────────────────────────┐
│ ■ 主色 #2563EB 按钮、链接、选中态 │
│ ■ 成功 #10B981 已完成、通过 │
│ ■ 警告 #F59E0B 紧急标记、提醒 │
│ ■ 背景 #F8FAFC 页面底色 │
│ ■ 卡片 #FFFFFF 信息块底色 │
│ ■ 正文 #1E293B 主要文字 │
│ ■ 辅助 #64748B 说明文字、时间戳 │
└──────────────────────────────────────────┘
字体：Inter（正文）+ JetBrains Mono（编号、代码）
按钮圆角：6px
卡片圆角：8px
这就等于有了设计规范文档。以前你要跟设计师来回讨论 2 个小时，现在 10 分钟出来。
第 4 步：生成可点击的原型（15 分钟）
最直观的一步——让 Claude Code 直接画出页面。
你输入：
基于刚才的设计规范，帮我生成 3 个页面的原型：
1. 用户提交反馈的页面
- 表单：选分类（功能建议/Bug报告/使用问题/其他）
- 描述框
- 上传截图按钮
- 选紧急程度（低/中/高）
- 提交按钮
2. 管理员查看反馈列表的页面
- 左侧导航栏
- 顶部筛选栏（按状态、分类、时间）
- 反馈列表表格（编号、标题、分类、状态、提交人、时间）
- 每行有「回复」和「改状态」按钮
- 选中多行后出现「批量导出」按钮
3. 数据仪表盘页面
- 4 个数字卡片（总反馈、待处理、本月新增、平均处理时长）
- 趋势折线图（最近 30 天）
- 分类饼图
- 最近反馈列表
用 HTML 文件生成，我直接在浏览器打开看效果。
你会看到：Claude Code 开始写代码。几分钟后，它告诉你：
🤖 Claude Code：3 个页面已生成。
prototype/
├── submit-feedback.html → 浏览器打开看看提交表单
├── admin-feedback-list.html → 浏览器打开看看管理后台
└── dashboard.html → 浏览器打开看看数据看板
你做什么：去 prototype/ 文件夹，双击 admin-feedback-list.html——浏览器打开，你能看到一个长这样的页面：
┌─────────────────────────────────────────────────────────────┐
│ ⚡ WorkHub 🔔 通知 👤 张三 │
│─────────────────────────────────────────────────────────────┤
│ 📋 反馈管理 │
│ ┌──────────┬──────────┬──────────┬──────────────────────┐ │
│ │ 全部状态 │ 全部分类 │ 最近30天 │ 🔍 搜索反馈... │ │
│ └──────────┴──────────┴──────────┴──────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ☐ 编号 │ 标题 │ 分类 │ 状态 │ ...│ │
│ │───────────────────────────────────────────────────────│ │
│ │ ☐ #0042 │ 导出数据一直转圈 │ Bug报告 │ 处理中 │ │ │
│ │ ☐ #0041 │ 想要夜间模式 │ 功能建议 │ 待处理 │ │ │
│ │ ☐ #0040 │ 不知道怎么邀请成员 │ 使用问题 │ 已回复 │ │ │
│ │ ☐ #0039 │ 移动端列表加载慢 │ Bug报告 │ 已关闭 │ │ │
│ │ ... │ │ │ │
│ └───────────────────────────────────────────────────┘ │
│ │
│ [批量导出] [标记已读] 第 1/5 页 │
└─────────────────────────────────────────────────────────────┘
点击按钮有反应、筛选能切换、表格数据真实可读——不是死图！
以前你要等设计出稿才能看到的东西，现在 15 分钟自己拿到。拿去给老板看、给开发讲需求、放进 PRD 截图——都 OK。
第 5 步：导入 Figma（可选，10 分钟）
如果你们团队用 Figma 做设计评审，这步就有用；不用 Figma 的话跳过。
你输入：
用 Figma MCP 把这个原型生成 Figma 设计稿。
拿 prototype/admin-feedback-list.html 做：
- 默认列表状态
- 筛选后的状态
- 点击某行打开详情的弹窗
- 批量导出的确认弹窗
Figma 文件名：Feedback System - 管理后台
你会看到：Figma 自动打开，里面已经有 4 个 Frame，布局跟 HTML 原型一致。设计师可以在这个基础上微调，不需要从零画。
第 6 步：一键生成评审 PPT（5 分钟）
到这一步，你手上有 PRD、有设计规范、有原型。差最后一步：评审用的 PPT。
你输入：
把 docs/feedback-system/ 下的资料汇总成评审 PPT：
需要这 10 页：
1. 封面（项目名 + 日期）
2. 为什么做（现状痛点：微信群+Excel 的问题）
3. 用户故事（3 种角色分别需要什么）
4. 功能范围（这期做什么、下期做什么）
5. 原型截图（每页贴一个核心页面）
6. 反馈状态怎么流转（pending → in_progress → replied → closed）
7. 数据模型（几张表、什么字段）
8. 上线计划（分 3 批迭代）
9. 需要哪些团队配合
10. 下一步待确认事项
商务风格，蓝色主调。
你会看到：
🤖 Claude Code：PPT 已生成。
输出文件：docs/feedback-system/review.pptx
包含 10 页幻灯片。你可以直接用 PowerPoint 打开编辑。
不用自己排版、设计、截图、贴图。5 分钟，能直接用的 PPT 文件。
你做了什么（回顾）
以前 3 天 4 个人做的事情：
写 PRD ──→ 画原型 ──→ 定设计 ──→ 做 PPT
(你) (设计师) (设计师) (你)
现在 90 分钟 1 个人：
聊天出 PRD ──→ 一句话出设计规范 ──→ 一句话出原型 ──→ 一键出 PPT
↑ ↑ ↑ ↑
第 2 步 第 3 步 第 4 步 第 6 步
常用工具组合速查
不用每次都装 6 个。看你想干什么，选对应的组合：
场景 A：只是写 PRD
└─ 装 2 个：claude-mem + feature-dev
场景 B：写 PRD + 出原型给老板看
└─ 装 4 个：claude-mem + feature-dev + ui-ux-pro-max + frontend-design
场景 C：全流程到评审 PPT
└─ 装 5 个：上面 4 个 + ppt-master
场景 D：团队用 Figma，要出设计稿
└─ 装 6 个：上面 5 个 + Figma MCP
常见问题
完全不会写代码，能做吗？
能。整个过程你不需要写一行代码。你要做的只是：
- 用中文说清楚你要什么（就像你在微信里跟同事聊天）
- 在关键的地方确认一下（Claude Code 会问你）
- 浏览器双击打开 HTML 看一眼效果
技术术语看不懂怎么办？
你不用理解。当 Claude Code 问你「数据库表结构对吗」，它会帮你列好一张表，你只需要判断「少了用户手机号字段，加上」就行——就像看 Excel 表格挑错一样。
装不上怎么办？
把错误提示截图发给 Claude Code，它会告诉你怎么办。
要钱吗？
Claude Code 本身需要付费订阅。但这 6 个插件都是开源免费的。
下一步
