搭建前端框架——把你的原型变成真实页面

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

前面做了9篇准备，今天正式开工——搭建完整的前端应用。用 Claude 帮你快速实现所有页面：登录页、列表页、表单页、看板页、统计页。这一篇结束后，你会有一个完整的、能跑的、样式精美的前端应用。虽然还是假数据，但已经非常像样了。

---

👋 关注博主，不迷路

🎯 你将获得

✅ 产品经理视角 - 从你熟悉的工作流出发
✅ 完整实战项目 - 做一个你自己日常能用的工具
✅ 即学即用 - 每篇都有可运行的阶段成果
✅ 方法论沉淀 - 掌握"AI 实现产品"的完整方法论

💬 互动交流

📢 评论区答疑 - 产品 & 技术问题都能聊
🔥 源码开放 - GitHub 同步更新
📝 踩坑日记 - 一个产品经理的真实编程之旅
🎁 提示词模板 - 可复用的 Claude 对话模板

🌟 点击右上角「关注」，不错过每一篇精彩内容！

---

一、今天开始"真正的开发"

前九篇我们做了充分的准备：

• ✅ 认知建设（为什么要做、怎么做）
• ✅ 环境搭建（工具装好了）
• ✅ 需求梳理（知道要做什么）
• ✅ 技术方案（数据库、API、组件设计）
• ✅ 项目管理（看板、Sprint、Git）

从今天开始，动真格了——写代码。

今天的目标：把所有前端页面搭出来。

完成后你会有：

• 一个完整的 React 应用
• 登录/注册页
• 主应用布局（导航+侧边栏）
• 需求列表页
• 需求创建/编辑表单
• 看板视图页
• 数据统计页
• 所有页面样式精美、能跳转、用假数据展示

虽然还没接后端，但看起来已经是个完整的产品了。

💡 本系列全程使用 weelinking大模型聚合平台 访问 Claude，国内可稳定，安全使用

---

二、用 Claude 创建 React 项目

2.1 初始化项目

打开 Claude，新建对话：

你： 帮我创建一个 React 项目，用于做需求管理平台的前端。要求：

1. 使用 Vite 创建项目
2. 安装 Ant Design、React Router、axios
3. 配置基础的项目目录结构
4. 给我完整的命令和说明

Claude 会给你详细步骤：

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

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

# 3. 启动项目
npm run dev

按照 Claude 的指引，在终端执行这些命令。

启动成功后，浏览器打开 http://localhost:5173，看到 Vite + React 的默认页面。

2.2 安装 Ant Design UI 组件库

为什么用 Ant Design？

对比维度	自己写 CSS	用 Ant Design
速度	慢（每个组件都要写样式）	快（直接用现成组件）
质量	看个人水平	专业团队设计，质量高
一致性	容易不统一	整套设计语言，风格统一
响应式	需要自己实现	自带响应式

就像你在 Figma 里用组件库一样。 Ant Design 就是代码版的组件库。

继续问 Claude：

你： 帮我配置 Ant Design，包括：

1. 在 main.jsx 里引入样式
2. 配置中文语言
3. 给一个简单的示例页面，验证 Ant Design 能用

Claude 会给你完整代码，你复制粘贴，刷新浏览器——看到 Ant Design 的按钮和样式，说明配置成功。

2.3 配置路由

你： 帮我配置 React Router，路由如下：

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

先创建基础的路由配置和空白页面组件，让路由能跳转。

Claude 会帮你：

1. 创建 src/router.jsx 路由配置文件
2. 创建各个页面组件的空白文件
3. 配置路由跳转

你复制粘贴代码，刷新浏览器，手动访问 /login、/home 等路径——页面能切换，说明路由成功。

---

三、逐页面搭建

现在开始正式做页面。每做一个页面，都遵循这个流程：

1. 跟 Claude 描述需求（参考第5篇的提示词模板）
2. Claude 生成代码
3. 复制粘贴到对应文件
4. 浏览器查看效果
5. 不满意就迭代（改样式、加功能）
6. 满意后 git commit 保存进度

3.1 登录/注册页

提示词：

