我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.ai/
🚀 体验 Trae 赢 Macmini
一、Trae是什么
Trae 是字节跳动于2025年1月20日发布的一款AI驱动的集成开发环境（IDE）。
简单归纳一下三个特点：
- 集成顶级基座AI模型： Claude 3.5 与 GPT-4o 可以免费使用非常难得，不过我试验过只能回答和编程有关的问题
- 基于VSCode进行二次开发： 学习成本低 + 插件复用
- 同类竞品： Cursor 其实功能差不多，但是胜在免费，而且国人开发很落地
具体内容请看官方文档：Trae - 文档
二、Trae的主要功能
我们可以Trae理解为一个植入了AI能力的VSCode使我们能够与AI进行紧密配合完成编程任务。 结合方式可以归纳为以下三种
1. 智能问答模式
这种模式其实就是AI工具中的chat模式，不同之处是在Trae中可以方便的引用各种资源充当上下文。
比如 xxx.js 如何改进？aaa函数如何更改
上下文的分类
能够引用的上下文归纳如下：
多模态支持
多模态指的是上下文中不但可以引用代码、自然语言，还可以支持截图、设计稿、参考样式图等多种类型。
比如后面会用到将设计稿还原为UI界面，就需要这个功能。
4. Builder模式
下面来讲一下 Builder 模式这个模式也是最长使用的一种模式。 Builder 模式下，AI 助手会主动读取当前项目中的文件内容，拆解任务并逐步执行，包括：
- 提取相关上下文
- 创建或修改文件
- 生成并运行终端命令
- 分析命令运行状态 其实也就相当于将你的自然语言转化为行动，并且将这种行动可视化表示，提交给你进行审批，当你审批通过后直接执行。
举个例子： 你想把 http.ts 文件加一个注释。
- 发出命令： # http.ts 加注释
- 产生行动： Trae通过AI将代码添加相应的注释并用绿色背景标注。
- 提出审批： 在命令行中发出一个审批的按钮，等待你确认后，将代码进行实质性修改。
此外也可以考虑局部接受功能
5.代码补全功能
这个功能和Github Copilot类似。他的应用场景因该是代码的微调 具体分为以下两种：
- 自动代码补全： 根据上下文补全代码
- 注释补全： 根据注释完善代码
p9-arcosite.byteimg.com/https://p9-…
这个不是什么新功能
二、Trea全栈开发实战
这次我准备尝试用Trae开发一个NodeJS栈的中后台系统。 选择这个主题原因有两个：
- 中后台系统应用广泛但没啥技术含量，非常希望能让AI替代自己的工作
- 中后台系统参考资料较多，不属于冷门应用，应该比较好通过AI生成
既然是360度体验我们就按照软件的生命周期进行
1. 可行性研究
在这个阶段，主要任务是确定一个基础技术方案，内容涵盖：
- 服务端采用何种框架
- 前端选用什么框架
- 使用哪类数据库
- 挑选哪个组件库
当然，确定技术方案不能仅仅依靠向 AI 询问这些问题。我们还需要参考他人的代码，并且自己搭建一个小型的 Demo 代码进行实际体验。在此过程中，我们可以借助 AI 来提升效率。
1.1 代码架构解读
在这个阶段，往往都会从github上找一下别人的项目来参考，那么如何高效的阅读代码就成为一个问题。 这时就可以让 Trae帮忙。
首先可以让Trae给我对整个项目的技术栈做一个分析
开发模式：智能问答模式
提示词例子：#Workspace 生成一份前端部分的技术文档
1.2 代码用法解读
然后可以针对某一个技术点进行解读，然后标出他的位置
开发模式：Builder模式
提示词例子：请在项目中找到 @bytemd/react 调用的代码
1.3 编写Demo
接着我的习惯是会把学习到的东西变成一个可以运行的代码段，放在demo文件夹中方便在正式开发时使用。 这个动作也可以让Trae帮忙。
开发模式：Builder模式
提示词例子：请在项目中找到 @bytemd/react 调用的代码，仿照编写一个demo放在demo文件中
2. 需求分析PRD
需求分析部分主要是文档工作，实际上Trae不只是可以生成代码，也可以完成文档。 只要让他输出markdown格式就可以了。其实这种admin不是什么新鲜的系统。在AI的知识库里面已经有成千上万个这样的系统。只要要求足够具体在这种项目中百分之八十的内容都是直接可用的。
开发模式：Builder模式
提示词例子：请生成一份关于Admin中后台系统的需求文档放在 /doc 文件夹中
另一种方法是根据代码反向生成需求文档。
3. 设计
设计稿 By 自然语言
下面是设计阶段，由于AI大模型并不能直接生成UI。这里面我们采用直接生成HTML代码的方式来完成设计稿的开发。这种设计稿可以截图甚至于可以利用原型工具中的HTML转UI功能转换为原型。
开发模式：Builder模式
提示词例子：请生成一份关于Admin登录页放在 /ui 文件夹中
还可以进行调整比如将按钮变为圆角
数据库设计 - By自然语言
在数据库设计阶段，Trae也很方便只需要让他生成就可以了。文档格式为md格式。
开发模式：Builder模式
提示词例子：请生成一份关于Admin的数据库设计放在 /doc 文件夹中
生成ER图
ER图可以根据上面的数据设计生成，ER图会用mermaid格式表示，所以需要md安装相应的插件才可以预览。
开发模式：Builder模式
提示词例子：根据 #数据库设计文件 生成ER图 /doc 文件夹中
4. 开发制造
4.1 搭建项目
首先创建一个项目
mkdir react-admin
cd react-admin
开发模式：Builder模式
提示词：创建一个monorepo风格的项目,
前端：react + arco-design
服务端：nestjs
系统会生成一套脚本，提示你去运行相应的脚手架创建项目。 你只需要按照点击【运行】就可以了
最后创建完成的效果
4.2 UI还原
进行 UI 还原工作，可以借助上述四种方式。不过，鉴于 UI 包含的细节极为繁杂，想要一次性生成完美的还原效果是很困难的。
从实践经验来看，较为理想的操作方式是先依据 UI 设计或原型，搭建出一个基本框架，之后再利用自然语言进行细致调整。
综合而言：
- 依据原型或设计稿：这种方式还原精度较高，优先予以推荐。
- 依据图片：其还原精度相对较低。
- 依据自然语言：此方式适合在后期进行微调。
4.3 编写逻辑
编写逻辑可以首先用【Build模式】创建文件然后使用代码补全模式，编写注释添加和迭代功能。
开发模式：补全模式模式
提示词：< XXX功能的描述 >
5. 测试调试
在测试调试方面可以：
- 创建测试用例
- 通过自然语言描述修改Bug
开发模式：Builder模式
提示词例子 编写 #xxx.js 文件的单元测试
6. 部署、投产
6.1 文档完善
这个和前面提到的需求分析部分文档编写差不多。差别是这里面一般都是根据现有的代码反向生成文档。
开发模式：智能问答模式
提示词例子：#Workspace 生成一份服务端接口文档到 /doc
6.2 CI、CD脚本
生成脚本，我这个项目使用Docker部署，并且利用Github Action做CI。这两个脚本都是基于Trae自动生成。
开发模式：Builder模式
提示词例子：创建Docker-compose文件 包含前端运行在Nginx、服务端、数据库，
开发模式：Builder模式
提示词例子：创建github Action脚本将前端、服务端进行编译后，推送到Dockerhub
三、感受
经过一个项目的体验，我认为在编程领域Trae做到了AI系统的落地。相比以前简单的AIchat方式是一种体验升级。 尤其是我认为Build模式非常的好用。具体总结如下
| 场景 | 模式 | 体验 | |
|---|---|---|---|
| 可行性研究 | 技术难点 | 对话模式 | 😁 非常有帮助 |
| 代码解读 | 对话模式 | 😁 非常有帮助 | |
| 原型代码 | Build模式 | 😁 非常有帮助 | |
| 需求分析 | 编写文档 From代码 | Build模式 | 😁 非常有帮助 |
| 编写文档 From 自然语言 | Build模式 | 😁 非常有帮助 | |
| 设计 | 设计稿 | Build模式 | 😁 非常有帮助 |
| 数据库设计 | Build模式 | 😁 非常有帮助 | |
| 开发 | 搭建项目 | Build模式 | 😁 非常有帮助 |
| UI还原 | Build模式 | ✅ 一般 | |
| 编写逻辑 | 代码补全 | ✅ 一般 | |
| SQL编写 | Build模式 | ✅ 一般 | |
| 重构代码 | Build模式 | ✅ 一般 | |
| 测试调试 | 测试用例 | Build模式 | ✅ 一般 |
| 修改Bug | 代码补全 | ✅ 一般 | |
| 部署投产 | 文档完善 | Build模式 | 😁 非常有帮助 |
| CICD脚本 | Build模式 | 😁 非常有帮助 |
