关注公众号：weelinking | 访问官网：weelinking.com

「产品经理用 Claude 实现产品」系列 · 第8篇

需求梳理好了，下一步就是"技术方案设计"——设计数据库、设计 API、规划组件、初始化项目。以前这是技术评审会上开发团队讨论一整天的事，现在 Claude 10 分钟给你一份完整方案。而且你作为产品经理，完全看得懂、能评审、能提意见。

---

一、前言：以前技术评审你听不懂，现在你来主导

上一篇我们梳理好了需求文档。今天来做"技术方案设计"。

你参加过技术评审会吗？那种开发们在白板上画架构图、讨论数据库设计、争论用什么技术栈的会议。

以前你在那种会上的角色： 旁听者。听不太懂，偶尔问一句：“这个能实现我的需求吗？”

今天你的角色： 主导者。你用 Claude 生成技术方案，你来审查方案是否合理，你来决定要不要调整。

这不是夸张。因为技术方案的核心就是：数据库设计、API 设计、页面组件设计——而这些你在第6篇已经知道了，它们对应的就是你熟悉的：字段定义、接口文档、页面原型。

今天你会发现：原来技术方案没那么玄乎，我完全看得懂。

💡 本系列全程使用 weelinking 访问 Claude，国内可稳定使用

---

二、让 Claude 设计数据库

2.1 描述数据需求

打开 Claude，新建对话，输入上一篇整理好的需求文档，然后追加：

你： 基于上述需求，请帮我设计数据库。要求：

1. 给出完整的数据库表结构设计
2. 列出每个字段的类型、约束、说明
3. 标注表之间的关系（一对多、多对多）
4. 提供 SQLite 建表 SQL 语句
5. 考虑索引优化（常用查询字段）

2.2 Claude 生成数据库设计

Claude 会给你类似这样的回复：

-- 用户表
CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username VARCHAR(20) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,  -- bcrypt 加密后的密码
    role VARCHAR(20) DEFAULT 'member',  -- admin 或 member
    avatar VARCHAR(255),
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_username (username),
    INDEX idx_email (email)
);

-- 需求表
CREATE TABLE requirements (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title VARCHAR(100) NOT NULL,
    description TEXT NOT NULL,
    priority VARCHAR(10) NOT NULL,  -- P0, P1, P2, P3
    type VARCHAR(20) NOT NULL,  -- feature, optimization, bugfix, other
    status VARCHAR(20) DEFAULT 'pending',  -- pending, in_progress, testing, done, closed
    creator_id INTEGER NOT NULL,
    assignee_id INTEGER,
    tags TEXT,  -- JSON 数组，如 '["前端","紧急"]'
    expected_date DATE,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    is_deleted BOOLEAN DEFAULT 0,  -- 软删除标记
    FOREIGN KEY (creator_id) REFERENCES users(id),
    FOREIGN KEY (assignee_id) REFERENCES users(id),
    INDEX idx_status (status),
    INDEX idx_priority (priority),
    INDEX idx_creator (creator_id),
    INDEX idx_created_at (created_at)
);

-- 评论表（后续扩展）
CREATE TABLE comments (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    requirement_id INTEGER NOT NULL,
    user_id INTEGER NOT NULL,
    content TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (requirement_id) REFERENCES requirements(id) ON DELETE CASCADE,
    FOREIGN KEY (user_id) REFERENCES users(id),
    INDEX idx_requirement (requirement_id)
);

Claude 还会给你一份表关系说明：

表关系设计：

1. users ← requirements (一对多)
   - 一个用户可以创建多个需求
   - creator_id 外键关联 users.id

2. users ← requirements (一对多)
   - 一个用户可以负责多个需求
   - assignee_id 外键关联 users.id

3. requirements ← comments (一对多)
   - 一个需求可以有多条评论
   - requirement_id 外键关联 requirements.id

2.3 用产品思维审查设计

现在你作为产品经理，来审查这个数据库设计。看什么？

检查清单：

检查项	怎么看	示例
字段是否齐全	对照需求文档，看有没有漏字段	“咦，需求的’期望完成日期’有吗？” → 有，expected_date
字段类型是否合理	标题100字用 VARCHAR(100)，描述用 TEXT	✅ 合理
必填/选填是否正确	对照需求，看 NOT NULL 加对了没	✅ 标题、描述是 NOT NULL
默认值是否正确	状态默认"待评审"，创建时间自动记录	✅ 默认值都对
关系是否正确	一个用户创建多个需求 → creator_id 外键	✅ 关系正确
有没有软删除	需求说"软删除" → is_deleted 字段	✅ 有
索引是否合理	常查询的字段（状态、优先级）应该加索引	✅ 都加了

