引子

网络上关于 AI 编程工具的讨论热度居高不下，Cursor和 Trae 这两款 IDE 也经常被放在一起比较。很多声音认为 Cursor 的体验更胜一筹，那么我为什么最终选择了 Trae Pro 的付费版呢？理由很简单：极致的性价比，只需要3刀就可以不排队地使用业界顶尖的 Claude 4 和 Gemini 2.5 Pro 。笔者个人认为AI IDE 的能力很大程度上取决于底层的模型，所以目前的 Trae 对我来说是一个很难拒绝的选择。

本篇文章，我将带各位读者走一遍完整的流程，看看如何利用Trae ，将一个想法真正变成一个可以运行的 IOS APP。

需求梳理

开发任何应用的第一步都是需求梳理。在传统工作流中，这通常是产品经理（PM）的职责。但在我们的 AI 工作流中，我们可以把这个任务交给 AI。

一个高效的提示词（Prompt）模板是成功的关键。你可以使用下面这个模板：

我想开发一个XX理念的ios app，我希望这个APP是一个简单的可本地化运行，是否需要联网，请作为出色的产品经理，帮我完成需求的梳理。

为了让这个过程更具体，我将以我之前在 掘金AICoding 板块发布的作品——『回声』 为例。如果你喜欢『回声』的设计，可以去作品主页点个赞！

『回声』的设计理念如下：

我们每天都在表达与倾听中塑造自己的职业形象。但有时，我们渴望有力地表达，却发现思绪混乱；我们希望冷静地倾听，却容易被情绪裹挟。

为此，我创造了『回声』。

它不是一个冷冰冰的工具，而是一位能与你情绪共鸣的沟通教练。

当你需要表达时，进入『塑言』模块。在这里，你最原始、最零散的灵感，都将被AI雕琢成逻辑清晰、掷地有声的方案，帮助你找到属于自己的声音。

当外界的声音让你困扰时，步入『听心』的世界。在这里，流动的涟漪会映照你内心的波澜。它将那些如心刺般的话语，温柔接纳，于纷乱的“噪音”中，为你剥离出事实的“本音”。更重要的，它会指引你如何奏出和谐的回应——“谐音”，让你不仅听懂言语，更能听见人心。

在『回声』，我们相信，最有力的声音，源于最深刻的倾听。

将这个理念填入我们的提示词模板，得到一个给 Trae 的具体指令：

我想开发一个名为回声的ios app，它主要由两大模块组成-塑言和回声，当你需要表达时，进入『塑言』模块。在这里，你最原始、最零散的灵感，都将被AI雕琢成逻辑清晰、掷地有声的方案，帮助你找到属于自己的声音；当外界的声音让你困扰时，步入『听心』的世界。在这里，流动的涟漪会映照你内心的波澜。它将那些如心刺般的话语，温柔接纳，于纷乱的“噪音”中，为你剥离出事实的“本音”。更重要的，它会指引你如何奏出和谐的回应——“谐音”，让你不仅听懂言语，更能听见人心。我希望这个APP是一个简单的可本地化运行，用户输入文本后需要调用大模型获取结果，因此属于需要联网，请作为出色的产品经理，帮我完成需求的梳理，只需要生成需求梳理文档。

把这段指令输入 Trae （注：本次演示将全程使用Claude 4 Opus 模型），AI 将为我们生成一份结构化的需求文档。

绘制原型

有了清晰的需求文档，下一步就是将抽象的功能转化为具体的用户界面（UI）。我们继续让 AI 扮演 UI/UX 设计师和前端工程师的角色。

这里的提示词需要更复杂、更具体，因为它直接决定了原型产物的质量。

我想开发一个{在这里粘贴上一步AI生成的需求文档}，它的需求文档如下：

现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。

2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。

3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。

4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：

5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。

\- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。

\- 真实感增强：

\- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。

\- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。

\- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。



请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

Trae 在接收到这个指令后，会生成一个包含多个文件的代码结构。我们只需点击运行命令，即可在浏览器中预览到一个交互感十足的高保真原型。

创建项目

原型和需求都已就位，现在可以正式进入编码阶段。我们首先在 Xcode 中创建一个标准的 iOS 项目。

项目名称自定，团队和组织标识符根据你自己的设置填写，其他保持默认即可。

项目初始化完成后，我们就得到了一个干净的初始化项目。

项目开发

现在，是时候让Trae 大显身手。直接用Trae 打开刚刚创建的 Xcode 项目根目录，然后向它发出核心开发指令：

请根据{再次粘贴需求文档}和原型图帮我完成这个IOS APP的开发，我们正在这个IOS开发项目的根目录。

这里需要对上一步生成的原型进行截图（注：截图不要偷懒，越全面越好），然后和上面的指令一起粘贴到Trae的输入框中。Trae 就会开始分析并生成代码。

AI 生成的初始代码很少能一次性完美运行，这非常正常。这恰恰是 AI 辅助开发最真实的场景：人机协同调试，但AI IDE的优势在于即使我们未掌握的语言在做项目开发遇到报错的时候也可以直接丢给AI解决，非常高效！

生成代码后，我们回到 Xcode，编译并运行项目，发现有报错。

这个时候不用担心，直接复制所有的报错信息，把它们粘贴到Trae 的对话框中，让它为我们修复。

Trae 会分析错误并提供修复后的代码，我们只需要接受它的修改。

修复完成后，再次回到Xcode编译并运行，如果还有报错，重复“运行 -> 复制错误 -> 粘贴给 AI -> 应用修复”这个循环，直到所有报错都被解决了。

经过两轮快速的迭代修复，所有错误都被解决了。现在，再次运行项目。

成功！一个基于我们理念的 App 已经成功运行在模拟器上了。后续的功能细节优化、API 对接、UI 微调，都可以继续通过与Trae 对话来完成。当 App 功能完善后，你就可以注册一个苹果开发者账号，将其发布到App Store 了。

小结

通过这次从零到一的实战，我们完整体验了一种全新的 App 开发范式。在这个工作流中，AI 不再仅仅是一个代码补全工具，而是深度参与到需求分析、原型设计、编码实现、甚至 Debug 的每一个环节。而我们的角色，也在Trae的帮助下悄然发生着转变。