【愚公系列】《人人都是AI程序员》007-前端设计与AI实现（你的AI工作台：从TRAE SOLO模式入门）

💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：ZEEKLOG博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕ZEEKLOG"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

文章目录

• 🚀前言
• 🚀一、你的AI工作台：从TRAE SOLO模式入门
  • 🔎1.欢迎来到自主开发时代：TRAE SOLO模式
    • 🦋1. 什么是TRAE SOLO模式
    • 🦋2. 五分钟实战：上手 TRAE SOLO模式
  • 🔎2.你的第一个TRAE SOLO项目：从一句话到一个网站
    • 🦋1. TRAE SOLO的自动化工作流
    • 🦋2. 五分钟实战：构建一个应用
  • 🔎3.你是导演，不是乘客：如何与SOLO协作
    • 🦋1. 迭代与微调
    • 🦋2. 保持控制权
  • 🔎4.【进阶】为何需要 Cursor
    • 🦋特有优势1：如手术刀般精准的“代码库上下文”理解
    • 🦋特有优势2：大规模、跨文件的“代码重构”
    • 🦋特有优势3：人机协作的“深度调试”流程与MCP集成
  • 🔎5.小结

🚀前言

本系列你将亲手见证，一个模糊的想法如何在AI的协助下，一步步生长为一个精美绝伦、功能完备的用户界面。

从Trickle的“魔法画布”到v0.dev的“智能导演”，从Figma的专业设计工具到TRAE SOLO的自主创作模式-这些绝非冰冷的工具，而是你的创意合伙人。它们将帮你跨越那道曾经看似不可逾越的鸿沟：从“这个想法很棒”到“这个产品真美”。

结束时，你不仅会收获一个完整的网站，更会拥有一种全新的自信：原来，创造美感竟如此触手可及。

🚀一、你的AI工作台：从TRAE SOLO模式入门

想象一下，你有一个绝妙的网站或应用创意，但你并不是一位编程专家。在过去，这可能意味着这些创意只能停留在脑海中。而现在，随着AI的飞速发展，一个令人兴奋的新时代已经到来，它让软件创造变得前所未有得简单、触手可及。

本节将深入探讨两款颠覆性的AI开发工具：TRAE（这里主要介绍其SOLO模式）和Cursor，它们都能够帮助你将创意转化为实际的应用。

本节首先介绍TRAE SOLO模式，它被定位为专属的AI工程师，能够从零开始构建整个项目；随后会引入Cursor，它更像一位专业的AI外科医生，擅长对现有代码进行精细的调整和优化。

🔎1.欢迎来到自主开发时代：TRAE SOLO模式

前文提到，你想到的网站或应用创意，因为不具备编程技能而只能一直停留在脑海中，而TRAE SOLO模式的出现将彻底改变这一局面。

🦋1. 什么是TRAE SOLO模式

TRAE SOLO模式绝非普通的辅助工具，它是强大的自主AI代理。这意味着它不像传统的AI助手那样需要用户一步步地指导，而是能“坐上驾驶位”，独立完成整个开发流程——从最初的需求构想到最终可供使用的产品部署，TRAE SOLO都能独立完成。用户只需下达指令，它便会自主规划、编码、测试，甚至协助部署，这相当于你拥有了一个全能的软件开发团队，而你只需扮演产品经理的角色，负责提出需求。

用户不再需要学习复杂的编程语言、框架或部署流程，而是直接用自然语言描述需求，让AI完成所有技术细节。这从根本上改变了“谁可以构建软件”的定义，实现了软件开发的“民主化”。传统上，产品经理或设计师如果想将想法变为原型，必须依赖开发团队；现在，TRAE SOLO让他们直接成为“产品构建者”。

TRAE SOLO的界面设计十分直观，提供了一体化的工作空间，如图2-36所示。这意味着用户可以在一个屏幕上，同时看到AI的所有“工作台”：它在编辑器里编写代码、在终端里运行命令、在浏览器里展示正在构建的网站，甚至在文档面板里生成项目说明。这种“统一视图”让用户能够实时监控AI的每一步开发活动。

图2-36 TRAE SOLO一体化工作空间

在AI自主性日益增强的背景下，透明度显得尤为重要。不具备技术背景的用户，可能会对AI的“黑箱”操作感到不安。而TRAE SOLO通过提供实时、多面板的视图，让AI的工作过程变得可见、可理解。这种透明度直接影响用户对AI的信任度和接受度。当用户能够看到AI如何思考、规划、编码、测试时，会更容易相信AI的输出，也更愿意让AI处理复杂任务。

