搭建前端框架——把你的原型变成真实页面「产品经理用 Claude 实现产品」系列 · 第10篇前面做了9篇准备今天正式开工——搭建完整的前端应用。用 Claude 帮你快速实现所有页面登录页、列表页、表单页、看板页、统计页。这一篇结束后你会有一个完整的、能跑的、样式精美的前端应用。虽然还是假数据但已经非常像样了。 关注博主不迷路 你将获得✅产品经理视角- 从你熟悉的工作流出发✅完整实战项目- 做一个你自己日常能用的工具✅即学即用- 每篇都有可运行的阶段成果✅方法论沉淀- 掌握AI 实现产品的完整方法论 互动交流评论区答疑- 产品 技术问题都能聊源码开放- GitHub 同步更新踩坑日记- 一个产品经理的真实编程之旅提示词模板- 可复用的 Claude 对话模板 点击右上角「关注」不错过每一篇精彩内容一、今天开始真正的开发前九篇我们做了充分的准备✅ 认知建设为什么要做、怎么做✅ 环境搭建工具装好了✅ 需求梳理知道要做什么✅ 技术方案数据库、API、组件设计✅ 项目管理看板、Sprint、Git从今天开始动真格了——写代码。今天的目标把所有前端页面搭出来。完成后你会有一个完整的 React 应用登录/注册页主应用布局导航侧边栏需求列表页需求创建/编辑表单看板视图页数据统计页所有页面样式精美、能跳转、用假数据展示虽然还没接后端但看起来已经是个完整的产品了。 本系列全程使用weelinking大模型聚合平台访问 Claude国内可稳定安全使用二、用 Claude 创建 React 项目2.1 初始化项目打开 Claude新建对话你帮我创建一个 React 项目用于做需求管理平台的前端。要求使用 Vite 创建项目安装 Ant Design、React Router、axios配置基础的项目目录结构给我完整的命令和说明Claude 会给你详细步骤# 1. 创建项目npmcreate vitelatest 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对比维度自己写 CSS用 Ant Design速度慢每个组件都要写样式快直接用现成组件质量看个人水平专业团队设计质量高一致性容易不统一整套设计语言风格统一响应式需要自己实现自带响应式就像你在 Figma 里用组件库一样。Ant Design 就是代码版的组件库。继续问 Claude你帮我配置 Ant Design包括在 main.jsx 里引入样式配置中文语言给一个简单的示例页面验证 Ant Design 能用Claude 会给你完整代码你复制粘贴刷新浏览器——看到 Ant Design 的按钮和样式说明配置成功。2.3 配置路由你帮我配置 React Router路由如下/login - 登录页/register - 注册页/ - 主应用需登录/home - 首页/requirements - 需求列表/requirements/new - 创建需求/requirements/:id - 需求详情/kanban - 看板视图/stats - 数据统计先创建基础的路由配置和空白页面组件让路由能跳转。Claude 会帮你创建src/router.jsx路由配置文件创建各个页面组件的空白文件配置路由跳转你复制粘贴代码刷新浏览器手动访问/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后续对接 APIClaude 给你完整的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 24pxClaude 会生成一个完整的布局组件包含顶部导航、侧边菜单、内容区。你访问/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卡片标题创建需求表单字段需求标题文本输入必填最多100字优先级单选P0/P1/P2/P3必填需求类型单选新功能/优化/Bug修复/其他必填详细描述富文本编辑器或多行文本框必填负责人下拉选择选填标签可多选或输入选填期望完成日期日期选择器选填按钮提交蓝色取消灰色返回列表页交互表单验证必填项不能为空点击提交暂时只是提示提交成功然后跳回列表页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代码报错了症状浏览器控制台显示红色错误页面白屏。解决办法复制完整的错误信息告诉 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 核心概念解读(小白也能看懂)
【产品】10_搭建前端框架——把你的原型变成真实页面
发布时间：2026/6/8 14:42:53
搭建前端框架——把你的原型变成真实页面「产品经理用 Claude 实现产品」系列 · 第10篇前面做了9篇准备今天正式开工——搭建完整的前端应用。用 Claude 帮你快速实现所有页面登录页、列表页、表单页、看板页、统计页。这一篇结束后你会有一个完整的、能跑的、样式精美的前端应用。虽然还是假数据但已经非常像样了。 关注博主不迷路 你将获得✅产品经理视角- 从你熟悉的工作流出发✅完整实战项目- 做一个你自己日常能用的工具✅即学即用- 每篇都有可运行的阶段成果✅方法论沉淀- 掌握AI 实现产品的完整方法论 互动交流评论区答疑- 产品 技术问题都能聊源码开放- GitHub 同步更新踩坑日记- 一个产品经理的真实编程之旅提示词模板- 可复用的 Claude 对话模板 点击右上角「关注」不错过每一篇精彩内容一、今天开始真正的开发前九篇我们做了充分的准备✅ 认知建设为什么要做、怎么做✅ 环境搭建工具装好了✅ 需求梳理知道要做什么✅ 技术方案数据库、API、组件设计✅ 项目管理看板、Sprint、Git从今天开始动真格了——写代码。今天的目标把所有前端页面搭出来。完成后你会有一个完整的 React 应用登录/注册页主应用布局导航侧边栏需求列表页需求创建/编辑表单看板视图页数据统计页所有页面样式精美、能跳转、用假数据展示虽然还没接后端但看起来已经是个完整的产品了。 本系列全程使用weelinking大模型聚合平台访问 Claude国内可稳定安全使用二、用 Claude 创建 React 项目2.1 初始化项目打开 Claude新建对话你帮我创建一个 React 项目用于做需求管理平台的前端。要求使用 Vite 创建项目安装 Ant Design、React Router、axios配置基础的项目目录结构给我完整的命令和说明Claude 会给你详细步骤# 1. 创建项目npmcreate vitelatest 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对比维度自己写 CSS用 Ant Design速度慢每个组件都要写样式快直接用现成组件质量看个人水平专业团队设计质量高一致性容易不统一整套设计语言风格统一响应式需要自己实现自带响应式就像你在 Figma 里用组件库一样。Ant Design 就是代码版的组件库。继续问 Claude你帮我配置 Ant Design包括在 main.jsx 里引入样式配置中文语言给一个简单的示例页面验证 Ant Design 能用Claude 会给你完整代码你复制粘贴刷新浏览器——看到 Ant Design 的按钮和样式说明配置成功。2.3 配置路由你帮我配置 React Router路由如下/login - 登录页/register - 注册页/ - 主应用需登录/home - 首页/requirements - 需求列表/requirements/new - 创建需求/requirements/:id - 需求详情/kanban - 看板视图/stats - 数据统计先创建基础的路由配置和空白页面组件让路由能跳转。Claude 会帮你创建src/router.jsx路由配置文件创建各个页面组件的空白文件配置路由跳转你复制粘贴代码刷新浏览器手动访问/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后续对接 APIClaude 给你完整的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 24pxClaude 会生成一个完整的布局组件包含顶部导航、侧边菜单、内容区。你访问/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卡片标题创建需求表单字段需求标题文本输入必填最多100字优先级单选P0/P1/P2/P3必填需求类型单选新功能/优化/Bug修复/其他必填详细描述富文本编辑器或多行文本框必填负责人下拉选择选填标签可多选或输入选填期望完成日期日期选择器选填按钮提交蓝色取消灰色返回列表页交互表单验证必填项不能为空点击提交暂时只是提示提交成功然后跳回列表页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代码报错了症状浏览器控制台显示红色错误页面白屏。解决办法复制完整的错误信息告诉 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 核心概念解读(小白也能看懂)
