即使在 2025 年，产品设计中的设计和开发之间也存在差距。我们在 Figma 等工具中设计的内容与在代码中实现的内容是两回事。根据设计交接的质量以及设计师和开发人员的技能，这种差距可能是微妙的，也可能非常大。当设计和开发都由同一个人处理时，就可以弥合设计和开发之间的差距。但是，这需要编码技能，而 UI 设计领域中没有多少人拥有扎实的技能。
2025 年可能是这种现状开始改变的一年，因为有一些 AI 工具将通过为您完成繁重的工作并为您编写代码来帮助您简化产品设计。例如 Cursor AI, Lovable, Bolt。这些工具植根于使用 AI 生成完全功能性产品的概念。AI 工具的快速发展创造了一个新的专家类别——vibe coders——他们没有扎实的开发技能，而是使用 AI 生成代码。
在本文中，我将探讨使用 Cursor AI 创建一个完全功能的 iOS 应用程序（股票监控应用程序）的过程。我将讨论如何充分利用与 AI 的共同创作，并在本文末尾提到这种方法的主要缺点。
使用 AI 构建 iOS 应用程序需要具备的条件
您需要 3 样东西：
1. Macbook 或 iMac- Xcode**. 它是 macOS 的集成开发环境，用于为 macOS、iOS、iPadOS 开发软件。- Cursor AI**. Cursor AI 是一种带有 AI 代理的开发环境，用于生成代码。
步骤 1：在 Xcode 中创建一个新项目
您需要在 Xcode 中做的唯一一件事是创建一个新项目。导航到 iOS 选项卡并单击应用程序：
在 Xcode 中选择项目模板。
单击“下一步”后，您需要为项目命名并选择要存储的位置。
在 Xcode 中命名项目。
Xcode 创建的项目将是基础的——它将只有基本文件和一个屏幕（iOS 使用视图的概念，因此从技术上讲，它将是一个视图 ContentView，其中包含 Hello World）。确保 Xcode 可以构建项目，并且它在预览中可见。
创建项目并确保 Xcode 可以构建它后，您可以跳转到 Cursor AI 生成代码。
步骤 2：在 Cusror AI 中打开 iOS 项目
在 Cusror AI 中打开项目后，您将看到您的工作环境。如果您之前使用过像 Visual Studio Code 这样的 IDE，那么 Cursor AI 对您来说会非常熟悉。基本上，它是一个 VS Code 的设计，并添加了一个额外的 AI 层。
大多数时候，您将与 3 个面板交互：
1. 左侧面板是项目文件树 - 底部面板是终端。
在 Cursor AI 中打开的左侧和底部面板。
1. 右侧面板是带有 AI 助手的面板。
在 Cursor AI 中打开的三个面板。
所有魔力都将发生在第三个面板中——带有 AI 助手的面板。我们将提示 AI 代理生成代码。正如您在我的示例中看到的那样，我为构建股票价格应用程序提供了提示。我按下发送后，AI 代理将执行任务并为我生成代码。
步骤 3：充分利用 Cursor AI
在发送您的第一个提示之前，您需要检查几件事以充分利用光标 AI。首先，请务必添加 .cursorrules 文件，您可以在其中提供 Cursor 在编写代码时应遵循的特定说明。由于我正在构建一个 iOS 应用程序，因此我将为 SwiftUI 提供说明。
用于 SwiftUI 项目的 Cursorrules 文件。
如果您想知道您应该在此文件中写什么，我为您提供了解决方案——要么编写您认为对您的项目有意义的内容，要么使用 Cursor 社区编写的说明。搜索此类说明的好地方是 Cursor.directory。只需在搜索字段中键入您想要用于项目的技术，您就会找到可用于项目的现成规则。
特定技术和语言的规则数据库。
您需要做的另一件事是为您的设计的特定领域提供开发人员文档和最佳实践。您可以通过在代理窗口中标记文档来执行此操作。在我的例子中，我标记了 Apple Swift 和 Apple Design Tips 文档（检查右上角）。
在代理中标记文档。
您可以通过两种方式添加新文档。要么按 添加上下文，选择 文档，然后单击 添加新文档。
将新文档添加到上下文。
或者单击 齿轮 图标，导航到“功能”选项卡，然后向下滚动到“文档”。
在 Cursor 设置 -> 功能 -> 文档部分添加新文档。
最后，您只需单击您希望 AI 助手在生成代码时使用的文档，即可将文档添加到上下文中。
将两个文档添加到上下文中。
步骤 4：使用 AI 生成代码
将项目规则添加到 Cursor 并将文档添加到上下文后，就可以使用 AI 助手生成代码了。这是该过程中最具挑战性的部分，因为您需要清楚地阐述您想要构建什么以及为什么。
您提交给 AI 代理的提示应：
• 清楚地解释您想要构建的内容（您的应用程序是关于什么的）； • 该应用程序将有哪些屏幕以及它们将如何连接； • 提供有关各个屏幕应具有的内容和功能的信息。
您需要了解，AI 第一次尝试就构建一个完美的应用程序的可能性很低。因此，请准备好迭代和完善您的初始提示和后续提示。
我用来为 iOS 生成股票价格应用程序的提示。
提交提示后，Cursor 将开始为您生成代码。Cursor 的优点在于，作为用户，您可以完全控制更改。您可以接受或拒绝 Cursor 提供的各个更改，并且只有在您接受它们时，Cursor 才会更改实际文件。
Cursor AI 根据您的提示建议代码更改。
您可以导航回 Xcode 以查看 Cursor 生成的结果。
由 Cursor AI 生成的 StockPrice 应用程序。
步骤 5：使用 AI 进行应用程序优化和迭代设计
正如我之前提到的，您第一次尝试就获得最终解决方案的可能性很低。因此，您需要向 Cursor 提供额外的提示以优化应用程序。优化的潜在领域可以是——改进业务逻辑（添加/删除内容或功能）和视觉优化。例如，下面是我尝试让应用程序看起来更漂亮的方法。您可以看到我使用了一个简单的提示，"让 StockListView 和 StockDetailsView 看起来更漂亮"，Cursor 清楚地理解了我的意图。
使用 AI 优化应用程序。
如果您导航回 Xcode，您将看到 Cursor 引入的更改使应用程序看起来更美观。
应用程序的优化视觉外观。
关于 Cursor AI 和一般的 vibe 编码的常见问题解答
问：我可以使用 Cursor AI 构建一个完整的应用程序，而无需学习编码技能吗？
答：我诚实的回答是，不，至少目前不行。Cursor 是一个非常好的共同创造者，但您仍然需要驾驶这辆车并验证 Cursor 生成的代码的质量。
问：我可以使用 Cursor 构建具有复杂业务逻辑的复杂应用程序吗？
答：您可以尝试，但这可能需要在 Cursor AI 和 Xcode 之间进行大量来回交互。您需要完善您的提示，并准备好深入研究代码以完善细节。根据我的经验，Cursor 擅长构建简单的产品（比如我在这里分享的 StockPrice 应用程序），并且在您手头有特定任务时（例如，想要优化产品中特定屏幕的设计）可以作为上下文助手。
问：您认为使用 Cursor AI 或类似工具的技能对于 UI 设计师来说是必备技能吗？
答：是的，我认为是。Vibe 编码将是未来 UI 设计师工作的重要组成部分；我们将在构建初始设计时练习 vibe 编码，这将有助于弥合设计和开发之间的差距。