了解了TRAE SOLO模式的理念后，我们来看看如何使用它。

🦋2. 五分钟实战：上手 TRAE SOLO模式

要使用TRAE SOLO模式，首先需要访问TRAE的官方网站（可搜索“TRAE AI”找到）下载应用。

注：在本文写作尾声时，只有使用Pro版本的付费用户才能使用TRAE SOLO模式。大家可以付费购买Pro版本。本文所涉及的相关实战均基于内测阶段的SOLO模式完成。

进入TRAE SOLO模式后，用户会看到一个简洁直观的界面（见图2-36）。屏幕左侧是聊天框（即指令输入区），用户可以用自然语言输入需求，甚至直接用语音告诉AI想要做什么。屏幕右侧是AI的多面板工作区，会实时显示编辑器、终端、浏览器、文档和集成面板。这些面板中包含一个名为“实时跟随”的特色功能，启用该功能后，各个视图会根据AI当前的工作阶段自动切换，让整个开发过程一目了然。

你可以点击这些面板，熟悉它们的功能，这些操作不会影响电脑中的任何数据。熟悉界面后，就可以创建第一个项目了。

🔎2.你的第一个TRAE SOLO项目：从一句话到一个网站

现在，我们启动第一个项目，一同见证TRAE SOLO如何将一句简单的指令，变成一个功能齐全的网站。

🦋1. TRAE SOLO的自动化工作流

TRAE SOLO并非随意编写代码，它拥有一套严谨且专业的“思考”流程，宛如经验丰富的软件工程师。这个流程通常包含以下步骤：

1. 需求分析。SOLO会仔细“阅读”用户指令，理解真正的意图。它会像一位资深的产品经理一样，将模糊的想法转化为清晰、可执行的任务。
2. 撰写PRD。接着，它会生成一份专业的产品需求文档（PRD）。这份文档如同项目的“蓝图”，详细列出了所有功能和设计细节——这是TRAE SOLO“上下文工程”的核心理念，确保它在编写代码前对项目有完整的理解。
3. 环境配置。编码前，TRAE SOLO会自动安装和配置项目所需的各种依赖与环境。
4. 编写代码。有了蓝图后，TRAE SOLO会在编辑器面板中“敲代码”，实现PRD中定义的功能。
5. 执行命令。同时，它会在终端面板中自动运行必要的命令，例如安装库、启动服务器等。
6. 预览与修改。网站或应用构建完成后，它会立即在浏览器面板中展示可交互的预览页面。
7. （可选）部署。用户确认后，TRAE SOLO甚至可以协助用户一键部署应用，使其上线供全球用户访问。

TRAE SOLO的工作流程强调“需求分析”和“PRD生成”是编码前的关键步骤，这与许多直接生成代码的AI工具形成了鲜明对比。这种“计划优先，然后执行”的模式，是传统软件工程处理复杂项目的基础。AI通过生成PRD，不仅为自身创建了“单一事实来源”，也为用户提供了清晰、可审查的蓝图。这既提高了AI生成结果的可靠性和项目的可维护性，也让非技术人员能构建出更健壮的应用。

了解了其工作流程后，让我们亲手体验一下这个过程。

🦋2. 五分钟实战：构建一个应用

在聊天框中输入 ＠SOLO Builder，这会调用TRAE SOLO内部专门负责网站构建的代理，它能将抽象概念转化为功能齐全的网站，全程处理从PRD起草、代码生成到网站部署的所有环节。

接着，用最自然的语言描述需求：

【提示词模板】

按下回车键后，TRAE SOLO会快速进入流程。你会在右侧文档面板中看到TRAE SOLO自动生成的详细PRD，如图2-37所示。

图2-37 TRAE SOLO自动生成的PRD文档

它会将“待办事项”的需求拆解成一个个具体可执行的功能点。紧接着，编辑器面板会活跃起来，TRAE SOLO开始高效编写代码，如图2-38所示。终端面板会实时显示进度日志，比如“正在安装项目依赖”“正在配置运行环境”“正在构建主页”等，让用户对AI的工作进展了如指掌。

图2-38 TRAE SOLO编写代码与终端日志

最后，浏览器面板会弹出一个窗口，你的“待办事项”应用会呈现在眼前，而且是可交互的。你可以尝试输入任务、添加任务、标记完成，看看它是否符合预期，如图2-39所示。

图2-39 最终生成的待办事项应用预览

🔎3.你是导演，不是乘客：如何与SOLO协作