如果发现问题，直接告诉 Claude：

“我发现缺少’需求来源’字段，应该加一个 source 字段（枚举：用户反馈/数据分析/竞品调研/内部需求），选填。请更新建表 SQL。”

Claude 立刻给你更新后的 SQL。

这不就是你在做产品评审吗？ 只不过评审的对象是数据库设计。

---

三、让 Claude 设计 API 接口

3.1 描述 API 需求

继续对话：

你： 基于上述需求和数据库设计，请帮我设计完整的 API 接口。要求：

1. 列出所有接口的路径、方法、功能说明
2. 每个接口的请求参数（包含类型、是否必填）
3. 每个接口的返回数据格式（成功和失败）
4. 标注哪些接口需要登录（需要 Token）
5. 遵循 RESTful 风格

3.2 Claude 生成 API 文档

Claude 会给你一份完整的 API 接口文档，比如：

## API 接口设计

### 认证相关

#### 1. 用户注册
- **路径**：POST /api/auth/register
- **需要登录**：否
- **请求参数**：
  ```json
  {
    "username": "string (必填, 3-20字符)",
    "email": "string (必填, 邮箱格式)",
    "password": "string (必填, 最少6位)"
  }

• 成功返回：

  {
    "code": 200,
    "message": "注册成功",
    "data": {
      "id": 1,
      "username": "zhangsan",
      "email": "zhangsan@example.com",
      "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
    }
  }
  

• 失败返回：

  {
    "code": 400,
    "message": "用户名已存在"
  }
  

2. 用户登录

• 路径：POST /api/auth/login
• 需要登录：否
• 请求参数：

  {
    "username": "string (必填)",
    "password": "string (必填)"
  }
  

• 成功返回：（同注册）
• 失败返回：

  {
    "code": 401,
    "message": "用户名或密码错误"
  }
  

需求相关

3. 创建需求

• 路径：POST /api/requirements
• 需要登录：是（Header 需携带 Authorization: Bearer {token}）
• 请求参数：

  {
    "title": "string (必填, 1-100字)",
    "description": "string (必填, 最少10字)",
    "priority": "string (必填, P0/P1/P2/P3)",
    "type": "string (必填, feature/optimization/bugfix/other)",
    "assignee_id": "number (选填)",
    "tags": "array (选填)",
    "expected_date": "string (选填, YYYY-MM-DD)"
  }
  

• 成功返回：

  {
    "code": 200,
    "message": "创建成功",
    "data": {
      "id": 123,
      "title": "...",
      "status": "pending",
      "creator_id": 1,
      "created_at": "2024-01-01 10:00:00",
      ...
    }
  }
  

4. 获取需求列表

• 路径：GET /api/requirements
• 需要登录：是
• 请求参数（Query String）：

  page: number (选填, 默认1) - 页码
  pageSize: number (选填, 默认20) - 每页条数
  status: string (选填) - 筛选状态
  priority: string (选填) - 筛选优先级
  keyword: string (选填) - 搜索关键词（匹配标题）
  sortBy: string (选填, 默认created_at) - 排序字段
  order: string (选填, 默认desc) - 排序方式 asc/desc
  

• 成功返回：

  {
    "code": 200,
    "data": {
      "list": [ /* 需求列表 */ ],
      "total": 100,
      "page": 1,
      "pageSize": 20
    }
  }
  

5. 获取需求详情

• 路径：GET /api/requirements/:id
• 需要登录：是
• 请求参数：URL 参数 :id
• 成功返回：单个需求对象
• 失败返回：{ "code": 404, "message": "需求不存在" }

6. 更新需求

• 路径：PUT /api/requirements/:id
• 需要登录：是（且只能创建者和管理员）
• 请求参数：同创建需求（所有字段可选）
• 成功返回：更新后的需求对象

7. 删除需求

• 路径：DELETE /api/requirements/:id
• 需要登录：是（且只能创建者和管理员）
• 成功返回：{ "code": 200, "message": "删除成功" }

8. 更新需求状态（用于看板拖拽）

• 路径：PATCH /api/requirements/:id/status
• 需要登录：是
• 请求参数：

  {
    "status": "string (必填, pending/in_progress/testing/done/closed)"
  }
  

统计相关

9. 获取统计数据

• 路径：GET /api/stats/overview
• 需要登录：是
• 成功返回：

  {
    "code": 200,
    "data": {
      "total": 150,
      "byStatus": {
        "pending": 30,
        "in_progress": 50,
        "testing": 20,
        "done": 45,
        "closed": 5
      },
      "byPriority": {
        "P0": 10,
        "P1": 40,
        "P2": 70,
        "P3": 30
      }
    }
  }
  

3.3 用产品思维审查 API

你作为产品经理，审查这份 API 文档：

检查清单：

检查项	怎么看
功能覆盖是否完整	对照需求文档，看每个功能是否都有对应的 API
RESTful 风格是否正确	增POST、查GET、改PUT、删DELETE，资源用复数名词
参数是否齐全	创建需求的参数是否包含所有必填字段
返回数据是否够用	列表页需要的数据，返回里都有吗
分页参数是否合理	page、pageSize、total 都有
搜索筛选是否支持	列表 API 能按状态、优先级、关键词筛选
权限控制是否清晰	哪些接口需要登录、哪些需要特定权限，都标注了

如果有遗漏，告诉 Claude：

“需求列表 API 应该支持按创建人筛选，请加一个 creator_id 筛选参数。”

---

四、让 Claude 规划前端页面

4.1 描述页面组件需求

继续对话：

你： 基于上述需求和 API 设计，请帮我规划前端页面和组件结构。要求：

1. 列出所有页面及其路由
2. 每个页面包含哪些组件
3. 哪些是公共组件（可复用）
4. 页面之间的跳转关系
5. 推荐的组件层级结构

4.2 Claude 生成页面组件方案

Claude 会给你类似这样的组件树：

前端页面和组件结构

路由设计

/login → 登录页
/register → 注册页
/ → 主应用（需登录）
/home → 首页/工作台
/requirements → 需求列表
/requirements/new → 创建需求
/requirements/:id → 需求详情
/requirements/:id/edit → 编辑需求
/kanban → 看板视图
/stats → 数据统计

公共组件（可复用）

• Layout
  • Header (顶部导航栏)
  • Sidebar (侧边菜单)
  • Footer
• RequirementCard (需求卡片)
• PriorityTag (优先级标签)
• StatusTag (状态标签)
• EmptyState (空状态提示)
• Loading (加载中)

页面组件拆分

1. 登录页 (Login.jsx)

• LoginForm 组件
  • 用户名输入
  • 密码输入
  • 登录按钮
  • 去注册链接

2. 需求列表页 (RequirementList.jsx)

• SearchBar 组件（搜索框）
• FilterPanel 组件（筛选面板）
  • StatusFilter
  • PriorityFilter
• RequirementTable 组件（表格）
  • 表头
  • 表格行（复用 RequirementCard 数据）
  • 操作列（编辑/删除）
• Pagination 组件（分页）
• CreateButton（创建按钮）

3. 需求详情页 (RequirementDetail.jsx)

• RequirementInfo 组件（基本信息展示）
• CommentSection 组件（评论区，后期）
• ActionButtons（编辑/删除按钮）

4. 看板视图页 (Kanban.jsx)

• KanbanColumn 组件 × 3（三列）
  • ColumnHeader（列标题）
  • CardList（卡片列表）
    • RequirementCard（复用）

5. 数据统计页 (Stats.jsx)

• OverviewCards 组件（概览卡片）
• PriorityChart 组件（优先级饼图）
• StatusChart 组件（状态柱状图）

状态管理

• 使用 React Context + useReducer
• AuthContext（用户认证状态、token）
• RequirementContext（需求数据、筛选条件）

这就像你在 Figma 里规划组件库一样。 哪些是页面、哪些是组件、哪些能复用——产品经理的常规操作。

---

五、初始化项目骨架

现在我们有了：

• ✅ 数据库设计
• ✅ API 接口文档
• ✅ 前端组件规划

最后一步：让 Claude 帮我们初始化项目。

5.1 让 Claude 创建项目骨架

你： 请帮我初始化项目。分别给出前端和后端的初始化命令和项目结构。

前端要求：

• 使用 Vite 创建 React 项目
• 安装 Ant Design、React Router、axios
• 创建基础的文件目录结构

后端要求：

• 初始化 Node.js + Express 项目
• 安装必要依赖（express、bcrypt、jsonwebtoken、sqlite3、cors）
• 创建基础的文件目录结构

Claude 会给你完整的初始化步骤：

前端初始化：

# 创建项目
npm create vite@latest requirement-platform-frontend -- --template react
cd requirement-platform-frontend

# 安装依赖
npm install
npm install antd react-router-dom axios

# 创建目录结构
mkdir -p src/components src/pages src/contexts src/services src/utils

后端初始化：

# 创建项目目录
mkdir requirement-platform-backend
cd requirement-platform-backend

# 初始化 package.json
npm init -y

# 安装依赖
npm install express bcrypt jsonwebtoken sqlite3 cors dotenv
npm install -D nodemon

# 创建目录结构
mkdir -p src/routes src/controllers src/models src/middleware src/utils

Claude 还会给你推荐的完整目录结构和每个文件的作用。

5.2 运行起来看看

按照 Claude 的指引，在终端执行初始化命令。然后：

启动前端：

cd requirement-platform-frontend
npm run dev

浏览器打开 http://localhost:5173，看到 Vite + React 的默认欢迎页面。

启动后端：

cd requirement-platform-backend
npx nodemon src/index.js

终端显示 Server running on port 3000。

虽然还是空壳，但项目已经跑起来了！

---

六、总结与下期预告

🎯 本篇核心要点

1. 技术方案就是：数据库设计 + API 设计 + 组件规划。 这些对应的就是你熟悉的：字段定义、接口文档、页面原型。你完全能看懂、能评审。

2. Claude 能生成完整的技术方案。 以前需要技术团队讨论一整天的方案，Claude 10 分钟给你。而且结构清晰、文档完整。

3. 产品经理也能做技术评审。 检查字段是否齐全、API 是否覆盖所有功能、组件拆分是否合理——这些你都能判断。

📌 记住这句话

技术方案不是魔法，就是把你的产品设计翻译成"数据库+API+组件"。你看得懂，就能评审。

📣 下期预告

第9篇：《项目管理：一个人的"敏捷开发"》

技术方案有了，项目骨架搭好了，下一步就是真正开始写代码了。

但先别急，作为一个产品经理，你最擅长的是什么？——项目管理。

下一篇我会教你怎么用看板管理开发任务、怎么做 Sprint 规划、怎么用 Git 做版本管理。一个人开发，也要有章法。

💡 本系列全程使用 weelinking 访问 Claude，国内可稳定使用

---

📎 配套资源

📋 数据库设计检查清单

□ 字段是否齐全（对照需求文档）
□ 字段类型是否合理（VARCHAR/TEXT/INTEGER/DATE...）
□ 必填字段是否标注 NOT NULL
□ 默认值是否设置（状态默认值、时间自动记录）
□ 主键是否设置（通常是自增ID）
□ 外键关系是否正确（一对多、多对多）
□ 唯一约束是否加上（用户名、邮箱）
□ 索引是否优化（常查询字段加索引）
□ 软删除字段是否有（is_deleted）

📋 API 设计检查清单

□ 功能覆盖是否完整（每个需求对应的API）
□ RESTful 风格是否正确
  - POST 创建、GET 查询、PUT 更新、DELETE 删除
  - 资源用复数名词（/requirements 不是 /requirement）
□ 请求参数是否齐全
  - 必填/选填是否标注
  - 类型是否明确
□ 返回数据是否够用（前端需要的数据都在返回里）
□ 错误处理是否清晰（code、message 统一格式）
□ 分页参数是否齐全（page、pageSize、total）
□ 筛选排序是否支持（常用筛选条件）
□ 权限控制是否明确（哪些需要登录、哪些需要特定角色）

📋 前端组件规划检查清单

□ 路由是否完整（每个页面都有对应路由）
□ 页面拆分是否合理（不能一个页面包罗万象）
□ 公共组件是否抽取（重复的 UI 做成组件）
□ 组件层级是否清晰（父组件、子组件关系明确）
□ 状态管理方案是否确定（Context/Redux/...）
□ 页面跳转关系是否清楚

---

📌 系列导航： 产品经理用 Claude 实现产品 · 系列目录

⏪ 上一篇： 第7篇：像写 PRD 一样写需求——让 Claude 精准理解你要什么

⏩ 下一篇： 第9篇：项目管理：一个人的"敏捷开发"