实测TRAE Work Design模式，可迭代、可交付、可复用！|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 设计等等也都可以。

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

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

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