作者｜琪琪

编辑｜星奈

媒体｜AI大模型工场

你有没有遇到过这种情况——

让AI帮你做个页面，它唰地一下生成了一堆代码，浏览器里跑起来还挺像回事，但你一看就头大：配色不对、字号不对、按钮圆角也不对，页面很好看，但一点也“不像我们”。

现在AI设计已经不是什么新鲜事，但真正进入项目落地的却不多。问题不在于AI不会设计，而在于它不懂你的设计。

它不认识你的品牌色，不知道你的组件库，也不了解你的设计规范。它能自己挑配色、选字号、定组件样式，生成的页面单看确实不错，但一放进真实项目里，就和团队现有的产品风格格格不入，最后往往还得设计师重新调整、前端重新实现。

AI能生成页面，却很难生成属于你的页面。

最近体验TRAE Work新上线的Design模式时，我发现它试图解决的，正是这个问题。它把重点放在让AI理解你的设计系统，衔接你现有的设计规范和开发流程，把想法变成可交付的结果。

再加上原有的Work模式和Code模式，需求、设计、开发第一次被放进了同一个工作流里，真正打通了需求→设计→代码这条链路。

OK，话不多说，我们立马着手开测。

为什么TRAE Work要做Design模式

我发现，还有很多人分不清TRAE Work和TRAE IDE。

在开始测评之前，我先来简单解释一下，TRAE Work≠TRAE IDE。前者面向的是整个产品研发流程，覆盖需求、设计、开发；后者则是一款AI编程工具，更偏向开发者。Design模式，就是TRAE Work这条工作流中新加入的一环。

Design模式上线后，TRAE Work顶部变成三个并列入口：Work、Design、Code。Work负责需求梳理和任务上下文，Design负责把需求变成设计稿和原型，Code负责代码实现。

三者共享同一套上下文。你在Work里聊过的需求，切到Design直接继承；Design里确认的方案，一键导到Code继续开发。

这在以往是做不到的。以前做产品，需求在一个工具里写，视觉稿在另一个工具里出，原型又在第三个工具里搭，写代码还得回到开发环境。每换一次工具就要重新对齐背景、重新解释风格，信息在切换中不断损耗。

产品经理讲清的逻辑到设计阶段还得重复沟通，设计稿定稿了前端还得重新整理标注才能开工。TRAE Work Design的核心价值，就是把环节拉回同一上下文，减少信息折损。

实测：Design模式到底好不好用？

Design模式最关键的模块是设计系统，支持三种添加方式：导入Figma文件、导入设计规范、风格探索。

我把团队自有的品牌Figma组件库丢了进去，约二十分钟后自动提取出了品牌主色、辅助色板、标题/正文/注释三级字体、按钮和卡片的圆角阴影等组件样式，生成了一套完整的设计系统。

识别效果不错，色值、字号层级、组件结构都还原得比较准确，算是慢工出细活。对已有Figma资产的团队来说，不用从零搭建就能让AI认识你的品牌，这个能力非常实用。

接着，我在设计系统里选中具体组件，引用到对话中当参考，比如用这个品牌按钮样式，帮我做一个SaaS产品的定价页。

出来的设计稿就严格遵循了品牌规范，主色、字号、间距都对得上。

当然，手头没有Figma文件也不影响，Design模式内置了几套品牌设计系统，也支持自由探索模式让AI自行发挥。不过从实际体验来看，绑定设计系统后的输出质量明显更高，也更能在正式项目中直接使用。

这就是Design模式和v0、Bolt的本质区别：不是AI自由发挥出一张漂亮图，而是AI在规则体系内生成合规设计稿。一个是效果图，一个是能落地的交付物。

除此之外，Design模式还支持设计还原。上传UI截图，让AI还原页面布局、颜色、图标、组件和素材。这就比较适合想临摹优秀页面、做竞品参考、复刻已有UI的场景。

我一口气给了它6个页面，一个宠物类App，从登录页、首页、商城、宠物档案、消息中心到个人主页。

可以看到，Desgin对结构清晰的页面还原度能到七八成,还自动提取了页面里的素材。Logo图标、橘猫、金毛犬、灰猫、食品Banner、宠物用品、用户头像，都被整理成了可复用的设计资产。

另外，用一句话描述想法，Desgin就能直接生成页面原型。这也是产品经理和独立开发者最常用的入口。我试着做了一个独立咖啡品牌的官网。Desgin给我的成品结构完整、配色克制、留白得当，比纯文字描述直观太多。

而且按照指定设计规范产出页面，风格统一，更像正式交付稿。适合需要做系列页面、保持视觉一致性的场景，绑定设计系统后连续生成多个页面不会出现风格割裂的问题。

原来的AI设计工具，改个按钮颜色整个区域布局都跟着变。现在Design模式的画布也有了明显进步，点击组件可精准修改位置、外观、文字、颜色等属性。

对整体不满意，可以直接告诉它如何调整，比如：咖啡品牌官网，用画布精准修改：@HERO 设置 背景色 = #2C1810，@HERO 设置 文字色 = #FFFFFF。 只改Hero区域，产品卡片不动。

它会局部修改而非推倒重来。画布还支持网页端、平板端、移动端预览，做完网页版切到移动端看响应式效果，发现问题直接改。这比传统先做桌面版再单独做移动版要顺畅不少。

最让我惊喜的功能是设计稿到代码的衔接。确认方案后导出，自动跳转Code模式并带上设计上下文——AI已经知道你要做什么页面、用什么风格、有哪些组件，不需要重新描述一遍。对于需要精修的场景，也支持导出到Figma继续调整。

补上vibe coding缺失的一环

TRAE Work Design模式不是专业设计工具的替代品，而是vibe coding流程里缺失的那一步——从想法到界面之间的桥梁。

对不懂设计的产品经理、运营、独立开发者，它解决了"我知道想要什么，但说不出设计语言"的困境。对已有设计系统的团队，它解决了"AI出图好看但不合规"的问题。对整个产研流程，它补上了"需求→设计→代码"全链路中的关键一环。

Vibe coding绝不能只停留在“能跑”，真正要把东西做成产品，页面要友好，交互要自然，不同页面之间要像同一套东西。Design模式做的，正是让AI设计从一次性效果图变成可修改、可交付的生产成果。

在AI设计工具普遍停留在好看但没法落地的当下，TRAE Work Design给出了一个全新的答案。最重要的是，它免费。

数据支持天眼查，大模型独家合作账号