想用Cursor做高品质APP原型，这个小技巧你必须知道 feat.claude 3.7 上手体验

分享利用 Cursor 和 Claude 3.7 稳定生成高品质 App 原型的技巧，涵盖提示词优化与分步执行流程。

UP主: 御风大世界 · 时长: 4:06 · 🔗 B站原视频

发布: 2025-03-05 · 收录: 2025-03-24

标签: Cursor · Claude 3.7 · AI 编程 · UI 设计 · 提示词工程

开场与成品展示

哈喽大家好，我是玉凤凰。现在你看到的这个，是我最新用 Cursor 和 Claude 3.7 Sonnet 生成的番茄时钟 iOS 应用原型。

很多同学看了我上一个视频之后，私信来问我，怎么样能够像我这样，高品质地生成应用原型。今天我简单介绍一下我的做法，其实非常简单，接下来的操作全部都在 Cursor 里完成。

首先我们需要跟 Cursor 沟通：我们要干什么。这一步的目标，是让 Cursor 帮我们生成一个非常规范的提示词。

我当时是这样说的：我想做一个番茄时钟的 iOS App，我准备让 Cursor 用 HTML 的形式帮我模拟 UI 和 UX 的设计，我希望你可以帮我生成一个规范的提示词，让我用来和 Cursor 进行沟通。

这里注意一下：它现在是 Agent，我们先不要用 Agent，把它转换成 Ask。Ask 就是之前的 Chat，不会去做任何文件的读写。

很快它就会给你第一版提示词。第一版其实已经很规范了，比我们用自然语言随口说要规范很多，应用需求也更清晰。

我又跟它说，因为我发现它上面的提示词里，对设计美观程度、交互这些体现不够。我希望它更多对设计提要求，比如设计要美观大方，让人用起来很舒服。

接下来它就会给一个优化版。我从上往下看了之后，觉得还是不错的。

但我之前也收到很多私信：你一旦把一个很大的提示词交给 Cursor，它可能会因为网络原因，或者提示词太长、token 太多，导致中断或者不稳定。

这时候我们可以进一步优化：我希望最终所有 App 的界面，都可以在 index.html 当中平铺展示；并且 Cursor 在生成过程中，每次只生成一部分，避免内容太长太多，产生不必要的中断。

加上这个要求之后，它就会帮你生成一个“分步生成”的提示词版本：第一步、第二步、第三步、第四步，以及一些适用于所有界面的设计要求等。

接下来做法更简单。在 Cursor 里，文件浏览器下面有一个 Notepad（记事本）。你可以点加号添加一个记事本。

添加完之后，我通常会把刚才生成的提示词，或者分步骤实现项目的指令集，全部放到这个 Notepad 里。

然后我们把 AI 对话面板调成 Agent 模式，从刚才的 Ask 调成 Agent。接着你只需要说一句话：请生成，或者请执行，然后发送就可以了。

它就会一步一步去做：先做第一步，再添加一些动画、JS、CSS，然后第三步，一直到最后，它会告诉你它基于你的提示词（也就是刚才建立的 Notepad）都做出来了。做完之后，它也会告诉你怎么运行。

这就是我实验了很长时间之后，得到的一种我自己觉得比较不错、而且很稳定的生成 UI 的方式，大家可以试用一下。

当然，如果你不想在 Cursor 里生成提示词或者分步指令，你也可以用 DeepSeek 或者 ChatGPT 都可以。我只是觉得 Cursor 集成度比较高，所以更愿意用这种方式，其实都是殊途同归。

好的，以上就是本期视频的全部内容。感谢大家的收看，我们下个视频再见。Peace。