你： 帮我做登录页，路径 /login，要求：

布局：

• 全屏居中
• 白色卡片（宽度400px，圆角12px，阴影）
• 卡片顶部有 Logo 和标题"需求管理平台"

表单：

• 用户名输入框（placeholder: 请输入用户名）
• 密码输入框（placeholder: 请输入密码）
• "记住我"复选框
• 登录按钮（蓝色，宽度100%）

其他：

• 底部一行小字：“还没账号？去注册”，点击跳转 /register
• 背景用浅蓝灰渐变
• 样式参考 Ant Design

交互：

• 点击登录按钮，暂时直接跳转到 /home（后续对接 API）

Claude 给你完整的 Login.jsx 代码，你复制到 src/pages/Login.jsx，刷新浏览器访问 /login——一个精美的登录页出现了。

迭代优化：

如果你觉得 Logo 位置不对，告诉 Claude：

“Logo 改成图标+文字横排，居中对齐”

Claude 立刻给你修改后的代码，替换、刷新，搞定。

注册页也类似：

你： 参考登录页，帮我做注册页，表单包含：用户名、邮箱、密码、确认密码。底部有"已有账号？去登录"链接。

3.2 主应用布局

你： 帮我做主应用布局组件，路径 /，要求：

结构：

• 使用 Ant Design 的 Layout 组件
• 顶部 Header（固定，高度64px）
  • 左侧：Logo + 标题"需求管理平台"
  • 右侧：用户头像下拉菜单（个人设置、退出登录）
• 左侧 Sider（固定，宽度200px，可收起）
  • 菜单项：首页、需求列表、看板视图、数据统计
  • 点击菜单跳转对应路由
• 右侧 Content（主内容区）
  • 根据路由显示不同页面

样式：

• Header 背景深蓝色
• Sider 背景白色，菜单项选中时蓝色高亮
• Content 背景浅灰色，padding 24px

Claude 会生成一个完整的布局组件，包含顶部导航、侧边菜单、内容区。

你访问 /home——看到完整的应用框架，点击侧边菜单能跳转不同页面。

此刻你可能会兴奋地尖叫：这也太像样了吧！

3.3 需求列表页

你： 帮我做需求列表页，路径 /requirements，要求：

顶部搜索筛选区：

• 左侧：搜索框（placeholder: 搜索需求标题）
• 中间：状态筛选下拉（全部/待评审/开发中/已完成）
• 中间：优先级筛选下拉（全部/P0/P1/P2/P3）
• 右侧："创建需求"按钮（蓝色，点击跳转 /requirements/new）

表格：

• 列：需求标题、优先级（带颜色标签）、状态（带颜色标签）、创建人、创建时间、操作
• 操作列：查看 | 编辑 | 删除
• 优先级颜色：P0红色、P1橙色、P2蓝色、P3灰色
• 状态颜色：待评审黄色、开发中蓝色、已完成绿色

底部：

• 分页组件（每页20条）

数据：

• 先用假数据填充10条，方便看效果

交互：

• 点击"查看"跳转详情页 /requirements/:id
• 点击"编辑"跳转编辑页 /requirements/:id/edit
• 点击"删除"弹出确认框（暂时只是提示）

Claude 会生成完整的列表页，包含：

• 搜索筛选 UI
• 数据表格
• 假数据
• 操作按钮

你访问 /requirements——看到一个专业的列表页，虽然是假数据，但已经很像样了。

3.4 需求创建/编辑页

你： 帮我做需求创建表单页，路径 /requirements/new，要求：

布局：

• 居中白色卡片，宽度800px
• 卡片标题"创建需求"

表单字段：

1. 需求标题（文本输入，必填，最多100字）
2. 优先级（单选，P0/P1/P2/P3，必填）
3. 需求类型（单选，新功能/优化/Bug修复/其他，必填）
4. 详细描述（富文本编辑器或多行文本框，必填）
5. 负责人（下拉选择，选填）
6. 标签（可多选或输入，选填）
7. 期望完成日期（日期选择器，选填）

按钮：

• 提交（蓝色）
• 取消（灰色，返回列表页）

