文档反馈
Design 模式是 TRAE Work 中专用于生成和迭代界面设计的工作模式。你可以输入设计需求、上传参考图或选择设计系统，让 AI 生成页面原型或高保真设计。
生成的设计结果会展示在画布中，支持继续编辑、预览、导出等操作。设计成果确认后，还可以结合 Code 模式，将其进一步转化为前端代码或研发任务。
使用场景
以下场景可优先使用 Design 模式：
- 快速生成页面设计
通过自然语言描述页面类型、内容结构、视觉风格等，生成网页或应用页面设计。生成结果可在画布中继续编辑，也可以导出为设计文件或交由 Code 模式继续开发。 - 基于设计规范生成页面
当团队已有设计规范时，可以将其导入设计系统，并在生成页面时复用其中的组件、图像和规范。 - 批量修改已有设计稿
对于已有设计稿，可以通过 AI 执行批量调整，减少重复操作。常见操作包括全局替换颜色、统一字体样式，或基于同一页面模板生成不同内容版本。 - 管理和共享设计资产
团队可以通过设计系统统一管理主题、图像、组件和设计规范，并支持导入、导出和共享，使设计资产可复用、可迁移。
快速开始
切换至 Design 模式
在界面左上角，点击 Design，将 TRAE Work 切换至 Design 模式。
指定设计风格
在对话输入框左下方，点击设计风格下拉菜单，选择所需的设计风格，使生成结果更贴近预期。
可选项如下：
- 自由探索：TRAE Work 会根据你的需求自动选择合适的设计风格，适合早期概念探索或未确定设计规范的场景。
- 设计系统：设计系统用于存放主题、组件、图形和设计规范。你可以选择 TRAE Work 的内置设计系统，也可以创建并使用自定义设计系统。详情参考设计系统。
发起任务
在输入框中描述设计需求，并尽量提供必要上下文，例如页面类型、核心内容、目标用户、视觉风格、端侧尺寸和交互要求。上下文越明确，生成结果越接近预期。
常见任务类型如下：
- 设计还原：上传 UI 参考图，并用自然语言说明需要还原或调整的范围，让 AI 根据参考图生成相应的设计。
- 概念成稿：直接描述设计的目标、内容结构和视觉风格，让 AI 生成页面原型或高保真设计。
- 规范出图：选择合适的设计系统，并说明要求，让 AI 生成符合指定设计规范的设计成果。
在画布中预览并管理设计成果
任务完成后，TRAE Work 会在画布中展示设计成果。你可以在画布中预览、移动和整理产物，导入素材，导出设计文件等。
顶部工具栏支持以下操作：
| 编号 | 操作 | 描述 |
|---|---|---|
| 1 | 预览 | 选中一个产物后，点击 预览，TRAE Work 会在画布中单独展示该产物。你可以在页面顶部切换适配端侧，包括网页、平板和手机，或自定义尺寸。 |
| 2 | 整理画布 | 若你拖动过画布中的产物，点击 整理画布 可将所有产物恢复至初始排列位置。 |
| 3 | 连线 | 如果衍生页面包含指向已有页面的跳转热区，系统会自动建立连线关系。点击 连线 可展示或隐藏连线。 |
|
4 |
更多 |
点击 更多 后，可选择导入图片素材或导出设计文件：
|
选中某一个产物后，其顶部会显示操作菜单：
| 编号 | 操作 | 描述 |
|---|---|---|
| 1 | 添加到对话 | 若需要继续修改该产物，点击 添加到对话，然后在输入框中输入具体修改要求并发送给 TRAE Work 处理。 |
| 2 | 预览 | 点击 预览 后，TRAE Work 会在画布中展示该产物。 |
| 3 | 更多 | 点击 更多 后，可复制、重命名、重新生成、导出或删除该产物。 |
使用 Code 模式开发设计产物
当产物满足要求后，你可以将其发送至 Code 模式，并基于该产物生成相应的前端代码。
- 在画布中选中一个或多个需要开发的产物。
- 在顶部导航栏中，选择 ··· > 导出设计文件 > 在 Code 模式中开发。
TRAE Work 会打开一个独立的 Code 模式窗口，将选中的设计成果打包为 .zip 文件并添加至对话输入框，同时填充默认开发指令。
- 根据需要修改默认指令，例如补充技术栈、页面交互、响应式要求或代码目录规范。
- 选择任务运行环境和代码存储位置。
- 发送指令。