三个锦囊妙计！
三计连环，方显神通：Work 里理清的需求，切到 Design 直接变成设计稿；设计定稿之后，再结合 Code 模式转化为代码与研发任务。
✦全文约 2242 字阅读需 5 分钟观猹编辑部最近更新 2026.08
《三国演义》中有个桥段：话说那诸葛亮派赵云护送刘备过江，临行前交给他三个锦囊妙计，最后刘备娶了媳妇也安全返回荆州。由此诞生了千古吐槽名句：周郎妙计安天下，赔了夫人又折兵。
今天，TraeWork 也给了我们三个锦囊妙计：Work、Code、Design 三种模式。
01锦囊一 · 新时代的 Office！#
我愿称之为万能通用的默认模式。以前我们用 Office 三件套，现在我们用 TraeWork 的 Work 模式。
说白了就是，之前我们主要在 Word、Excel、PPT 上干的活，现在 Work 模式包圆了，都能干。
所有的文档生成、内容创作，表格处理、数据分析，PPT 生成，都能干。
看这里推荐的功能就懂了～
Work 模式覆盖日常文档、数据、网页与演示任务
AI 时代，HTML 格式变得炙手可热。
文档也好，表格也好，PPT 也好，现在都可以用 HTML 网页展示，可以多去尝试一下。
术语卡
HTML：简单理解就是你常看到的网页。一种标记语言，用一对对标签包裹文字、图片等内容，告诉浏览器每个部分是什么，浏览器据此渲染出你看到的网页。
没有灵感的时候，也可以去 TraeWork 的模板库看看，学习学习。
模板库可以按任务类型寻找现成案例
可以在线预览效果，看到不错的，也可以直接点击做同款。看看这种效果是用什么插件，下了什么需求做出来的。
先预览结果，再查看插件与需求并做同款
登录后查看完整内容
这节课的后续内容仅对登录用户开放，登录观猹账号即可继续阅读。
02锦囊二 · 新时代的 VS Code！#
新时代的 AI 开发者，都不再手搓代码。申遗
写代码的工具，也从 VS Code 变成了 Agent（不懂 VS Code 是啥也没事，不流行了）。
具体能干啥？同样的，看看点点 TraeWork 给你推荐干啥就大概知道了。包括开发项目、代码仓库解读、做网页小游戏、写自动化脚本等。
Code 模式适合项目开发、代码理解与工具脚本
让 Agent 做开发花的时间还是相对比较长的～如果你完全不懂代码，也根本不用担心，不用畏难，大胆上手试试。
如果你是高手，也可以基于 TraeWork 做出来的 Demo 在本地其他 IDE 中打开。
术语卡
Demo：直接翻译就是「演示」，大白话就是打个样。把一个产品、功能或想法用最直观的方式，先展示出来给别人看。比如你想做一个 App，先做个简化版让别人体验操作流程，这个简化版就是 Demo。不追求功能完整，重点是让别人快速看懂、感受到这东西是干嘛的、好不好用。
项目可以继续在本地 IDE 或终端中打开
如果你觉得 AI 有时候生成的网站有点土，或者有点 AI 味，那不妨就去下一章节 Design 模式看看哈哈哈。
03锦囊三 · 新时代的 Figma！#
这两年，我下载体验过的 AI 设计的产品，可能比大部分屏幕前的朋友听过的还要多十倍。大家基本都是借助 AI 在解决平面设计、UI 设计中的效率问题。核心是做得快不快，好不好看。
TraeWork 里的 Design 模式也是在尝试解决类似的问题，但它不臃肿，更低门槛，更容易上手。
Design 模式用自然语言开启设计任务
TraeWork Design 模式最牛逼的一点是，开源了许多优秀的设计素材，供你学习，供你的 Agent 学习。
优秀素材既给人参考，也能成为 Agent 的设计上下文
对于专业的 UI 设计师来说，可能觉得没啥。但是对于设计小白来说，还是超级惊艳的。
点开内置的这几个设计系统你就知道了，看完我觉得我也能应聘宇宙大厂字节跳动了 bushi
内置设计系统把常见产品规范整理成可选上下文
在 Desgin 对话框这里，点击这个像多功能瑞士军刀的按钮，选择特定的设计系统。
你做的产品，也能像 TraeWork、抖音、豆包这样规范、美观了。
在对话框中选择具体设计系统
Design 模式核心就三个牛逼的功能：
一
对话即设计
你用自然语言描述你想要什么，它直接生成完整的设计稿。
二
画布即原型
生成的设计稿支持可视化编辑、页面跳转、连线标注这些原型能力。
画布既是设计稿，也是可交互原型
三
Design to Code
设计稿可以直接导出为文件或者代码，还可以切到 Code 模式继续开发。
设计定稿后可以直接进入 Code 模式
04三计连环，方显神通！#
第一个测试：做一个观猹的七夕版 Token Card。
最近需要一套 Token Card 的不同节日的视觉方案，正好用这个，感受 TRAE Work Design 的审美边界。
先在 Work 里上传了 TokenCard 上次端午节的卡片设计，让它帮我生成一个网页设计稿：
先让 Work 模式整理七夕版卡片的网页设计方案
稍等一会儿，它生成了一个完整的 HTML 页面，作为设计方案的载体：
HTML 页面承载完整设计方案
点开网页，可以看到它的配色方案和设计理念：
配色、材质和视觉意图都先被说清楚
还生成一个可可爱爱的概念稿。
Work 阶段产出的卡片概念稿
然后来到 Design，让它基于这个设计方案和观猹的 Logo 生成完整的卡片设计：
把 Work 里的方案直接交给 Design
大概十几秒，一张完整的卡片设计就出来了。
七夕版 Token Card 完整设计
第二个测试：走完一个产品插件原型的完整流程。
具体是想做个这样的功能：做一个浏览器插件入口，让 AI 自动帮我搜集素材、生成快捷的观猹上的「猹评」素材，然后我基于素材按照我的风格微调一下，看有没有可能降低我日常发帖的操作成本。
这个测试特意没写 PRD，也没找设计师，想验证一个产品经理能不能靠 TraeWork 独立跑完全程。
我先截了一张观猹的页面，然后让 TraeWork 帮我生成一份设计规范：
先用真实观猹页面提炼设计规范
接着，我下载了这个设计规范，接着导入到设计系统。
这样，后续 Design 模式在设计时，就会完全遵循观猹网页的设计风格：
把设计规范作为后续页面的统一约束
然后进入正式设计，非常简单，也没有写任何 PRD 文档，直接在对话里用口语的方式描述了这个功能的逻辑。
直接用自然语言说明插件流程
然后 Design 就开始设计这几个页面的设计稿：
Design 根据规范生成多个插件页面
等了十分钟，它就根据观猹的设计规范设计出了四个原型：
四个连续页面形成完整操作原型
如果对按钮的位置不满意，可以直接点击「添加到对话」，在对话框里描述想修改的效果，然后就可以对生成的效果进行二次编辑，操作非常的丝滑。
选中具体元素后，可以继续通过对话修改
不止如此，这个设计出来的内容，还可以一键导出 Figma 文件。
相当于什么呢？刚刚一句话加上一个产品设计规范，用 Design，它就相当于完成了我在 Figma 上吭哧吭哧至少一下午的工作了。
原型可以继续导出为 Figma 文件
然后更有意思的是，我没有让它生成 Figma，而是直接点了上面的按钮：
它就帮我把这套设计稿，直接导入到 Code 模式，让它继续基于原型直接开发了！
不导出文件，直接把原型交给 Code
等待不到十分钟，TRAE Work 就直接生成了对应的插件代码。
Code 模式生成插件实现
生成完成的浏览器插件项目
然后把代码导入到谷歌浏览器插件里，它竟然直接就能在观猹里用来发帖了！
插件进入浏览器后直接在观猹页面中运行
整个过程大概花了不到 35 分钟。
这效率提升，就是 TraeWork 组合拳，达到的效果！
05互动题目#
Q.01在 TraeWork 中，三大板块不存在哪个模式？
Q.02在 TraeWork Design 模式中的画布里，“在 Code 模式中开发”这个功能入口在哪里？
Q.03在 TraeWork Code 模式中，不主流推荐使用的操作是？
