> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trae.cn/llms.txt
> Use this file to discover all available pages before exploring further.

Design 模式是 TRAE Work 中专用于生成和迭代界面设计的工作模式。你可以输入设计需求、上传参考图或选择设计系统，让 AI 生成页面原型或高保真设计。

生成的设计结果会展示在画布中，支持继续编辑、预览、导出等操作。设计成果确认后，还可以结合 Code 模式，将其进一步转化为前端代码或研发任务。

## 使用场景 {#hMEG0x1CC}

以下场景可优先使用 Design 模式：

* **快速生成页面设计**
   通过自然语言描述页面类型、内容结构、视觉风格等，生成网页或应用页面设计。生成结果可在画布中继续编辑，也可以导出为设计文件或交由 Code 模式继续开发。
* **基于设计规范生成页面**
   当团队已有设计规范时，可以将其导入设计系统，并在生成页面时复用其中的组件、图像和规范。
* **批量修改已有设计稿**
   对于已有设计稿，可以通过 AI 执行批量调整，减少重复操作。常见操作包括全局替换颜色、统一字体样式，或基于同一页面模板生成不同内容版本。
* **管理和共享设计资产**
   团队可以通过设计系统统一管理主题、图像、组件和设计规范，并支持导入、导出和共享，使设计资产可复用、可迁移。   


## 快速开始 {#hT3MrO31a}

### **切换至 Design 模式** {#hcVahV9xO}

在界面左上角，点击 **Design**，将 TRAE Work 切换至 Design 模式。

![Image=3024x1891](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2457e5e1c2474297a44f71b02e5db86b~tplv-goo7wpa0wc-topic.png)

### 指定设计风格 {#hc4RN701s}

在对话输入框左下方，点击设计风格下拉菜单，选择所需的设计风格，使生成结果更贴近预期。

可选项如下：

* **自由探索**：TRAE Work 会根据你的需求自动选择合适的设计风格，适合早期概念探索或未确定设计规范的场景。
* **设计系统**：设计系统用于存放主题、组件、图形和设计规范。你可以选择 TRAE Work 的内置设计系统，也可以创建并使用自定义设计系统。详情参考[设计系统](/ide/design-system)。

![Image=775x184](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7fec0a7d5d684693ab5126d66d60655d~tplv-goo7wpa0wc-topic.png)

### 发起任务 {#hhTRkRlZx}

在输入框中描述设计需求，并尽量提供必要上下文，例如页面类型、核心内容、目标用户、视觉风格、端侧尺寸和交互要求。上下文越明确，生成结果越接近预期。

常见任务类型如下：

* **设计还原**：上传 UI 参考图，并用自然语言说明需要还原或调整的范围，让 AI 根据参考图生成相应的设计。
* **概念成稿**：直接描述设计的目标、内容结构和视觉风格，让 AI 生成页面原型或高保真设计。
* **规范出图**：选择合适的设计系统，并说明要求，让 AI 生成符合指定设计规范的设计成果。

### 在画布中预览并管理设计成果 {#hYRjU41dp}

任务完成后，TRAE Work 会在画布中展示设计成果。你可以在画布中预览、移动和整理产物，导入素材，导出设计文件等。

![Image=3024x1891](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4ef69b80c57b40669002dacefc770535~tplv-goo7wpa0wc-topic.png)

顶部工具栏支持以下操作：

<!-- @cols-width: 100,100,715 -->
|**编号** |**操作** |**描述** |
|---|---|---|
|1 |预览 |选中一个产物后，点击 **预览**，TRAE Work 会在画布中单独展示该产物。你可以在页面顶部切换适配端侧，包括网页、平板和手机，或自定义尺寸。 |
|2 |整理画布 |若你拖动过画布中的产物，点击 **整理画布** 可将所有产物恢复至初始排列位置。 |
|3 |连线 |如果衍生页面包含指向已有页面的跳转热区，系统会自动建立连线关系。点击 **连线** 可展示或隐藏连线。 |
|4 |更多 |点击 **更多** 后，可选择导入图片素材或导出设计文件： |\
| | | |\
| | |* **导入图片素材**：将本地图片导入至画布中。 |\
| | |* **导出设计文件**：你可以将选中的一个或多个产物导出为以下格式： |\
| | |   * Figma：将产物转换为矢量格式并复制，然后在 Figma 中粘贴使用。 |\
| | |   * PNG：将产物导出为 .png 格式图片。支持设置分辨率缩放参数，以控制图片尺寸和清晰度。 |\
| | |   * JPG：将产物导出为 .jpg 格式图片。支持设置分辨率缩放参数，以控制图片尺寸和清晰度。 |\
| | |   * HTML：将产物导出为静态 HTML。 |\
| | |   * ZIP：将产物导出为 .zip 格式压缩包。 |

选中某一个产物后，其顶部会显示操作菜单：

![Image=2024x437](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bb0fd1b2b22849f8aa19cb7e19e75960~tplv-goo7wpa0wc-topic.png)

<!-- @cols-width: 100,100,715 -->
|**编号** |**操作** |**描述** |
|---|---|---|
|1 |添加到对话 |若需要继续修改该产物，点击 **添加到对话**，然后在输入框中输入具体修改要求并发送给 TRAE Work 处理。 |
|2 |预览 |点击 **预览** 后，TRAE Work 会在画布中展示该产物。 |
|3 |更多 |点击 **更多** 后，可复制、重命名、重新生成、导出或删除该产物。 |

### **使用 Code 模式开发设计产物** {#hMTtVeWtZ}

当产物满足要求后，你可以将其发送至 Code 模式，并基于该产物生成相应的前端代码。

1. 在画布中选中一个或多个需要开发的产物。
2. 在顶部导航栏中，选择 **···** > **导出设计文件** > **在 Code 模式中开发**。
   TRAE Work 会打开一个独立的 Code 模式窗口，将选中的设计成果打包为 .zip 文件并添加至对话输入框，同时填充默认开发指令。
   ![Image=3024x940](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/63d9473234f0443d812c0954d2a03811~tplv-goo7wpa0wc-topic.png)
3. 根据需要修改默认指令，例如补充技术栈、页面交互、响应式要求或代码目录规范。
4. 选择任务运行环境和代码存储位置。
5. 发送指令。