总时长约 15 分钟 / 约 3000 字 / 三段递进结构
我想先问大家一个问题。你有没有过这样的经历——脑子里有一个想法，你觉得它挺好的，你能感受到它应该长什么样，但你就是没办法把它变成一个别人能看见的东西。
不是画出来、做出来——哪怕是让别人理解你在想什么，都费劲。
这种卡住的感觉，几乎每个人都经历过。不管你是产品经理、创业者、运营、还是工程师——只要你的工作里有"我需要一个界面"这个环节，你大概率卡过。
这不是因为你不够好。是因为过去做设计这件事，路径太窄了。你只有两条路：第一条，自己学 Figma、学设计工具——门槛高，学习曲线陡，你还有一堆别的事要做。第二条，找设计师——排期等着，沟通来回拉扯，翻译出来的还经常不是你脑子里那个东西。
今天我想讲的，是第三条路。
接下来我围绕三个关键词来讲 Design 模式在做什么——看见、成型、上线。
先说看见。
什么叫"看见"？你脑子里有一个画面。也许是一个产品首页的大致感觉，也许是一个活动落地页的风格方向，也许只是"我觉得应该是那种干净的、有呼吸感的排版"。但这个画面，它是模糊的。你说不清楚，画不出来，你甚至不确定自己到底想要什么——因为你从来没有机会"看见"它。
不只是非专业人士有这个问题。哪怕是专业设计师，落笔之前也需要大量的参考图、情绪板、竞品截图。人不是凭空创造视觉的——你需要先看见一些东西，才能判断"对，就是这个方向"或者"不对，换一个"。
但过去，想要看见你的想法，代价太大了。你得找人帮你画，画完不对再改，改了再画。这个过程可能是几天，可能是一周。想法卡在脑子里出不来，看不见就没法判断，没法判断就没法推进。这是一个死循环。
我们想打破这个循环。
在 Design 模式里，你有了一个专属的设计搭档。它说你的语言，理解你的意图。你不需要学任何工具，你只需要说出来。
第一个能力——对话式生成设计图。你进入 Design 模式，用自然语言描述你想要的东西。"我想做一个教育类产品的首页，风格干净现代，主视觉是一个学习场景的插画。"说完，AI 直接把你的描述变成一张可见的设计画面。
门槛降到了什么程度？降到了"你能说清楚你想要什么"。如果你说不太清楚也没关系——你可以先说一个大概方向，看看结果，再继续聊。
第二个能力——它不是给你一张图让你"要或不要"。它是在一张无限画布上同时呈现多种可能性。三个方向、四个方案，并排摆在你面前。你可以看、可以比、可以选。不同风格的探索横向排列，同一风格的迭代纵向展开。你第一次有了"挑选"的权利，而不是"接受或拒绝"的二选一。
第三个能力——当你看到画面之后，你一定会想改。过去改设计是什么体验？你得用语言描述"左上角那个按钮再大一点、颜色换成深蓝色"。你说了半天，设计师改出来可能还是不对。
在 Design 模式里，你可以直接在画布上"指哪改哪"。点选一个元素——比如一个按钮——然后说"这个换个颜色"。框选一个区域——比如整个顶部导航——然后说"这块太拥挤了，呼吸感不够"。AI 结合你框选的截图精确理解你的意图。这不是纯靠语言盲改，是可见的、精准的沟通。
当然，如果你想更精细地调整，也可以双击元素直接手动编辑属性。生成的设计天然支持多端响应——手机、平板、桌面——切换预览即可。页面之间还可以连线做原型跳转，不只是静态图片。
但这些都是锦上添花。最核心的事情是——从这一步开始，你脑子里模糊的想法，第一次有机会变成看得见的东西。看见了，才是一切的起点。
好，我们解决了"看见"的问题。你现在能快速把想法变成画面了。但我接着问你一个问题——当你做的不是一张图，而是一个完整的项目呢？
你有首页、有详情页、有个人中心、有活动落地页。每一张你单独看，感觉还行。但放在一起呢？它们不像同一个产品。颜色有微妙的差异，按钮风格不统一，间距忽大忽小。看起来像是五个不同的人分别做的。
为什么会这样？因为 AI 每次生成都是"就事论事"的。它不知道你上一个页面长什么样。它不记得你的品牌色是什么。它不知道你的按钮应该用圆角还是直角。每一次生成，对 AI 来说都是全新的一次——没有记忆，没有规矩。
这就是关键问题。一张图，谁都能出。但让十张图看起来是"一个产品"——这才叫设计。设计的本质不是画图，是维护一致性。
所以我们做了 Design Library。你可以理解为——你的设计系统。你把你的设计语言交给 AI，之后它的每一次生成，都在你的规矩里做。不是"参考"，是"遵守"。
Design Library 有四层结构。第一层，主题——也就是 Design Tokens。你的颜色体系、字体层级、间距规范，这些是你视觉系统的基础变量。第二层，组件——按钮、卡片、导航栏、表单。这些是你可复用的标准件，用 HTML 重绘的原子化组件。第三层，图形素材——你的图标库、SVG 资产。第四层，设计规范——文字性的品牌准则和设计文档。
四层加在一起，不是一个简单的色板。它是你的完整的设计语言。AI 真正"认识"了你的产品——不是模糊地知道"大概是蓝色系"，而是精确地知道你的主色是什么、按钮的 hover 状态是什么、标题用什么字号什么字重。
但问题来了——你说"我要建一个设计系统"，这听起来就是个大工程对吧？从零开始定义颜色、画组件、写规范，可能要几周时间。
所以我们做了一个事情。你团队大概率已经有 Figma 文件对吧？你已有的设计资产——颜色、组件、页面——都在 Figma 里。我们支持直接导入 .fig 文件。
你把 Figma 文件导进来，AI 帮你自动解析。它会从你的文件里识别出颜色系统、字体排版体系、核心组件，然后自动生成完整的设计规范。你不需要从零开始——把你已有的设计资产直接带进来就行。支持多文件导入，支持选择具体的 Frames 做解析。这个搬迁过程，可能就几分钟。
有了设计系统和没有设计系统，差距有多大？我给你看个对比。
同一个需求——比如"做一个商品详情页"——没有 Library 时，AI 自由发挥，出来的东西颜色、间距、组件样式都是随机的。看着还行，但放不进你的产品里。有了 Library 之后——它用你的颜色、你的组件、你的排版规范。出来的东西风格统一、质量专业，直接就能用。从"看着还行"到"真正专业"，差距就是这么直观。
还有一个点。设计系统最怕什么？怕改。改了主题色，要手动把所有组件里用到这个颜色的地方一个一个改过来。在 Design Library 里，这是自动的——主题色一变，所有组件实时刷新，设计规范自动更新。维护一致性，不再是人工活。
如果你没有 Figma 资产也没关系。你可以让 AI 帮你从零探索一套风格方向，也可以导入已有的 Library 压缩包。图标库同样可以导入并批量管理。建好的设计系统还能打包导出，分享给团队其他成员。
总结一下这一步在做什么——当 AI 懂了你的规矩之后，它做出来的东西第一次不只是"看着还行"，而是真正可以放进你的产品里、拿去评审、拿去交付的东西。这就是从一张图到一套方案的跃升。
到了这一步，你有了一套完整的、规范的设计方案。所有页面风格统一，组件规范清晰，品牌调性一致。然后呢？
过去到了这一步，设计是一个"终点"。做完了——导出文件，写标注，交给开发，然后重新讲一遍需求。为什么这个按钮要放在这里？为什么这两个页面的跳转逻辑是这样的？为什么选了这个颜色？设计师讲了一遍的事情，到了开发那里全部要重新讲一遍。
开发拿到设计稿，他要重新理解你的意图，重新搭建页面结构。设计和开发之间，永远隔着一道"翻译"。这道翻译丢了多少上下文、带来多少误解、浪费多少来回沟通——经历过的人都知道。
我们想消灭这道翻译。
在 TRAE Work 里，设计做完不是"终点"。是"继续"。
第一个能力——设计稿一键带入 Code 模式继续开发。你点一个按钮，你的设计就进了 Code 模式。系统自动携带设计稿的 HTML 代码和截图作为上下文传给 Code 模式的 AI。它知道这些页面怎么来的、原始需求是什么、设计规范是什么。不需要重新描述。不需要重新交底。一切都在。
第二个能力——更重要的是，这不是"导出-导入"的关系。这是同一段连续的对话。同一个连续的工作流。
什么意思？你在 Design 模式里讨论的所有需求背景——为什么要做这个页面、目标用户是谁、有什么约束条件。你做出的所有设计决策——为什么选这个布局、为什么这里用卡片不用列表。这些东西，Code 模式里的 AI 全部知道。它不是拿到一张图从零开始猜——它是带着完整的上下文继续往下做。
这才是"多模式协同"的真正含义。不是两个独立的工具之间传文件——是同一个连续的工作流里，设计和开发自然地衔接在一起。
当然，如果你需要的是传统的交付方式，我们也支持——导出为图片、代码包、甚至 Figma 矢量格式。你可以粘贴到 Figma 里继续打磨，跟现有的设计工作流无缝衔接。但核心体验是——你不必非得"交出去"。你可以一路往下走。
从想法到设计到代码，是一条连续的线。没有"做完交出去"这个动作。只有"继续往下走"。
我们回看一下今天讲的三个关键词。
看见——让想法不再卡在脑子里。成型——让零散的图变成有秩序的整体。上线——让设计直接走进代码和产品。
这三步连起来，是我们对"AI 应该如何参与设计"这件事的完整回答。不是帮你更快地画一张图——是让"有想法"到"东西上线"这条路上，每一个卡住的环节都不再卡住。
Design 模式，6 月 8 日正式上线。海外加国内同步，Web 端加桌面端。
6 月 8 日 · 海外 + 国内 · Web + Desktop