Cursor 配合 Claude 3.7 快速生成原型图

使用 Cursor 和 Claude3.7 10分钟构建产品原型图和iOS应用，无需写一行代码

AI 编程与开发视频教程· 入门· 7 分钟· UP 主马克的技术工作坊· Cursor / Claude 3.7 / 原型图

▶ 1.6万播放

演示用 Cursor 配合 Claude 3.7，不手写代码快速产出产品原型图和 iOS 应用：用产品经理视角的提示生成番茄工作法应用的 HTML 原型，再据此继续生成应用。视频给出所用提示词，偏原型实战，适合产品经理与想验证点子的开发者。

这套教程讲什么

适合想快速把想法变成可看原型的产品经理、设计师，以及想省掉起步阶段手写界面代码的开发者。

建议把视频里那两段提示词抄下来改成自己的产品描述，先跑原型确认界面，再决定要不要继续生成应用代码。

为什么做原型时常让模型先输出 HTML？

HTML 单文件就能在浏览器里直接打开，便于快速预览、截图和分享，也容易一页内摆下多个界面状态。相比直接生成原生工程，它省去环境配置，适合先对齐视觉与交互，确认方向后再投入正式实现。

给模型写原型提示时哪些信息不能省？

至少要说明产品定位与目标用户、需要覆盖的页面和状态、期望的视觉风格，以及是否可用图标库等外部资源。把所有界面放在同一页这类约束写清楚，能显著减少来回返工，让产出的原型更完整。

AI 编程工具已经不只是补全一行代码：从读现有项目、按需求改多个文件，到跑命令、查报错、写测试，都能在编辑器里协作完成。本分类先带零基础用户把 Cursor、Trae、Claude Code 这类工具装起来并跑通第一个小项目，再讲怎么给足上下文、怎么拆任务、怎么审查 AI 改过的代码。