TRAE 把 Work 和 Code 两条产品线合成一个产品，让 Agent 工作台与 IDE 合二为一：前者聚焦 Vibe 创造体验，适合与 AI 讨论需求、打磨设计；后者保留类 VS Code 的编辑器体验。作者用一个 Gmail 换肤插件走完了全链路流程。

问：什么时候「1 + 1 < 2 但 > 2」？

TRAE 的新版本答案是：

把 TRAE Work 和 TRAE Code 合成一个产品，让 Agent 工作台和 IDE 合二为一。

时至今日，Agent 赛道早已白热化。

ChatGPT、Claude Code 依靠原厂模型优势，收敛全球用户；国内各大厂推出 XX 办公产品，瞄准打工人办公场景；Muse、Dots 等新贵，更加激进，想替你订酒店、机票、搞定生活大小事。

从 Coding 起家的 TRAE，决定了他们接下来的方向：

继续聚焦 Coding 场景，让开发这件事更顺手。

不管你是出于兴趣做点玩意儿，还是一个人包办产品、设计和开发，或者专业工程师指挥多个 Agent 实施大型项目，都是它想服务的人群。

为了体验 TRAE 的全链路开发流程，我用 TRAE 做了个 Gmail 换肤插件，请看 VCR ⬇️

顺便在后文，向你分享 Vibe Coding 的流程思路。

01 Work、Code 产品线二合一

TRAE 这次改版，最大的变化是面对用户既要专注于对话的 Vibe 体验，又离不开 IDE 界面查看源码的习惯，收拢了他们的产品线，把 Work、Code 两种产品统一在了一起。

你可以在新 TRAE 里按需切换操作界面：

• Agent 工作台：源自 TraeWork
• AI IDE：继承自 TraeCode 的 IDE 界面，在同类 IDE 中交互体验优异

前者聚焦 Vibe 创造体验，提供 文档生成、设计系统管理，以及各类插件、Skill、模板，适合与 AI 讨论产品需求、 打磨 UI 设计、开发新产品，适合小白开发者上手。

后者提供类 VS Code 的 AI 编辑器体验，有熟悉的 Git、编辑器扩展，右边也留着 AI Copilot 对话栏。看不懂某个文件，或想问问这段代码为什么这么写，都可以在旁边直接问。

甚至还能启用 IDE 中的 Agent 插件，让不同 Harness、不同模型对同一项目接力。

不少开发者在 AI Coding 的时候，习惯了一个屏幕开着 Agent 工作台，一个屏幕还得开另一个 IDE 和终端。

现在你用 TRAE 来做主力 Coding Harness 时，不用额外开 IDE APP 了。在 Agent 界面点击「IDE」，就能自动打开当前项目的编辑器界面；反之，IDE 界面点「Agent」，也能打开回到 Vibe 对话界面。

并且，在新 TRAE 中，Agent、IDE 界面的 AI 对话是同步的，同一段 AI 对话，可以从两个界面进入，切换后还能接着聊。

所以 Coding 时开着的 APP 进程、交互链路 1 + 1 < 2；但又在需要双开时，有了 > 2 的体验。

（不如，我们把新版 TRAE 叫做 TRAE Duo 吧

02 TRAE 的全链路开发流程

目前，TRAE 主打三类人群：

除了 IDE 界面，还内置了很多全链路开发流程用得上的工具，比如文档、白板、设计系统。但都藏的很深，感觉缺了些教程引导，不然还是用起来挺方便的。

比如我用 TRAE 做了套 Gmail 换肤插件，向你分享大致流程。

1 一些用得上的插件、配置

开始前，先在插件市场安装 3 个插件：画板、设计画布、浏览器控制：

• 画板：负责给 AI 可视化向你呈现它写的方案，保护前额叶，强推
• 设计画布：在设计阶段展示高保真视觉稿
• 浏览器控制：因为产品的功能主要是网页样式识别与改造，所以网页元素识别与测试需要浏览器自动化

然后搞个空的文件夹，指定 AI 在里面出方案、写代码。

2 第一段 Prompt

现在做产品，特别是独立开发，我已经很久不写需求文档了。

所以第一条 Prompt 比较重要，需要大致讲一下 AI 要和你努力的共同目标，并让 AI 从模糊目标起步，先向你问清楚只有“你”才能定的要求。

提示词好习惯：如果一开始就知道哪些要求是必须的，也请在一开始就说清楚，减少 AI 和你的拉扯。如果不确定，就不要用陈述句，而是说“我有个模糊的要求，不确定对不对，但我偏向 XX，你可以反驳我”。避免 AI 把你的话当做绝对的，限制整体方案规划。

发出去之后，AI 返给你计划，来问你一些问题

请至少把自己当下能想清楚的问题好好回答。不确定的就说不确定，也可以让 AI“每种方向的方案都试试，让我做选择题”，譬如：

3 设计系统的使用

安装设计画板后，你就能用到 TRAE 内的设计系统，由配色板、icon、组件、使用规范组成，已经预置了不少知名大厂的设计风格。

