TRAE_Work_v2.0新增Design模式使用指南【教程】

几秒内生成高保真设计稿并可直接编辑、导出代码——TRAE Work v2.0新增的Design模式，不是把AI塞进设计工具里，而是把设计真正接进需求→原型→开发的闭环中，让设计师、产品经理和开发者同一个上下文里推进。

TRAE Work v2.0新增Design模式，支持自然语言输入需求生成高保真设计稿，并提供点选微调、框选重绘、自然语言全局调整三种修改方式，可导入Figma设计系统并导出Figma文件、图片或直接跳转Code模式开发。

怎么进入Design模式并开始一个新任务？

打开TRAE Work桌面端或网页版，顶部导航栏会看到三个并列入口：Work、

点左上角「+ 新建任务」，系统会自动创建一个空白画布和对话窗口。不需要切换标签页或导入文件，因为对话本身就是上下文——你在Work模式里聊过的需求，只要没清空上下文，Design模式会默认继承下来。

这里有个关键点：这一步必须是在Design模式下操作。如果误入了Work或Code模式，再粘贴需求，AI会按对应模式逻辑响应，

需求要怎么往里填？直接打字就行

在对话框里用自然语言描述页面目标，比如：“做一个面向自由职业者的AI分身工作室落地页，含Hero区、核心功能四宫格、使用场景图标列表、三档价格卡和用户评价轮播。”

表达方式很灵活：可以带风格关键词（比如“纸漫风”“深色科技感”），可以拖入截图或上传本地图片作为参考，也可以直接引用已有Figma设计系统链接。

提交后等3到8秒，右侧画布就会自动渲染出完整页面。同时左侧会显示「产物汇总」面板，列出生成元素、字体层级、色彩Token和组件结构树——这些信息一目了然。

三种精准修改方式，各有各的适用场景

方法一：点选微调

直接点击画布中的任意组件（按钮、卡片、文字块等），右侧属性面板会实时展开。可以修改文字内容、字号、行高、颜色值、圆角、阴影、间距等。改完就生效，不需要二次确认，效率很高。

方法二：框选局部重绘

按住Shift键拖拽鼠标框选多个元素（比如整个价格方案区域），松手后右键→「重绘选区」，输入指令如“把三档价格卡改为横向滑动布局，加入推荐标识”。AI只重生成这个区域，其他部分保持不变，很精准。

方法三：自然语言全局调整

在对话框里发送新指令，比如“整体色调往暖色偏移15%，Hero区标题加粗并增大2px，功能图标统一换成线性风格”。AI会重新解析语义后刷新全画布，但保留原有布局逻辑和组件复用关系。

注意：如果指令太模糊，比如“让它更好看”，AI可能会重置全部视觉参数，

导入团队设计系统，统一品牌调性

如果团队已经有自己的一套设计标准，比如品牌色、字体、间距这些Token，统一导入进来就行。

点击画布左下角「设计风格」下拉菜单，选择「设计系统」→「创建新系统」。上传Figma JSON导出文件，或者手动填写品牌主色（如#1A73E8）、中性色阶、字体族名（如Inter）、基础圆角（4px/8px/12px）、间距比例（4/8/16/24）等核心Token。

保存后，后续所有新任务默认绑定这个系统。已有任务可点击右上角「绑定设计系统」手动关联。绑定后生成的每一页，按钮、输入框、卡片等组件都严格调用你定义的Token，不会擅自替换配色或调整字重，确保一致性。

成果怎么导出？

第一步：点击画布右上角「导出」按钮。

第二步：选择目标格式——

• 导出Figma：生成含图层结构、命名规范、组件实例的.figma文件，设计师可以直接接入现有Figma项目继续精修。
• 导出图片：支持PNG或JPG，可以切换网页/平板/手机预设尺寸，一键下载。
• 导出至Code模式：点击「在Code模式中开发」，自动跳转并初始化前端项目，AI基于当前画布结构生成React/Vue组件树、样式变量和路由配置。