实测TRAE Work Design模式，可迭代、可交付、可复用！

嗨大家好！我是阿真！

TRAE Work 刚上线了 Design 模式，群友就火速召唤我去体验了，我已测试了大部分功能，先来向大家汇报了。

之前朋友问 TRAE 的各个分支，这里放一张图帮助大家理解

今天要分享的 TRAE Work Design 模式，上手操作简单，修改也容易，可以使用自己的设计系统，效果不说一步到位，至少给到一个完整且逻辑清晰的 Demo 不成问题。直接生成图片配图也方便。

用 AI 做项目，经常会遇到一些卡点。比如需求在一个工具里，视觉稿在另一个工具里，原型又在第三个工具里，到代码又要回到开发环境。换一次工具，要重新解释背景、重新对齐风格，最后还要靠人去把需求、设计和开发重新进行串联。

TRAE Work Design 模式的目标，是把这条链路尽量放回同一个平台里。在 TRAE Work 里从 Work 切到 Design，再切到 Code，链路清晰。

也就是说，我们可以先在 Work 梳理需求，再到 Design 沟通和修改设计稿，最后让 Code 代码实现。整个过程都可以用非常简单直观的语言，和它去沟通修改。

我尝试让它制作了一套蛋糕店的官方网页和 APP 原型，感兴趣的话，我们一起来看看。

一句话成稿

我们打开 TRAE Work 后，顶部最明显的是三个模式入口：Work、Code、Design。这里可以把它理解成一条连续生产线：Work 负责需求和任务上下文，Design 负责把需求变成设计稿和原型，Code 负责继续落到代码实现。

Design 模式上线后，TRAE Work 的专业场景进一步扩大，把需求分析、设计稿、原型和代码也都放进了同一套上下文里。我们不用学多套不同的复杂工具，就能先把想法推进到一个可讨论的页面。

左侧栏里有几个常用入口：【新建任务】用于从需求开始生成设计；【技能】可以用于调用已有能力，Buff 叠加；【设计系统】用于管理设计规范。

主页下方有三个预设，它会给出参考示例，可以做设计还原，可以从概念直接生成视觉稿，也可以基于设计规范输出页面。对经常需要快速验证想法的人来说，这一步很重要，因为它可以快速把“我脑子里的想法大概是这样”变成了“我们先看这一版”。

设计系统

设计系统会决定 AI 后面生成设计时参考的规范。如果不参考的话，直接【自由探索】也可以。

点击任意内置的设计系统，可以查看到主题、组件、图形和设计规范的详情。也可以通过右上角【添加设计系统】来自定义自己和企业的设计系统。

设计系统的添加方式有多种。直接解析 Figma 文件、导入已有的 TRAE Work Design 设计系统文件，或者通过描述视觉风格创建设计系统都可以。

或者做完一套视觉稿以后，直接让它把这套视觉，生成设计系统。

已有相关的视觉规范 Skill 也可以这样存，下次调用方便。

指定设计系统后，TRAE Work Design 会遵循固定规则生成，不再每次换风格、凭感觉信马由缰。

对团队来说，这一步很关键。AI 生成设计很多工具都可以做，但生成之后还要能保持品牌一致、组件一致、规范一致，能做到这点的目前就很少了。设计系统的意义，就是把团队已经沉淀过的审美和规则，变成 AI 可以调用的生产资料，即使人事变动，审美和规则也不会被个人带偏。

实时预览，画布即原型

比如，我想要为自己的 Skill 做一个快捷面板用于快速搜索和复制本地的 Skill，在生成视觉稿的时候选择【抖音】这个设计系统：

生成的视觉稿，会带上所选视觉系统的特征，比如这里的图标和配色等细节，就有抖音那个气质了。

我还尝试做了一个蛋糕店的网页和 UI 设计，下面是它生成的 UI 视觉稿。为了方便查看这里拼图了。

部分网页设计稿

除了这些，其他任何项目也都可以保持一致的视觉系统，比如前端设计或者 PPT 设计等等也都可以。

同样是从入口开始，先整理好需求文档提示词。就像之前示例的提示词那样，说明白需求就好。

• 1

