【产品】10_搭建前端框架——把你的原型变成真实页面

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

「产品经理用 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. 创建项目npmcreate vite@latest requirement-platform--templatereactcdrequirement-platform# 2. 安装依赖npminstallnpminstallantd react-router-dom axios# 3. 启动项目npmrun dev

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

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

2.2 安装 Ant Design UI 组件库

为什么用 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 就能帮你解决。

五、阶段成果展示

现在，你已经完成了：

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

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

虽然还在用假数据，但：

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

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

保存进度

在终端执行：

gitadd.gitcommit-m"完成所有前端页面"gitpush

进度保存到 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 核心概念解读(小白也能看懂)