即便AI功能强大，它也终究只是工具。用户才是真正的“导演”，拥有最终的决定权。TRAE SOLO模式的精髓在于让用户能像与团队成员沟通一样，轻松与AI协作，持续打磨作品。

🦋1. 迭代与微调

你的第一个“待办事项”应用或许已经很出色，但总会有新的想法冒出，比如想增加一个“删除任务”的功能。你不需要去修改代码，只需要像和TRAE SOLO聊天一样，告诉它：

【提示词模板】

TRAE SOLO会精确理解你的意图，自动更新“蓝图”（PRD），然后再次进入自动化工作流，实现这个新功能。这种“对话式”的迭代让修改变得异常简单。图2-40所示为添加了“删除任务”功能后的项目结果。

图2-40 添加“删除任务”功能后的项目结果

除了通过对话修改功能，TRAE SOLO还有一个 “选择并编辑” 功能：在浏览器预览窗口的右上角单击“选择元素”按钮，然后用鼠标选中要修改的元素（如网站标题），再在聊天框中直接下达指令“把这个标题的颜色改成蓝色”，如图2-41所示。

图2-41 使用“选择并编辑”功能修改元素样式

TRAE SOLO会立即理解并实时更新底层代码，让你在预览窗口中直观查看修改后的效果。这就像一个可视化编辑工具，可直接在“画布”上调整界面，无须关注背后的复杂代码。

TRAE SOLO的“选择并编辑”功能弥合了UI设计与代码实现之间的鸿沟，实现了真正的“所见即所得”开发。这种直观的视觉编辑能力，让设计师和产品经理能够直接参与原型和界面的精确调整，而无须依赖开发人员。这大大加快了设计迭代和产品验证的速度。

🦋2. 保持控制权

尽管 TRAE SOLO模式高度自主，但TRAE始终将“掌控权”交由用户保管。在界面左上角，有一个可以随时切换“SOLO模式”与“IDE模式”的开关。“IDE模式”即传统的集成开发环境，如果你具备编程基础，或需手动修改AI生成的代码，这个模式便能派上用场。需要注意的是，AI在响应过程中无法切换模式。

AI再强大，人类的专业知识与细节把控仍不可或缺。这种切换机制允许你在需要宏观自动化时使用SOLO模式，在需要微观精准控制时无缝切换到IDE模式手动干预。这种灵活性模糊了“开发者”和“非开发者”之间的界限。

对于非技术用户，可以从SOLO模式起步，逐步了解代码，并在需要时尝试在IDE模式下进行简单修改。对于有经验的开发者，可以将重复性工作交给AI，集中精力聚焦复杂架构设计与核心逻辑实现。

在了解了SOLO之后，我们来介绍另一款功能互补的强大工具。

🔎4.【进阶】为何需要 Cursor

现在，你已经掌握了TRAE SOLO这位强大的“AI工程师”，可以从零构建项目了。但现实中，有时无须从头搭建，而是要对已有的复杂项目做精密改造或修复。这时，就需要另一位AI专家——Cursor，它更像一位“代码外科医生”。

Cursor是由Anysphere公司开发的一款AI代码编辑器，它不是一款普通的代码编辑器，而是将先进的AI技术深度融入编程流程。

Cursor基于 Visual Studio Code构建，但新增了强大的AI能力：能够理解整个代码库的上下文、提供智能的代码建议，更支持自然语言编程——用简单语言描述想要的功能，Cursor就能生成相应的代码。

TRAE SOLO和 Cursor的功能有交集但各有侧重，互为补充。

• TRAE SOLO：像“AI工程师”，擅长从零开始，根据用户的高层级指令自动规划、设计、建造全新的软件项目。它非常适合快速启动新项目、非技术人员原型开发、全栈应用从概念到部署。
• Cursor：像“代码外科医生／修复专家”，它的强项是处理已有的庞大复杂的代码库——在需要对代码库进行精密的跨越文件修改、诊断修复深藏其中的复杂bug时，它能大显身手。

简单来说，TRAE SOLO是“创造者”，降低了新项目启动的门槛；Cursor是“维护者／优化者”，提升了已有复杂项目的管理效率。初学者可以从TRAE SOLO起步，随着对软件开发的理解加深，或者开始接触现有的复杂项目时，Cursor会成为他们进阶的强大工具。

表2-4对TRAE SOLO和Cursor的核心差异进行了对比，可帮助你选择适合的AI开发伙伴。

表2-4 TRAE SOLO和Cursor的对比

