零基础 3 步生成专业原型图！Cursor + Claude 3.7 保姆级教程（附模板）
Eric教后端工程师快速上手 UI 原型设计：利用 Cursor 与 Claude 3.7，仅需 3 步生成专业级可交互前端原型。
作为一名从后端转向前端的全栈工程师，在 UI 原型设计方面存在不足。但自从 Claude 3.7 推出后，前端开发能力和审美相较于 Claude 3.5 得到了显著提升，可以直接借助 Claude 3.7 与 Cursor 直接生成一整套 UI 设计图。
如果想要了解 Claude 3.7 Sonnet 和 Claude 3.5 Sonnect 在前端编程能力的区别，可以直接参考 github 源码和教程：
https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison
通过相应的提示词，可以直接生成一整套的 UX 原型设计稿，如下所示：
以上操作非常简单，三步即可完成，有 Cursor 的小伙伴可以直接上手：
- 整理好相应的提示词（可以直接参考本案例提示词，按需修改）。
- 在 Ask 模式（0.46 版本以下是 Chat 模式）使用 Claude 3.7 Sonnet 模型进行提问。
- 代码上下文过长，需要多次生成后统一汇总到一个 HTML 文件中。
具体操作步骤如下：
第一步，整理提示词。
你是一名精通 UI 设计和产品规划的全栈工程师，拥有 20 年的 UX 设计经验。你的任务是帮助一位初中生用户完成一个“健身普拉提”iOS App 的开发。
现在你的目标是输出一套完整的APP原型图来辅助后续的开发任务，请遵循以下原则：
- 模拟真实用户使用普拉提类APP的真实场景和需求； - 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互； - 结合产品规划，以设计师的视角去输出完整的UI/UX； - 引入tailwindcss来完成style样式，图片使用unsplash - 以上全部页面都在同一个html文件中展示。
第二步：使用 Cursor + Claude 3.7 Sonnet，在 Ask 模型中进行提问。
如果直接使用 Edit 模式进行提问，会发现因代码上下文过长导致中断，后改成 Ask 模式。
改为 Ask 模式后，继续提问。
第三步，在中断后，发送几轮“继续”之后，就可以生成多段 HTML 代码。将其拷贝到一个 HTML 文件即可。
整个生成 UI 原型图的过程非常的简单，同时审美也很在线。
在提示词中并没有加入太多功能描述的前提下，Claude 3.7也能自行丰富，如果在提示词中加入更多的规则来约束的话，能更好的满足部分复杂项目的诉求。
最后，对于独立开发者来说，可以说是一个非常大的利好，能够极大的提升效率的同时，也能更好的补充不同技能之间的短板。
如果还没有开始体验 Cursor 的话，可以参考本文进行快速入门：零基础入门：5步掌握Cursor AI编辑器基础操作。
原型设计与架构图表专题推荐
如果你对使用 Cursor 高效生成原型图、设计稿与架构图感兴趣，推荐阅读：
- Cursor 使用对话的方式直接生成 Figma 设计稿
- Cursor + PlantUML：告别手写 SQL 的高效工作流
- Cursor 结合 PlantUML 绘制架构图实践
- 用 Cursor 一步搞定 UI 原型图：有交互、可扩展、易维护（附教程）
👉 查阅更多实战技巧，欢迎访问 Cursor 专栏完整目录。
