1. 需求文档到高保真原型卡点到底在哪如果你做过独立开发或者带过产品小团队大概率经历过这样的循环一份 PRD 写完产品经理画线框图设计师出视觉稿前端再对着标注还原。中间任何一环改需求整条链路重来。一个中等复杂度的 APP从需求定稿到可点击的高保真原型三天能出来算快的。我最近在尝试把这条链路压缩到 72 小时以内用的组合是 Cursor 加 Claude 3.0。核心思路不是让 AI 一次性生成完美原型而是把「需求解析 → 页面结构 → 组件布局 → 交互逻辑 → 可运行预览」拆成可验证的步骤每一步都有明确的输入输出出问题能定位到具体环节。这篇文章面向两类人一是独立开发者想快速把想法变成能演示的原型去验证市场二是产品团队里负责原型产出的人希望把重复性的布局和标注工作交给 AI自己专注在交互逻辑和业务规则上。下面会给出可复制的 Cursor 规则文件、Claude 提示词模板以及从需求文档到可交互原型的逐步验证动作。整套流程实测下来一个包含 8 到 10 个页面的 APP 原型从需求文档到可点击预览72 小时内可以完成两到三轮迭代。需要提前说明的是这里说的「高保真原型」指的是带真实布局、真实文案、可点击跳转、有基础状态变化的 HTML/CSS/JS 原型不是 Figma 设计稿。选择这个形态的原因是它可以直接在浏览器里跑发给任何人就能看不需要对方装设计工具而且后续要转成正式前端代码时迁移成本最低。2. 前置准备TaoToken 接入与 Cursor 环境配置2.1 为什么需要 TaoTokenCursor 本身可以调用 Claude 模型但在实际使用中会遇到两个问题一是长上下文场景下 token 消耗快成本不好控制二是团队协作时每个人的模型配置不统一生成结果风格差异大。TaoToken 的作用是提供一个统一的模型接入层把 API 调用集中管理同时支持在 Cursor 里通过自定义 API 端点的方式接入。你可以把它理解成一个「模型调度的中间层」Cursor 负责代码生成和文件操作TaoToken 负责把请求路由到 Claude 3.0并且提供用量查看和 key 管理。对于需要长期跑原型生成任务的场景这种分离让成本更可控。2.2 获取 API Key 与配置 Cursor第一步打开 TaoToken 的 API Keys 管理页面创建一个新的 key。建议按项目命名比如cursor-prototype-dev方便后续区分用量。创建完成后拿到以sk-开头的 key复制保存。接下来在 Cursor 里配置自定义模型端点打开 Cursor 设置找到 Models 选项卡在 OpenAI API Key 区域填入你的 TaoToken key然后在 Override OpenAI Base URL 里填入https://taotoken.net/api注意这里不要加任何路径后缀直接填到/api为止。填完后点击 Verify如果显示验证通过说明接入成功。2.3 验证模型可用性配置完成后建议先做一次简单的模型对话验证确认 Claude 3.0 能正常响应。在 Cursor 的 Chat 面板里输入请用一句话说明你能做什么并给出一个 HTML 按钮的代码示例。如果返回了合理的回答和代码块说明链路通了。这一步看起来简单但能避免后面生成原型时出现「以为是提示词问题实际是模型没接上」的排查弯路。对于需要长期跑编码和 Agent 任务的场景可以进一步了解 Coding Plan 的用量方案把原型生成和日常编码的额度分开管理。3. 可复制配置Cursor 规则文件与 Claude 提示词模板3.1 Cursor 规则文件.cursorrules在项目根目录创建.cursorrules文件这个文件的作用是告诉 Cursor 在生成代码时遵循统一的规范。原型生成最怕的是每次生成的布局风格不一致规则文件就是用来锁死这些变量的。# APP 原型生成规则 ## 输出格式 - 所有页面输出为独立的 HTML 文件放在 /prototype 目录下 - 每个 HTML 文件内联 CSS 和 JS不依赖外部构建工具 - 使用 Tailwind CSS CDN 版本进行样式编写 - 移动端优先默认视口宽度 375px最大宽度 430px ## 布局规范 - 页面结构顶部导航栏固定高度 44px 内容区可滚动 底部标签栏固定高度 49px - 内容区左右内边距统一 16px - 卡片圆角 12px阴影使用 shadow-sm - 主色调变量--primary: #2563EB; --bg: #F8FAFC; --text: #1E293B ## 交互规范 - 所有可点击元素必须有 active 状态的视觉反馈 - 页面跳转使用 window.location.href不引入路由库 - 弹窗使用 fixed 定位 半透明遮罩 - 表单输入框聚焦时边框变色 ## 命名规范 - 页面文件page-{功能名}.html如 page-home.html - 组件类名使用语义化命名如 .course-card、.rank-item - JS 函数使用驼峰命名如 handleSubmit、togglePanel这个规则文件的关键在于「锁死变量」颜色、间距、圆角、交互反馈方式都提前定义好后面无论生成多少个页面视觉一致性有保障。3.2 Claude 提示词模板需求文档转页面结构拿到一份需求文档后不要直接让 AI 生成代码。先让它做需求解析输出页面结构和组件清单。这一步的提示词模板如下你是一个资深产品经理请阅读以下需求文档输出 1. 核心用户场景不超过 3 个 2. 页面清单每个页面一句话说明用途 3. 每个页面的组件清单按从上到下顺序列出 4. 页面之间的跳转关系用箭头表示 5. 需要交互反馈的元素点击、滑动、长按等 需求文档内容 {在这里粘贴你的需求文档}这个模板的作用是把模糊的需求描述转成结构化的页面清单。实测下来一份 800 字左右的需求文档Claude 3.0 能在 30 秒内输出完整的页面结构和组件清单准确率在 85% 以上。剩下的 15% 通常是业务规则类的细节需要人工补充。3.3 原型生成配置骨架在 Cursor 里新建一个prototype-config.json用来存放全局配置{ projectName: fitness-social-app, viewport: { width: 375, maxWidth: 430 }, theme: { primary: #2563EB, background: #F8FAFC, text: #1E293B, border: #E2E8F0 }, pages: [ { id: home, file: page-home.html, title: 首页 }, { id: course, file: page-course.html, title: 课程日历 }, { id: rank, file: page-rank.html, title: 排行榜 }, { id: profile, file: page-profile.html, title: 个人中心 } ], navigation: { tabs: [home, course, rank, profile], defaultTab: home } }这个配置文件的作用是给 Cursor 一个明确的「页面地图」生成时不会漏页面也不会重复生成。后续要加页面只需要在这个文件里追加一条记录然后让 Cursor 按配置生成。4. 逐步验证从需求文档到可交互原型4.1 第一步需求解析与页面清单确认把需求文档粘贴到 Claude 提示词模板里得到页面清单后先人工过一遍。重点检查三件事页面数量是否完整、跳转关系是否闭环、有没有遗漏的状态页面比如空状态、加载状态、错误状态。确认无误后把页面清单写入prototype-config.json的pages数组。这一步不要跳过页面清单是后续所有生成动作的基准。4.2 第二步生成首页骨架在 Cursor 的 Composer 里输入根据 .cursorrules 和 prototype-config.json生成 page-home.html。 首页包含顶部搜索栏、课程推荐卡片列表3 个、今日打卡进度条、底部标签栏。 使用 Tailwind CDN移动端优先。生成完成后直接在浏览器打开page-home.html检查三件事布局是否错位、颜色是否符合配置、底部标签栏是否固定。如果布局有问题把截图和问题描述一起发给 Cursor让它修正。4.3 第三步批量生成其余页面首页确认没问题后用同样的方式生成其余页面。为了提高效率可以一次性把多个页面的生成任务交给 Cursor按照 prototype-config.json 中的 pages 列表依次生成 page-course.html、page-rank.html、page-profile.html。 每个页面遵循 .cursorrules 规范底部标签栏保持一致当前页面对应的 tab 高亮。这一步的关键是「保持一致」底部标签栏、顶部导航栏、颜色变量这些公共部分必须在每个页面里完全一致。如果发现某个页面风格跑偏检查.cursorrules是否被正确读取。4.4 第四步注入交互逻辑页面骨架生成完后开始加交互。以排行榜页面为例需求是「点击用户跳转详情页」在 Cursor 里输入在 page-rank.html 中为每个排行榜项添加点击事件点击后跳转到 page-profile.html 并通过 URL 参数传递用户 ID。同时在 page-profile.html 中读取该参数并显示对应用户信息。生成后在浏览器里实际点击测试。如果跳转正常但参数没传过去检查window.location.href的拼接逻辑。这类问题通常是因为 AI 生成的代码里参数名不一致手动对齐一下即可。4.5 第五步状态与边界情况补全高保真原型和线框图的核心区别在于「状态完整」。需要补全的状态包括空列表时的提示、加载中的骨架屏、网络错误时的重试按钮、表单提交后的成功反馈。在 Cursor 里输入为所有列表页面添加空状态提示无数据时显示插画和文案。 为所有表单页面添加提交成功后的 toast 提示。 为首页添加加载中的骨架屏效果。这一步做完后原型就具备了演示级别的完整度。发给别人看时对方可以真实点击、真实跳转、看到真实的状态变化。5. 本篇常见错排查5.1 Cursor 无法读取 .cursorrules现象生成的代码没有遵循规则文件里的颜色和间距规范。排查确认.cursorrules文件在项目根目录且文件名拼写正确注意前面有个点。如果文件存在但没生效在 Cursor 设置里检查 Rules 功能是否开启。部分版本需要在 Composer 里手动引用规则文件。5.2 生成的页面在手机上显示错位现象在浏览器开发者工具里切换到移动端视图后内容溢出或底部标签栏遮挡内容。排查检查meta nameviewport标签是否存在且内容为widthdevice-width, initial-scale1.0。另外检查内容区是否设置了padding-bottom来避开底部标签栏通常需要设置padding-bottom: 60px左右。5.3 页面之间跳转 404现象点击标签栏或按钮后浏览器提示找不到文件。排查确认所有 HTML 文件都在同一个目录下且文件名与prototype-config.json中的file字段完全一致。常见错误是生成时文件名带了多余的前缀或后缀比如page-home-v2.html但配置里写的是page-home.html。5.4 Claude 返回的代码不完整现象生成的 HTML 文件只有一半或者 CSS 样式缺失。排查这通常是单次请求的 token 超限导致的。解决办法是把生成任务拆小不要一次性让 AI 生成整个页面而是分区块生成先生成顶部导航再生成内容区最后生成底部标签栏。另外可以在 TaoToken 的用量页面查看单次请求的 token 消耗如果接近上限就调整提示词的长度。5.5 交互逻辑不生效现象点击按钮没有反应或者弹窗不显示。排查打开浏览器控制台看是否有 JS 报错。常见原因是 AI 生成的 JS 代码里引用了不存在的元素 ID或者事件绑定写在了 DOM 加载之前。解决办法是在script标签里把代码包在DOMContentLoaded事件里或者把 script 标签放在 body 末尾。6. 长期迭代与工具链衔接原型生成不是一次性任务而是一个持续迭代的过程。72 小时完成第一版可交互原型后后续的迭代重点会从「页面能不能跑」转向「交互顺不顺手」和「业务规则对不对」。对于需要长期跑编码和 Agent 任务的团队建议把原型生成和正式开发分成两条线原型阶段用 Cursor 加 Claude 快速试错正式开发阶段再接入 Coding Plan 做代码生成和重构。这样既能保证原型阶段的迭代速度又能在正式开发时控制代码质量。如果你在配置过程中遇到 API 接入或 key 管理的问题可以查阅接入文档里面有更详细的参数说明和常见问题。需要验证模型响应是否正常时可以直接在模型对话页面做快速测试确认链路通畅后再回到 Cursor 里跑完整流程。整套流程跑通后你会发现最大的变化不是「生成速度变快了」而是「试错成本变低了」。以前改一个交互逻辑要等设计师排期现在直接在原型上改代码改完刷新就能看效果。这种即时反馈的节奏才是 72 小时完成多轮迭代的真正原因。
AI全栈之路：Cursor+Claude 3.0实现APP原型图全自动生成——72小时完成从需求文档到可交互高保真原型，解锁10倍产品迭代效率
1. 需求文档到高保真原型卡点到底在哪如果你做过独立开发或者带过产品小团队大概率经历过这样的循环一份 PRD 写完产品经理画线框图设计师出视觉稿前端再对着标注还原。中间任何一环改需求整条链路重来。一个中等复杂度的 APP从需求定稿到可点击的高保真原型三天能出来算快的。我最近在尝试把这条链路压缩到 72 小时以内用的组合是 Cursor 加 Claude 3.0。核心思路不是让 AI 一次性生成完美原型而是把「需求解析 → 页面结构 → 组件布局 → 交互逻辑 → 可运行预览」拆成可验证的步骤每一步都有明确的输入输出出问题能定位到具体环节。这篇文章面向两类人一是独立开发者想快速把想法变成能演示的原型去验证市场二是产品团队里负责原型产出的人希望把重复性的布局和标注工作交给 AI自己专注在交互逻辑和业务规则上。下面会给出可复制的 Cursor 规则文件、Claude 提示词模板以及从需求文档到可交互原型的逐步验证动作。整套流程实测下来一个包含 8 到 10 个页面的 APP 原型从需求文档到可点击预览72 小时内可以完成两到三轮迭代。需要提前说明的是这里说的「高保真原型」指的是带真实布局、真实文案、可点击跳转、有基础状态变化的 HTML/CSS/JS 原型不是 Figma 设计稿。选择这个形态的原因是它可以直接在浏览器里跑发给任何人就能看不需要对方装设计工具而且后续要转成正式前端代码时迁移成本最低。2. 前置准备TaoToken 接入与 Cursor 环境配置2.1 为什么需要 TaoTokenCursor 本身可以调用 Claude 模型但在实际使用中会遇到两个问题一是长上下文场景下 token 消耗快成本不好控制二是团队协作时每个人的模型配置不统一生成结果风格差异大。TaoToken 的作用是提供一个统一的模型接入层把 API 调用集中管理同时支持在 Cursor 里通过自定义 API 端点的方式接入。你可以把它理解成一个「模型调度的中间层」Cursor 负责代码生成和文件操作TaoToken 负责把请求路由到 Claude 3.0并且提供用量查看和 key 管理。对于需要长期跑原型生成任务的场景这种分离让成本更可控。2.2 获取 API Key 与配置 Cursor第一步打开 TaoToken 的 API Keys 管理页面创建一个新的 key。建议按项目命名比如cursor-prototype-dev方便后续区分用量。创建完成后拿到以sk-开头的 key复制保存。接下来在 Cursor 里配置自定义模型端点打开 Cursor 设置找到 Models 选项卡在 OpenAI API Key 区域填入你的 TaoToken key然后在 Override OpenAI Base URL 里填入https://taotoken.net/api注意这里不要加任何路径后缀直接填到/api为止。填完后点击 Verify如果显示验证通过说明接入成功。2.3 验证模型可用性配置完成后建议先做一次简单的模型对话验证确认 Claude 3.0 能正常响应。在 Cursor 的 Chat 面板里输入请用一句话说明你能做什么并给出一个 HTML 按钮的代码示例。如果返回了合理的回答和代码块说明链路通了。这一步看起来简单但能避免后面生成原型时出现「以为是提示词问题实际是模型没接上」的排查弯路。对于需要长期跑编码和 Agent 任务的场景可以进一步了解 Coding Plan 的用量方案把原型生成和日常编码的额度分开管理。3. 可复制配置Cursor 规则文件与 Claude 提示词模板3.1 Cursor 规则文件.cursorrules在项目根目录创建.cursorrules文件这个文件的作用是告诉 Cursor 在生成代码时遵循统一的规范。原型生成最怕的是每次生成的布局风格不一致规则文件就是用来锁死这些变量的。# APP 原型生成规则 ## 输出格式 - 所有页面输出为独立的 HTML 文件放在 /prototype 目录下 - 每个 HTML 文件内联 CSS 和 JS不依赖外部构建工具 - 使用 Tailwind CSS CDN 版本进行样式编写 - 移动端优先默认视口宽度 375px最大宽度 430px ## 布局规范 - 页面结构顶部导航栏固定高度 44px 内容区可滚动 底部标签栏固定高度 49px - 内容区左右内边距统一 16px - 卡片圆角 12px阴影使用 shadow-sm - 主色调变量--primary: #2563EB; --bg: #F8FAFC; --text: #1E293B ## 交互规范 - 所有可点击元素必须有 active 状态的视觉反馈 - 页面跳转使用 window.location.href不引入路由库 - 弹窗使用 fixed 定位 半透明遮罩 - 表单输入框聚焦时边框变色 ## 命名规范 - 页面文件page-{功能名}.html如 page-home.html - 组件类名使用语义化命名如 .course-card、.rank-item - JS 函数使用驼峰命名如 handleSubmit、togglePanel这个规则文件的关键在于「锁死变量」颜色、间距、圆角、交互反馈方式都提前定义好后面无论生成多少个页面视觉一致性有保障。3.2 Claude 提示词模板需求文档转页面结构拿到一份需求文档后不要直接让 AI 生成代码。先让它做需求解析输出页面结构和组件清单。这一步的提示词模板如下你是一个资深产品经理请阅读以下需求文档输出 1. 核心用户场景不超过 3 个 2. 页面清单每个页面一句话说明用途 3. 每个页面的组件清单按从上到下顺序列出 4. 页面之间的跳转关系用箭头表示 5. 需要交互反馈的元素点击、滑动、长按等 需求文档内容 {在这里粘贴你的需求文档}这个模板的作用是把模糊的需求描述转成结构化的页面清单。实测下来一份 800 字左右的需求文档Claude 3.0 能在 30 秒内输出完整的页面结构和组件清单准确率在 85% 以上。剩下的 15% 通常是业务规则类的细节需要人工补充。3.3 原型生成配置骨架在 Cursor 里新建一个prototype-config.json用来存放全局配置{ projectName: fitness-social-app, viewport: { width: 375, maxWidth: 430 }, theme: { primary: #2563EB, background: #F8FAFC, text: #1E293B, border: #E2E8F0 }, pages: [ { id: home, file: page-home.html, title: 首页 }, { id: course, file: page-course.html, title: 课程日历 }, { id: rank, file: page-rank.html, title: 排行榜 }, { id: profile, file: page-profile.html, title: 个人中心 } ], navigation: { tabs: [home, course, rank, profile], defaultTab: home } }这个配置文件的作用是给 Cursor 一个明确的「页面地图」生成时不会漏页面也不会重复生成。后续要加页面只需要在这个文件里追加一条记录然后让 Cursor 按配置生成。4. 逐步验证从需求文档到可交互原型4.1 第一步需求解析与页面清单确认把需求文档粘贴到 Claude 提示词模板里得到页面清单后先人工过一遍。重点检查三件事页面数量是否完整、跳转关系是否闭环、有没有遗漏的状态页面比如空状态、加载状态、错误状态。确认无误后把页面清单写入prototype-config.json的pages数组。这一步不要跳过页面清单是后续所有生成动作的基准。4.2 第二步生成首页骨架在 Cursor 的 Composer 里输入根据 .cursorrules 和 prototype-config.json生成 page-home.html。 首页包含顶部搜索栏、课程推荐卡片列表3 个、今日打卡进度条、底部标签栏。 使用 Tailwind CDN移动端优先。生成完成后直接在浏览器打开page-home.html检查三件事布局是否错位、颜色是否符合配置、底部标签栏是否固定。如果布局有问题把截图和问题描述一起发给 Cursor让它修正。4.3 第三步批量生成其余页面首页确认没问题后用同样的方式生成其余页面。为了提高效率可以一次性把多个页面的生成任务交给 Cursor按照 prototype-config.json 中的 pages 列表依次生成 page-course.html、page-rank.html、page-profile.html。 每个页面遵循 .cursorrules 规范底部标签栏保持一致当前页面对应的 tab 高亮。这一步的关键是「保持一致」底部标签栏、顶部导航栏、颜色变量这些公共部分必须在每个页面里完全一致。如果发现某个页面风格跑偏检查.cursorrules是否被正确读取。4.4 第四步注入交互逻辑页面骨架生成完后开始加交互。以排行榜页面为例需求是「点击用户跳转详情页」在 Cursor 里输入在 page-rank.html 中为每个排行榜项添加点击事件点击后跳转到 page-profile.html 并通过 URL 参数传递用户 ID。同时在 page-profile.html 中读取该参数并显示对应用户信息。生成后在浏览器里实际点击测试。如果跳转正常但参数没传过去检查window.location.href的拼接逻辑。这类问题通常是因为 AI 生成的代码里参数名不一致手动对齐一下即可。4.5 第五步状态与边界情况补全高保真原型和线框图的核心区别在于「状态完整」。需要补全的状态包括空列表时的提示、加载中的骨架屏、网络错误时的重试按钮、表单提交后的成功反馈。在 Cursor 里输入为所有列表页面添加空状态提示无数据时显示插画和文案。 为所有表单页面添加提交成功后的 toast 提示。 为首页添加加载中的骨架屏效果。这一步做完后原型就具备了演示级别的完整度。发给别人看时对方可以真实点击、真实跳转、看到真实的状态变化。5. 本篇常见错排查5.1 Cursor 无法读取 .cursorrules现象生成的代码没有遵循规则文件里的颜色和间距规范。排查确认.cursorrules文件在项目根目录且文件名拼写正确注意前面有个点。如果文件存在但没生效在 Cursor 设置里检查 Rules 功能是否开启。部分版本需要在 Composer 里手动引用规则文件。5.2 生成的页面在手机上显示错位现象在浏览器开发者工具里切换到移动端视图后内容溢出或底部标签栏遮挡内容。排查检查meta nameviewport标签是否存在且内容为widthdevice-width, initial-scale1.0。另外检查内容区是否设置了padding-bottom来避开底部标签栏通常需要设置padding-bottom: 60px左右。5.3 页面之间跳转 404现象点击标签栏或按钮后浏览器提示找不到文件。排查确认所有 HTML 文件都在同一个目录下且文件名与prototype-config.json中的file字段完全一致。常见错误是生成时文件名带了多余的前缀或后缀比如page-home-v2.html但配置里写的是page-home.html。5.4 Claude 返回的代码不完整现象生成的 HTML 文件只有一半或者 CSS 样式缺失。排查这通常是单次请求的 token 超限导致的。解决办法是把生成任务拆小不要一次性让 AI 生成整个页面而是分区块生成先生成顶部导航再生成内容区最后生成底部标签栏。另外可以在 TaoToken 的用量页面查看单次请求的 token 消耗如果接近上限就调整提示词的长度。5.5 交互逻辑不生效现象点击按钮没有反应或者弹窗不显示。排查打开浏览器控制台看是否有 JS 报错。常见原因是 AI 生成的 JS 代码里引用了不存在的元素 ID或者事件绑定写在了 DOM 加载之前。解决办法是在script标签里把代码包在DOMContentLoaded事件里或者把 script 标签放在 body 末尾。6. 长期迭代与工具链衔接原型生成不是一次性任务而是一个持续迭代的过程。72 小时完成第一版可交互原型后后续的迭代重点会从「页面能不能跑」转向「交互顺不顺手」和「业务规则对不对」。对于需要长期跑编码和 Agent 任务的团队建议把原型生成和正式开发分成两条线原型阶段用 Cursor 加 Claude 快速试错正式开发阶段再接入 Coding Plan 做代码生成和重构。这样既能保证原型阶段的迭代速度又能在正式开发时控制代码质量。如果你在配置过程中遇到 API 接入或 key 管理的问题可以查阅接入文档里面有更详细的参数说明和常见问题。需要验证模型响应是否正常时可以直接在模型对话页面做快速测试确认链路通畅后再回到 Cursor 里跑完整流程。整套流程跑通后你会发现最大的变化不是「生成速度变快了」而是「试错成本变低了」。以前改一个交互逻辑要等设计师排期现在直接在原型上改代码改完刷新就能看效果。这种即时反馈的节奏才是 72 小时完成多轮迭代的真正原因。
