TRAE Work v2.0新增Design模式使用指南【教程】

风丽同学_5665

风丽同学_5665

2026-07-28

1069人浏览

原创

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

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

trae work v2.0新增design模式使用指南【教程】 - php中文网

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

切换到Design模式并新建任务

打开TRAE Work桌面端或网页版,顶部导航栏会出现三个并列入口:Work、Design、Code。点击Design即可进入设计工作区。

点击左上角「+ 新建任务」,系统自动创建空白画布与对话窗口。此时无需切换标签页或导入文件,对话即上下文——你在Work模式中聊过的需求,只要未清空上下文,Design模式会默认继承。

这一步必须在Design模式下操作;若误入Work或Code模式再粘贴需求,AI将按对应模式逻辑响应,【不会生成设计稿】。

输入需求并生成初稿

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

支持多种表达方式:可带风格关键词(如“纸漫风”“深色科技感”),可附参考图(拖入截图或上传本地图片),也可直接引用已有Figma设计系统链接。

提交后等待3–8秒,右侧画布自动渲染出完整页面,同时左侧显示「产物汇总」面板,列出生成元素、字体层级、色彩Token及组件结构树。

三种精准修改方式

方法一:点选微调

直接点击画布中任意组件(按钮、卡片、文字块等),右侧属性面板实时展开,可修改文字内容、字号、行高、颜色值、圆角、阴影、间距等。改完即生效,无需二次确认。

方法二:框选局部重绘

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

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

Figma Mac版
Figma Mac版

Figma Mac版 126.8.16 官方下载,提供 macOS PKG 安装包,适合 Mac 设计团队使用 Figma、Figma AI 与桌面端协作功能。

下载

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

注意:若指令模糊(如“让它更好看”),AI可能重置全部视觉参数,【导致已调好的配色/字体丢失】。

导入团队设计系统

点击画布左下角「设计风格」下拉菜单,选择「设计系统」→「创建新系统」。

上传Figma JSON导出文件,或手动填写品牌主色(如#1A73E8)、中性色阶、字体族名(如Inter)、基础圆角(4px/8px/12px)、间距比例(4/8/16/24)等核心Token。

保存后,后续所有新任务默认绑定该系统;已有任务可点击右上角「绑定设计系统」手动关联。

绑定后生成的每一页,按钮、输入框、卡片等组件均严格调用你定义的Token,不会擅自替换配色或调整字重。

导出设计成果

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

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

• 导出Figma:生成含图层结构、命名规范、组件实例的.figma文件,设计师可无缝接入现有Figma项目继续精修;

• 导出图片:支持PNG/JPG,可切换网页/平板/手机预设尺寸,一键下载;

• 导出至Code模式:点击「在Code模式中开发」,自动跳转并初始化前端项目,AI基于当前画布结构生成React/Vue组件树、样式变量及路由配置。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Trae AI 编程助手入门与开发实战专题
Trae AI 编程助手入门与开发实战专题

Trae AI编程助手入门与开发实战专题,字节跳动推出的国内首款AI原生集成开发环境(IDE),基于VS Code架构打造,完美兼容主流插件生态。本专题系统梳理Trae三大核心模式:IDE模式覆盖日常编码与代码补全,SOLO模式实现从自然语言需求到完整项目的全自动开发,Builder模式一键生成规范项目框架。专题涵盖从环境搭建、精准Prompt编写、MCP工具配置到Agent智能体调度的完整工作流,结合景区订票系统、Spring Boo

2026.05.20

328

10

Trae AI Agent 与自动化工作流开发专题
Trae AI Agent 与自动化工作流开发专题

Trae AI Agent 与自动化工作流开发专题,深入解析字节跳动Trae IDE中智能体(Agent)系统的架构设计与实战应用。本专题聚焦Trae内置的Chat、Builder、SOLO三大智能体角色,详解如何通过MCP协议打通GitHub、Figma、高德地图等200+外部服务,实现从需求解析、架构设计、代码生成到测试部署的全链路自动化。专题涵盖多智能体协作模式——Agents as Tools、Workflow、Graph与Sw

2026.05.20

244

10

Trae 模型配置与AI编程生态专题
Trae 模型配置与AI编程生态专题

Trae 模型配置与AI编程生态专题,字节跳动Trae IDE作为国内首款AI原生开发环境,支持Claude Sonnet、GPT-4o、DeepSeek、豆包等主流大模型自由切换。本专题系统讲解Trae国内版与国际版的模型配置差异:国内版默认搭载豆包与DeepSeek模型,完全免费且无调用次数限制;国际版支持接入OpenAI与Anthropic官方API Key,满足海外开发者需求。

2026.05.20

210

10

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

20

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

40

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

20

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

20

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

20

15

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

240

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程