Cursor+Claude3.7的绝杀：从原型到app，两步完成app开发

最近在X上看到了一些人在用Claude 3.7 Sonnet生成 app原型图的尝试，受到启发，发现这么先生成不同界面的原型图再让Cursor基于原型图开发app会是很好的尝试。尤其是，你也可以不两步直接生成，而是在过程中更可视化地思考你要生产的原型，这对于非专业的产品经理来说，会是好得多的方式。

我今天做了些尝试后，效果让我感到惊艳。这里给大家介绍下具体的操作方式。

步骤一：新开项目文件生成HTML原型图

可以参考我的提示词，修改其中的要求。

我想开发一个ai自动记账app，现在需要输出原型图，请通过以下方式帮我完成app所有原型图片的设计。

这里有三个关键点：

1、选择Claude 3.7 Sonnet模型，不建议thinking

2、选择composer normal模式，或者说0.46版本中editor模式，不要选择agent，不要选择agent！

3、由于一次性生成的html代码文件会太长，中间可能会截断或创建失败，你可以点击生成失败的代码文件，cursor会提醒你是否创建文件，然后把已经生成的一部分代码复制到新创建的文件中；接着，@对应代码文件，要求cursor继续补全文件。

然后，打开补全完成的html，你就获得了类似下面的整个app所有主要界面的原型图👇

步骤二：让Cursor根据原型图创建app

用Xcode创建一个新项目，然后在Cursor中打开项目的根目录（如果从来没开发过iOS项目，不知道这一步如何操作的，可以先去看我之前的iOS app开发视频）

在Cursor打开的iOS app开发项目根目录中发送上面得到的app原型图，然后要求：

请根据我提供的原型图完成这个app的设计

这一步依然有三个关键点：

1、选择Claude 3.7 Sonnet模型，thinking或非thinking都可以试试

2、选择agent模式，必须选择agent！

3、这个过程中不断accept生成的代码文件就好了，创建完成后如果在Xcode调试出现bug，可以把xcode的报错提示复制回cursor，修bug场景建议使用thinking模型。

我这次测试过程中，两个步骤分别出现了一次cursor生成出错和一次Xcode报错，其他都一切顺利，得到的结果远超我的预期了。

甚至，这个app大部分功能都已经是可以正常操作，逻辑正常的。

这个两步生成app的策略其实都离不开Claude 3.7的能力，核心用到了两点：

1、Claude 3.7生成原型的能力惊人

2、Cursor agent模式+Claude 3.7基于原型图多步骤完成任务能力惊人

下面是其他一些原型图

本文首发于我的知识星球「AI编程：从入门到精通」：https://t.zsxq.com/BFTPI

原文链接