交互：

• 表单验证（必填项不能为空）
• 点击提交暂时只是提示"提交成功"，然后跳回列表页

Claude 生成完整的表单组件，你访问 /requirements/new——一个专业的创建表单页出现了。

编辑页类似，只是表单预填充数据：

“参考创建页，做编辑页 /requirements/:id/edit，表单预填充当前需求数据（先用假数据），标题改成’编辑需求’”

3.5 需求详情页

你： 帮我做需求详情页，路径 /requirements/:id，要求：

布局：

• 居中白色卡片
• 顶部标题区：需求标题 + 优先级标签 + 状态标签
• 右上角：编辑按钮、删除按钮、返回按钮

信息展示：

• 基本信息：优先级、状态、类型、创建人、负责人、创建时间、期望完成日期
• 详细描述（富文本渲染）
• 标签列表

数据：

• 暂时用假数据填充

Claude 生成详情页，你访问 /requirements/1——看到完整的需求详情展示。

3.6 看板视图页

这是最酷的一个页面——拖拽看板。

你： 帮我做看板视图页，路径 /kanban，要求：

布局：

• 三列看板：待评审 | 开发中 | 已完成
• 每列宽度相等，间距16px
• 每列顶部显示列标题和需求数量

卡片：

• 每个需求显示为一张卡片
• 卡片包含：标题、优先级标签、创建人、创建时间
• 卡片有圆角和阴影
• 鼠标悬停时卡片轻微上浮

拖拽功能：

• 支持拖拽卡片到不同列（用 react-beautiful-dnd 或 dnd-kit 库）
• 拖拽后改变需求状态（暂时只在前端改，不调 API）

数据：

• 用假数据填充，三列各5张卡片

Claude 会帮你集成拖拽库，生成完整的看板页。你访问 /kanban——可以拖拽卡片在不同列之间移动，非常流畅。

这一刻你会惊呼：我居然做出了拖拽看板！

3.7 数据统计页

你： 帮我做数据统计页，路径 /stats，要求：

概览卡片（4张横排）：

• 需求总数
• 待评审数量
• 开发中数量
• 已完成数量
• 每张卡片有图标、数字、标题

图表区（两个并排）：

• 左侧：优先级分布饼图（用 ECharts 或 Recharts）
• 右侧：状态分布柱状图

数据：

• 用假数据

样式：

• 卡片和图表有间距、圆角、阴影
• 整体简洁清爽

Claude 会帮你集成图表库（推荐 Recharts，比较轻量），生成数据统计页。

你访问 /stats——看到专业的数据看板，有概览卡片、有图表，虽然是假数据，但已经很震撼了。

---

四、遇到问题怎么办

做页面过程中，肯定会遇到问题。最常见的几种：

问题1：代码报错了

症状： 浏览器控制台显示红色错误，页面白屏。

解决办法：

1. 复制完整的错误信息
2. 告诉 Claude：

“运行报错了，错误信息：[粘贴错误信息]。请帮我找出问题并修复。”

Claude 会分析错误原因，给你修复后的代码。

问题2：样式不对

症状： 页面能显示，但样式很丑或者布局错乱。

解决办法：

“这个页面的样式不对，[描述哪里不对]。请帮我调整。”

或者直接说：

“这个页面太丑了，帮我美化一下，参考 Ant Design 的设计风格。”

问题3：功能不符合预期

症状： 点击按钮没反应，或者跳转到错误的页面。

解决办法：

“点击[按钮名称]没反应，应该[做什么]。请帮我修复。”

关键：把错误信息或现象描述清楚，Claude 就能帮你解决。

---

五、阶段成果展示

现在，你已经完成了：

• ✅ 登录/注册页（精美的表单卡片）
• ✅ 主应用布局（顶部导航+侧边菜单）
• ✅ 需求列表页（搜索、筛选、表格、分页）
• ✅ 需求创建/编辑表单（完整的表单验证）
• ✅ 需求详情页（信息展示完整）
• ✅ 看板视图页（可拖拽的三列看板）
• ✅ 数据统计页（概览卡片+图表）