接下来，我们介绍Cursor的三大特有优势。

🦋特有优势1：如手术刀般精准的“代码库上下文”理解

Cursor的核心能力之一是能深入理解整个项目——不仅能查看当前打开的文件，还能掌握整个代码库的结构和文件之间的关系。更重要的是，它支持通过 ＠符号 精确指定AI的“焦点”。例如，通过＠codebase让AI理解整个项目，通过＠myFunction让AI只关注某个特定的函数。

这种显式的＠符号机制，能帮助用户主动缩小AI的关注范围，提升AI理解的准确性和生成代码的可靠性。

接下来我们通过一个简单的实战，直观感受这一能力。

1. 将TRAE SOLO生成的“待办事项”应用的代码项目直接导入Cursor中。

接着输入“＠addTask这个函数的作用是什么，在哪里被调用”，Cursor会立即定位到addTask这个函数（如果代码中有的话），解释其作用并告知调用位置。

打开Cursor后，按下Cmd/Ctrl+L组合键打开AI聊天面板，输入“＠codebase 请用一句话总结这个项目的功能”。

🦋特有优势2：大规模、跨文件的“代码重构”

如果需要在几十个文件中修改同一个词语，手动操作烦琐且易错，但借助Cursor的Composer功能（快捷键为Ctrl/Cmd+I），只需一句话就能下达复杂的跨文件修改指令。

例如，“将项目中所有使用旧版API的地方，全部更新为新版API格式”。AI会规划所有文件的修改，并以清晰的“差异对比”视图呈现，供用户逐一确认。

这种AI驱动的重构能力，能通过对整个代码库的理解，自动识别并修改所有相关联的代码，从而确保修改的完整性和一致性。这种能力对于维护大型复杂软件系统至关重要，可显著降低技术债务，提高代码质量和开发效率。

接下来，我们再通过一个简单的实战，来体验这种强大的重构能力。

1. 按下Ctrl/Cmd+I组合键打开Composer，输入“将“待办事项”在整个项目中全部替换为“任务清单”，包括文件名、函数名和界面文本”。

观察AI识别的待修改文件与具体建议，确认无误后点击Accept All按钮，所有修改就会瞬间应用到项目中。

🦋特有优势3：人机协作的“深度调试”流程与MCP集成

在软件开发中，最让人头疼的莫过于调试bug。Cursor在这里扮演了“侦探”的角色，它提供了一套强大的人机协作调试流程。

1. 指导AI插入日志。发现bug后，可以告诉Cursor：“请在相关函数中添加console.log语句，追踪任务的状态变化。” AI会自动添加日志。
2. 复现bug并收集线索。运行程序，尝试重现bug，并收集程序运行过程中生成的日志信息。
3. 将线索提供给AI。将日志信息粘贴到Cursor聊天框，并提问：“这是运行日志，问题出在哪里？请帮忙修复。”
4. AI分析并修复。Cursor会结合用户提供的真实运行日志分析问题根源，并提出修复方案。

这种调试流程强调“人机协作”与“真实世界反馈循环”，AI不仅仅基于代码推断问题，更能结合程序在实际运行时的行为数据进行诊断。下面继续通过一个简单的实战，来体验这种强大的调试能力。

1. 在“待办事项”应用中故意制造一个逻辑bug（如标记任务完成后，任务没有从列表中消失）。
2. 在聊天框中告知AI：“任务完成功能有bug，请在相关函数中添加console.log语句，追踪任务状态变化。”
3. 运行应用，复现bug，然后将浏览器控制台的日志粘贴到聊天框，并提问：“这是运行日志，问题出在哪里？请帮忙修复。”观察Cursor如何分析这些“线索”，并提供修复建议。

这只是Cursor能力的冰山一角。后续文章将揭示Cursor更高级的形态：通过MCP，Cursor将能直接调用外部API，甚至控制电脑来完成任务。

🔎5.小结

通过本节的学习，你已经掌握了两款AI驱动开发的强大工具：TRAE（中的SOLO）让没有编程经验的用户也能像导演一样，将想法变成现实；Cursor则像精准的代码外科医生，帮助用户深入理解和优化复杂的代码。

无论是快速构建原型，还是深入解决复杂问题，这些工具都极大降低了软件开发的门槛，让零基础的用户也能成为创造者。

现在就去尝试TRAE SOLO，用第一个项目开启你的AI开发之旅。你会发现，创造从未如此简单，乐趣也从未如此丰富可期，专属的AI工作台已为你就绪。