我要做“精品蛋糕店在线预订 App：蜜屿蛋糕”，功能和设计要求如下：支持生日蛋糕、节日限定、婚礼甜品台、企业团购、门店自提、同城配送和自定义蛋糕，页面需要包含精选蛋糕、商品分类、商品详情、预约下单、定制蛋糕、会员优惠和订单状态，移动端要有首页、分类、定制、订单、我的几个核心入口；整体要有精品烘焙店的高级感和甜蜜感，商品图片要大且精致，加入蛋糕摄影、奶油纹理、切面细节和节日送礼元素，预约日历要清晰展示可选时间和剩余名额，先给我一个 HTML 原型看看效果。

也可以改成更详细的，可以直接在 Work 模式让 AI 优化后，自己再微调修改。

第一轮任务完成后，点击任务下方【产物汇总】的文件，就能在右侧以画布形式浏览所有设计结果了。页面会像设计稿一样铺开，你可以看单页，也可以看整组页面之间的关系。这个体验比单张图更接近真实原型，因为它让我们看到的不是单个的孤立界面，是一组完整的、可以继续推进的产品结构。

缩放看整体，拖动画布看具体页面，上方几个按钮可以预览、整理画布、显示或隐藏连线。效果满意了可以导出图片素材和设计文件。图片它会自行生成，如果有自己想要放的图片，也可以在画布顶端最后一个按钮选择自己导入图片。

多设备预览：

优化，可迭代式修改

生成以后，可以继续修改和优化。

修改方式有三种。

首先，我们可以直接在左边对话框要求它如何修改。这个适合要大范围修改的场景，比如整体换风格、调整色调、统一图标、优化字体层级，都适合用这种方式。如果信息具有时效性，也可以直接提出问题，它会自动检索并修改整个项目文件里所有相关的细节。

其次，可以悬停、点选或框选某个元素，把修改意见直接落到具体位置。这个体验有点像在文档里写批注，鼠标移动或点选视觉稿指定位置然后【添加到对话】，输入修改要求即可。

比如，不喜欢 Emoji 或者简约线形图标，可以更细节地直接描述你想要的效果，它会用更好的方式呈现。

浅色图片上叠加浅色文字影响识别性，可以增加半透明遮罩。

还有一种方式，那就是在右侧编辑面板里直接调细节。比如文字、位置、布局、圆角等。它不像完整 Figma 那么重，但足够完成很多初步修正。

真正进入工作流的设计工具，要能承接多轮的、反复的修改。

导出，接回生产链路

Design 模式最后一步，是把产物带走。满意的设计方案可以导出为代码、图片、Figma，也可以导出到 Code 模式，后续在 Code 模式中继续推进下一步。

上方点击直达：

本地验证里也能看到类似项目落点：Design 任务会生成 .design 文件、页面文件、片段文件和图片资产。它的定位已经超过灵感草图，更接近一个可以继续拆解、迁移和开发的项目包。

如果放到不同角色里看，它的价值也不完全一样。

对个人开发者来说，可以先把网页或 App 页面跑出来，再进入 Code 模式继续开发。对设计师和企业设计师，只要固定了设计系统，它很适合做多方案探索。对创业者来说，它可以快速生成官网、演示材料和产品原型，在非常快的时间内把讨论对象从想法推进到可视化的页面。

当然，AI 生成的结果依然需要人工把关。品牌细节、信息准确性、交互合理性、商业表达，以及人文关怀细节，都不能完全交给 AI 自动判断。它更适合帮我们缩短从空白到初稿的距离，而不是替代最终判断。

小结

这次 TRAE Work Design 模式真正值得关注的点，是它把 AI 设计放进了一个连续工作流里：需求从对话进入，设计在画布里生成，修改通过上下文继续，产物还能接到 Figma 和代码。过去 AI 更像一个灵感助手，现在它更像 AI 时代的产品工作台。

当设计系统、可视化编辑、原型关系和 Code 模式打通，未来 AI 设计的分水岭可能会是，看谁把一个想法更稳定地推进到可讨论、可修改、可交付。

好了，今天的分享就到这里啦。大家如果也有尝试 TRAE Work Design 模式，欢迎在评论区交流和分享。觉得这期内容有帮助的话，欢迎点赞、推荐、转发猛猛三连，这对阿真真的很重要～～！

下期见~