第 13 期 | 产品经理的新技能：从 PRD 到可运行原型只需 20 分钟

更新于 2026/4/5

🎯 学习目标

学完本期你将掌握：

  1. 如何将产品需求文档 (PRD) 直接交给 Claude Code 生成可运行原型
  2. PM 不写代码也能驱动 Agent 完成从设计到部署的全流程
  3. 原型迭代的高效 Prompt 模板
  4. 快速验证想法的最佳实践

📖 核心概念讲解

13.1 PM 使用 Claude Code 的新范式

传统流程（2-4 周）:
  PM 写 PRD → 设计师画原型 → 前端排期 →
  开发 → 联调 → 交付

Claude Code 流程（20 分钟）:
  PM 粘贴 PRD → Claude 生成可运行原型 →
  PM 直接在浏览器中体验 → 口头反馈调整 → 完成

关键转变:
  ❌ PM 不需要学 React / Vue / CSS
  ✅ PM 需要学会描述清楚自己想要什么
  ✅ PM 需要学会用 Claude Code 进行迭代

13.2 PRD 到原型的转化因素

PRD 质量 原型产出 迭代次数
模糊描述（"做个管理后台"） 通用模板，需大量修改 10+ 轮
带功能列表 基本可用的原型 5-8 轮
带功能+用户故事+数据结构 高度匹配需求 2-3 轮
完整 PRD + 竞品截图 几乎不需修改 0-1 轮

13.3 PM 友好的指令模板

一份好的 PM → Claude 指令包含:

┌─────────────────────────────────────────────┐
│  1. 项目概述（一句话说清做什么）            │
│  2. 核心用户故事（3-5 个 As...I want...）  │
│  3. 页面列表（首页、列表页、详情页...）    │
│  4. 数据实体（用户、订单、商品...）         │
│  5. 技术偏好（React? Vue? 不在乎?）        │
│  6. 样式偏好（暗色主题? 类似 Notion?）      │
└─────────────────────────────────────────────┘

💻 模拟 Claude TUI 交互

场景：20 分钟从 PRD 到可运行原型

> 我是产品经理，请帮我把以下 PRD 做成可运行原型：

  ## 项目：团队 OKR 追踪工具
  ## 核心功能：
  1. 管理者可以创建季度 OKR
  2. 每个 Objective 下有多个 Key Results
  3. 团队成员可以更新 KR 的进度（0-100%）
  4. 首页仪表盘展示整体完成率
  ## 数据实体：Team, Objective, KeyResult
  ## 风格：类似 Linear，现代暗色主题

╭─ Claude ─────────────────────────────────────────────╮
│                                                      │
│  收到你的 PRD！我来为你生成一个完整的可运行原型。    │
│                                                      │
│  🏗️ 技术方案:                                        │
│  - 前端: Next.js 14 + Tailwind CSS                  │
│  - 数据: 本地 JSON Server (快速原型)                │
│  - 部署: 本地 localhost:3000                        │
│                                                      │
│  ⚙️ Tool: Bash                                       │
│  $ npx create-next-app@latest okr-tracker \          │
│    --typescript --tailwind --app --no-eslint         │
│  ✅ 项目创建完成                                     │
│                                                      │
│  📁 创建以下页面:                                    │
│  ⚙️ Tool: Write → app/page.tsx (仪表盘)             │
│  ⚙️ Tool: Write → app/okr/page.tsx (OKR 列表)      │
│  ⚙️ Tool: Write → app/okr/new/page.tsx (创建 OKR)  │
│  ⚙️ Tool: Write → app/components/Dashboard.tsx      │
│  ⚙️ Tool: Write → app/components/OKRCard.tsx        │
│  ⚙️ Tool: Write → app/components/ProgressBar.tsx    │
│  ⚙️ Tool: Write → lib/types.ts (数据类型定义)      │
│  ⚙️ Tool: Write → lib/mock-data.ts (模拟数据)      │
│                                                      │
│  ⚙️ Tool: Bash                                       │
│  $ npm run dev                                        │
│  ✅ 已启动: http://localhost:3000                    │
│                                                      │
│  🎉 原型已就绪！你可以直接在浏览器中体验。          │
│  包含:                                                │
│  - 仪表盘: 整体进度可视化 (环形图)                  │
│  - OKR 列表: 按季度分组，展开查看 KR               │
│  - 进度更新: 拖动滑块更新 KR 完成率                │
│  - 暗色主题: Linear 风格的现代 UI                   │
│                                                      │
╰──────────────────────────────────────────────────────╯

场景：PM 用口语迭代原型

> 仪表盘的进度条太小了，能不能换成那种大的环形图？
  还有团队头像没显示，加一下

╭─ Claude ─────────────────────────────────────────────╮
│                                                      │
│  好的，两个调整:                                     │
│                                                      │
│  1️⃣ 将进度条 → 大环形图 (SVG Donut Chart)           │
│  ⚙️ Tool: Edit → app/components/Dashboard.tsx        │
│  把 ProgressBar 组件替换为 DonutChart                │
│  尺寸: 200x200px，渐变色填充                        │
│                                                      │
│  2️⃣ 添加团队成员头像                                 │
│  ⚙️ Tool: Edit → app/components/OKRCard.tsx          │
│  添加 Avatar 组件，使用首字母头像                   │
│                                                      │
│  ⚙️ Tool: Bash → $ npm run dev                       │
│  ✅ 刷新浏览器查看效果                               │
│                                                      │
╰──────────────────────────────────────────────────────╯

💻 代码演示：PM 常用的快捷指令

# ✅ 从 PRD 文件直接生成原型
claude "读取 docs/prd.md，生成一个可在浏览器中运行的原型"

# ✅ 截图驱动：上传竞品截图
claude "做一个和这个截图类似的页面" --image competitor.png

# ✅ 快速添加交互
claude "给列表页加上搜索功能和分页"

# ✅ 快速生成 demo 数据
claude "生成 50 条看起来真实的测试数据，
  包含用户名、公司、创建日期"

# ✅ 一键部署到 Vercel
claude "把项目部署到 Vercel，生成一个可分享的 URL"

🔧 涉及的 Tools

工具 PM 视角用途 说明
Bash 项目创建与部署 执行 npx、npm 命令
Write 生成页面和组件 创建 React/Vue 文件
Edit 迭代修改 根据 PM 反馈调整 UI
Read 读取 PRD 解析需求文档
Bash 运行 dev server 启动本地预览

📝 本期要点回顾

  1. PM 不需要写代码，描述清楚需求 是最核心的技能
  2. PRD 越详细，原型 匹配度越高，迭代轮次越少
  3. 用 口语化指令 迭代原型，像和设计师对话一样自然
  4. 竞品截图 + 功能描述 = 最高效的原型生成输入
  5. Claude Code 让 PM → 可运行原型 的时间从 周级降到分钟级

🔗 参考资料