如果其中有你喜欢的风格，可以直接用，能够有效统一每次 Vibe Coding 的设计产物风格；如果没有，也可以和 AI 沟通，先磨出一套你喜欢的项目样式，为后续的其他产品服务

我自己做开发的时候，在项目开发相对稳定后，也会让 AI 抽取并维护成一套 Html 格式的设计画板，提前规定好各种配色、字体等，例如：

另外再配上用户画像、设计系统使用规范两份文档，就能快速让 AI “模拟用户画像的心理，思考用户在这一步的心理与期待，按照设计规范设计 XX 功能的交互与视觉体验”，做出各种新界面模块。

这点操作虽然不难，但由于确实过于细节，大部分网上的分享也都比较少提及，导致其实不少人都还没用上这个操作。建议即使是凭兴趣做 vibe coding 的朋友，也可以留意着试试。

一切输入给模型的都是上下文，一切上下文都是给模型的提示词。有了设计系统的输入，自然能让模型做的更加规范统一。

4 如何与模型更好的共识方案

1）产品、技术方案：画白板

在和模型对方案，达成共识的过程中，最头疼还是 AI 给你洋洋洒洒写了上千字的方案，你脑子被灌得云里雾里，只能下意识反应一句：“哞？”

那除了“说人话”、“画个可视化 html”这两个 Prompt 外，直接画白板也是一个常用的技巧。

在 TRAE 装了画板后，你可以要求 AI “用画板给我讲解方案的 XX 实现原理/流程”，它就会给你把方案的关键之处，用示意图体现出来。

比起常规的 html 可视化，AI 在画这类白板时，可以绘制更轻松地画出复杂、细节的形状，而且体感绘制速度更快、自作聪明的废话注释更少，带来更简洁、易懂的示意效果。

2）视觉设计：用设计画布，直接出高保真 Demo

在 TRAE 中，视觉设计方面，可让 AI 直接在设计画布画出高保真前端原型。

射箭总得先有个靶子，就算不用自带的画布，无论是 html 也好，直接上 react 原型也罢，都是所有带前端的产品进入正式开发前，务必要完成的环节。

一般在项目初期，建议你多给模型参考项，让模型给你做选择题：

• 给参考：“我们在做这个产品，有哪些优秀产品？可先调研参考他们的样式布局，再推导适合我们的视觉方案”
• 做选择题：“先发散着做出几套不同风格方向的原型，方便先确定我们偏好的设计方向”

由于一开始就要求了得在开发前给我一版样式 Demo：

所以 TRAE 直接在设计画布里给出了一些不同的方案，一次性呈现在了画布里。

后面让 TRAE 改进、整理出来后，大概有这些选项，最终选的是第一套：

而这些方案、设计模板，以及后续的代码内容，都会放在最初设定的文件夹，在切换到 TRAE 的 IDE 模式时，就能够进行更深入的编辑、git 管理等了。

另外，值得一提的是，TRAE 在交互上做了个小巧思：与 Codex 变侧边面板为浮窗不同，TRAE 可以把 Agent 对话变为悬浮窗口，使得人可以边看更大的画布，边输入自己的要求。

5 开发与测试收尾

基本上经过前面的方案与设计阶段，一个项目的靶子也就立的七七八八了。

好习惯+2：推荐在 Vibe Coding 正式开工前，习惯性多嘴问一句 AI：接下来还需要做什么、有什么遗漏的需要确认吗？

这个环节往往能根据 AI 的自检与提问，再做补充一些细节决策。

当需求目标、业务逻辑、设计原型、技术栈、资源库与开发架构都确定完事后，就可以让 AI 开工。

而后便是枯燥的刷着手机等 AI 完成全栈开发，并督促 AI 改 bug 的过程

因为网页换肤类的项目往往涉及到略复杂的 DOM 结构处理，前前后后还是花了不少 token 处理 bug，这边就不多赘述踩坑细节。

最终磨出来的插件效果如下：

相较原版 Gmail 丑丑的样式，你看是不是好上了不少？

And 理论上你也可以参考这套流程，为任意网站开发换肤插件。

我也顺手用生图模型做了一些像素素材，另做了一个像素邮局风格的主题

得到了以下效果：

最终，再找了 opus 5.5 写了个视频，就有了你开头看到的那支产品片子 ⬇️

其他想说的话

其实我也是 TRAE IDE 的老用户了。25 年初，当时最火的 Agent 形态就是 AI IDE，国外 Cursor、Windsurf，国内有 TRAE。

因为 TRAE 是当时一众 VSCode 类 AI IDE 中界面最舒服的，就用 TRAE 做了自己第一个独立小产品。

经过了各类 Agent 层出不穷的市场阶段，相比各种「一键发布产品到网页」，Coding Agent 能做的、被用户期待做好的事情依旧不少：

• 如何让小白开发者少踩点坑，轻松用上专业的开发流程？
• 如何让专业工程师更省力地指挥多个 Agent？

都是这类 Coding 产品接下来值得继续打磨的地方。

之前让我选择 TRAE 的，是用起来舒服。

希望 TRAE 这次二合一后，也能把这份顺手，延伸到开发的更多环节。