这就是一个完整的前端应用了！

虽然还在用假数据，但：

• 所有页面能跳转
• 样式精美统一
• 交互流畅
• 功能齐全

拿给老板/朋友看，他们会以为这是个真实的产品。

保存进度

在终端执行：

git add .
git commit -m "完成所有前端页面"
git push

进度保存到 GitHub，不怕丢了。

---

六、总结与下期预告

🎯 本篇核心要点

1. 用 Claude 搭建前端比画原型还快。 7个页面，如果用 Figma 画，至少要2-3天。用 Claude，一天就能全部做出来，而且是"活的"。

2. 逐页面迭代，小步快跑。 不要一次做所有页面，一个一个来。每做完一个，commit 保存进度。

3. 假数据填充很重要。 用假数据填充页面，能快速看到效果。等后端接口好了，替换成真数据就行。

4. 遇到问题不要慌。 把错误信息丢给 Claude，它会帮你解决。产品经理不需要看懂每一行代码，能用 Claude 解决问题就够了。

📌 记住这句话

前端开发不是写代码，是用代码把你的产品设计实现出来。你是设计者，Claude 是实现者。

📣 下期预告

第11篇：《实现后端接口——数据在背后如何流动》

前端页面搭好了，下一篇我们做后端——实现所有 API 接口。

你会学到：

• 用 Claude 快速搭建 Express 服务器
• 创建数据库表
• 实现用户注册/登录（JWT 认证）
• 实现需求 CRUD 接口
• 用 Postman 测试接口

后端做完，就可以前后端联调了——到时候页面上显示的就是真实数据了。

💡 本系列全程使用 weelinking大模型聚合平台 访问 Claude，国内可稳定使用

---

📎 配套资源

📋 前端页面开发检查清单

□ 项目初始化
  □ 创建 React + Vite 项目
  □ 安装 Ant Design
  □ 配置 React Router
  □ 配置项目目录结构

□ 登录/注册模块
  □ 登录页 UI
  □ 注册页 UI
  □ 表单验证
  □ 页面跳转

□ 主应用布局
  □ Header (导航栏)
  □ Sider (侧边菜单)
  □ Content (内容区)
  □ 路由切换

□ 需求列表模块
  □ 搜索筛选区
  □ 数据表格
  □ 分页组件
  □ 操作按钮

□ 需求表单模块
  □ 创建表单
  □ 编辑表单
  □ 表单验证
  □ 提交逻辑

□ 需求详情页
  □ 信息展示
  □ 操作按钮
  □ 返回功能

□ 看板视图
  □ 三列布局
  □ 卡片展示
  □ 拖拽功能

□ 数据统计
  □ 概览卡片
  □ 图表展示

📋 常用提示词模板

做页面：

帮我做 [页面名称] 页面，路径 [路由路径]，要求：

布局：
- [描述布局结构]

内容/组件：
1. [组件1]：[要求]
2. [组件2]：[要求]

样式：
- 整体风格：[简洁现代/商务/...]
- 配色：参考 Ant Design
- 特殊要求：[...]

交互：
- [交互行为1]
- [交互行为2]

数据：
- 用假数据填充 [N] 条记录

修复问题：

代码报错了，错误信息：
[粘贴完整错误信息]

请帮我找出问题并修复。

优化样式：

这个页面的 [具体部分] 样式不对，[描述哪里不对]。
请帮我调整成 [期望效果]。

---

🌟 如果这篇文章对你有帮助，请点赞👍 收藏⭐ 关注🔔

你的支持是我持续更新的最大动力！

💬 评论区聊聊：你用 Claude 做出前端页面了吗？感觉怎么样？

---

📌 系列导航： 产品经理用 Claude 实现产品 · 系列目录
⏪ 上一篇： 第9篇：项目管理：一个人的"敏捷开发"

⏩ 下一篇： 第11篇：实现后端接口——数据在背后如何流动

推荐阅读

• VS Code 安装配置 Claude Code 插件教程（3分钟搞定）
• 2026全网首个企业级claude中转服务平台使用说明
• claude skill 核心概念解读(小白也能看懂)