如何使用Claude 3.7 Sonnet 和 Cursor 快速生成 App 原型并开发 #claude3.7 #cursor

1. 为什么选择 Claude 3.7 Sonnet 和 Cursor 生成 App 原型？

最近在 X 上看到有人尝试使用 Claude 3.7 Sonnet 生成 app 原型图，这给了我很大的启发。 传统的 App 开发流程中，产品经理需要先设计原型图，然后开发人员再根据原型图进行开发。 这种方式存在一些问题：

• 非专业的产品经理可能难以设计出高质量的原型图。
• 原型图和最终 App 之间可能存在偏差。
• 开发过程中需要不断地沟通和修改。

而利用 Claude 3.7 Sonnet 和 Cursor，我们可以直接生成 App 的原型图，并让 Cursor 基于原型图进行开发。 这种方式的优点在于：

• 可视化思考：可以在生成原型图的过程中更直观地思考 App 的功能和界面设计，这对于非专业的产品经理来说非常友好。
• 高效开发：可以直接将原型图交给 Cursor 进行开发，减少了沟通和修改的成本。
• 高质量原型：Claude 3.7 生成的原型图质量很高，可以作为 App 开发的基础。

2. 如何使用 Claude 3.7 Sonnet 生成 HTML 原型图？

2.1. 创建新项目文件

首先，我们需要创建一个新的项目文件，用于存放生成的 HTML 原型图。

2.2. 编写 Prompt 提示词

接下来，我们需要编写 Prompt 提示词，告诉 Claude 3.7 Sonnet 我们想要开发的 App 的功能和界面设计。 这里提供一个示例 Prompt，你可以根据自己的需求进行修改：

我想开发一个ai自动记账app，现在需要输出原型图，请通过以下方式帮我完成app所有原型图片的设计。
1、思考用户需要ai记账app实现哪些功能
2、作为产品经理规划这些界面
3、作为设计师思考这些原型界面的设计
4、使用html在一个界面上生成所有的原型界面，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实
我希望这些界面是需要能直接拿去进行开发的

这个 Prompt 包含以下几个关键点：

• 明确 App 的功能：告诉 Claude 3.7 Sonnet 你想要开发的 App 是一个 AI 自动记账 App，需要实现哪些功能。
• 规划界面：让 Claude 3.7 Sonnet 扮演 产品经理，规划 App 的界面。
• 设计原型：让 Claude 3.7 Sonnet 扮演 设计师，设计原型界面的外观。
• 使用 HTML 生成原型：要求 Claude 3.7 Sonnet 使用 HTML 在一个界面上生成所有的原型界面，并使用 FontAwesome 等开源图标库美化原型。
• 可开发性：说明希望生成的界面可以直接拿去进行开发。

2.3. 选择模型和模式

在使用 Claude 3.7 Sonnet 生成原型图时，需要注意以下几点：

• 选择 Claude 3.7 Sonnet 模型：建议选择 Claude 3.7 Sonnet 模型，不建议使用 thinking 模式。
• 选择 composer normal 模式：在 Cursor 0.46 版本 中，选择 editor 模式，不要选择 agent 模式。

2.4. 生成和补全代码

由于一次性生成的 HTML 代码文件可能会很长，中间可能会被截断或创建失败。 遇到这种情况，可以点击生成失败的代码文件，Cursor 会提示你是否创建文件，然后把已经生成的一部分代码复制到新创建的文件中； 接着，@ 对应代码文件，要求 Cursor 继续补全文件。

2.5. 查看原型图

完成代码补全后，打开 HTML 文件，就可以看到整个 App 的主要界面的原型图了。

3. 如何让 Cursor 根据原型图创建 App？

3.1. 创建 Xcode 项目

首先，我们需要使用 Xcode 创建一个新的项目。 如果你没有开发过 iOS 项目，可以先学习相关的教程。

3.2. 在 Cursor 中打开项目根目录

在 Cursor 中打开刚刚创建的 Xcode 项目的根目录。

3.3. 发送原型图并提出需求

将之前生成的 App 原型图发送到 Cursor 中，并提出你的需求，例如：

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

3.4. 选择模型和模式

在使用 Cursor 基于原型图创建 App 时，需要注意以下几点：

• 选择 Claude 3.7 Sonnet 模型：选择 Claude 3.7 Sonnet 模型，thinking 或非 thinking 都可以尝试。
• 选择 agent 模式：必须选择 agent 模式！

3.5. 接受代码并调试

在生成代码的过程中，不断 accept 生成的代码文件。 创建完成后，如果在 Xcode 调试时出现 bug，可以将 Xcode 的报错提示复制回 Cursor，并建议使用 thinking 模型进行 bug 修复。

4. 总结

通过 Claude 3.7 Sonnet 和 Cursor 两步生成 App 的策略，可以大大提高 App 开发的效率。 这种策略的核心在于：

• Claude 3.7 生成原型的能力惊人：可以快速生成高质量的 App 原型图。
• Cursor agent 模式 + Claude 3.7 基于原型图多步骤完成任务能力惊人：可以根据原型图自动生成 App 的代码，并完成大部分功能。

在测试过程中，虽然出现了一些小问题，例如 Cursor 生成出错和 Xcode 报错，但最终的结果远超预期。 甚至，这个 App 的大部分功能都已经可以正常操作，逻辑正常。

我认为：

此方法乃“拿来主义”之妙用，借AI之利器，予无基础者以 가능성。勿迷信神器，当勤学苦练，方能驾驭自如，创出真正之佳作。

原型开发 #鲁迅体