用 Cursor 一步搞定 UI 原型图：有交互、可扩展、易维护（附教程）

Posted 22 days ago Updated recently

By Eric

21~27 min read

见字如面，与大家分享实践中的经验与思考。

今年 2 月底，Anthropic 公司推出 Claude 3.7 模型，其在编码和前端开发方面表现出色。当时看到网上许多测试其能力的帖子，我也写了《零基础3步生成专业原型图！Cursor+Claude3.7教程》这篇文章进行验证。

然而在实际使用过程中，我发现了几个明显的痛点：

全部代码都生成在一个 HTML 文件中，不利于管理
Agent 模式下生成经常中断
Ask 模式又需要不断使用"继续"，手动拼接 HTML 文件
后期功能添加和修复非常麻烦，影响面广

优化方案

针对这些问题，我重新设计了一套提示词，让 Cursor 结合 Agent 模式和 Claude 3.7，一次提问就能完整生成全部代码，一步到位生成多文件 UI 原型。你只需要等待验证结果，无需中途再次提问干预，更适合非程序员用户。

下面的视频教程展示了完整过程，一次性生成，中间无任何中断，告别反复拉扯：

https://www.bilibili.com/video/BV1Ry7ZzJEM9

核心提示词模板

你是一名精通 UI 设计和产品规划的全栈工程师，你的目标是完成一个"健身普拉提"iOS App 的开发。

你的核心任务是输出一套完整的APP原型图（HTML页面形式）来辅助后续的开发任务。

核心执行点：

- 明确功能与页面： 请你构思并确定"健身普拉提"App的核心功能模块。基于这些模块，规划出需要设计的HTML页面清单。
- 产品与UI/UX设计：
  - 以产品经理的视角规划APP的关键功能、页面流程和交互逻辑。
  - 以设计师的视角输出符合现代iOS App风格的、美观且用户友好的UI/UX。

技术规范：

- 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript（用于基础交互）。
- 图片素材请使用 Unsplash。
- 代码应简洁，注重可读性。

输出要求：

- 创建一个包含多个 HTML 页面的原型。
- 主页面命名为 index.html，它可以整合或跳转到其他页面。
- 非主页面HTML文件使用其对应的核心功能名称进行命名（英文，例如 courses.html, profile.html）。
- 每个页面均需采用 iOS App 的风格生成。
- index.html 中，每行展示两个主要功能模块的入口或页面预览。
- 所有输出（包括代码内注释和页面文本）永远用简体中文。
- 请以顶级UX的眼光和审美标准，创造令人满意的设计。

请直接开始设计并输出上述要求的HTML原型页面代码，从 index.html 开始，然后是其他你规划的核心功能页面。

这个提示词模板可应用于任何你想设计的 APP。特别适合以下场景：