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

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

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

## 使用场景 {#hMEG0x1CC}

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

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


## 快速开始 {#hT3MrO31a}

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

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

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

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

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

可选项如下：

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

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

### 发起任务 {#hhTRkRlZx}

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

常见任务类型如下：

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

发起任务后，对话框默认最小化，位于左下角，最小化输入框中会展示 Agent 的执行流程，你可以点击将其放大。

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

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

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

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

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

<!-- @cols-width: 100,114,699 -->
| **编号**  | **操作**  | **描述**  |
| --- | --- | --- |
| 1  | 预览  | 选中一个产物后，点击 **预览** 按钮，TraeWork 会在画布中单独展示该产物。你可以在页面顶部切换预览设备类型，包括网页、平板和手机，也可以自定义预览尺寸。  |
| 2  | 连线  | 如果衍生页面包含指向已有页面的跳转热区，系统会自动建立连线关系。点击 **连线** 按钮可展示或隐藏连线。  |
| 3  | 可视化编辑器  | 点击 **可视化编辑器** 按钮后，选中产物中的某个元素，右侧会展示属性面板。属性面板包括 “设计” 与 “原型” 两部分： | \
| | | | \
| | | * **设计**：用于编辑所选元素的位置、布局、外观、填充、边框、阴影与模糊等属性。 | \
| | | * **原型**： | \
| | |    用于建立某个元素（例如：图标、按钮）与页面间跳转关系。你可以选择当前画布中的页面，也可以填入自定义 URL，然后建立该页面与所选中元素间的跳转关系。若使用自定义 URL，需填写包含协议和域名的完整地址，例如 [https://www.example.com](https://www.example.com)。 | \
| | |    例如，当前画布中有 “IDE 工作台首页” 和 “设置中心” 两个界面。你可以选中 “IDE 工作台首页” 中的 “设置” 图标，然后在 **原型** 页签的 **页面** 部分选择 “设置中心”，建立该图标与 “设置中心” 界面之间的跳转关系。配置完成后，选中该页面并点击顶部工具栏中的 **预览** 按钮，即可在预览界面验证跳转是否生效。  |
| 4  | 更多  | 点击 **更多** 按钮后，你可以从菜单中选择所需操作，包括： | \
| | | | \
| | | * **导入图片素材**：将本地图片导入至画布中。 | \
| | | * **整理画布**：若你拖动过画布中的产物，可将所有产物恢复至初始排列位置。  |
| 5  | 导出  | 点击 **导出** 按钮后，你可以从菜单中选择需导出的产物格式，包括： | \
| | | | \
| | | * **Figma**：将产物转换为矢量格式并复制，然后在 Figma 中粘贴使用。 | \
| | | * **PNG**：将产物导出为 .png 格式图片。支持设置分辨率缩放参数，以控制图片尺寸和清晰度。 | \
| | | * **JPG**：将产物导出为 .jpg 格式图片。支持设置分辨率缩放参数，以控制图片尺寸和清晰度。 | \
| | | * **HTML**：将产物导出为静态 HTML。 | \
| | | * **ZIP**：将产物导出为 .zip 格式压缩包。  |

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

![Image=2116x720](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/17a3fb4f702c4047b6dca64c5c3d1199~tplv-goo7wpa0wc-topic.webp)

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

此外，针对图片类产物，选中图片后，顶部导航栏会显示 **编辑图片** 选项。你可以按以下步骤编辑图片：

1. 点击 **编辑图片** 图标，进入图片编辑模式。
2. 拖拽鼠标框选需要编辑的区域。
   选区底部将显示批注输入框。
3. (可选) 使用箭头或画笔进一步标注编辑范围。
4. 输入批注并点击 **添加** 按钮。
5. 在顶部的批注面板中，点击 **发送给 AI** 按钮。
   AI 将根据你的批注修改图片。   


::::cols
@col 50
![Image=1852x1132](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/30e10a98eed34fc6b696be6bee68d577~tplv-goo7wpa0wc-topic.webp)

@col 50
![Image=437x273](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5963a859690a46e385fdf0f6a27dd37a~tplv-goo7wpa0wc-topic.webp)
::::

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

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

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

## 快捷键 {#hAh607FU5}

在画布中，你可以使用以下快捷键：

* **`Space + 鼠标左键拖拽`**：移动画布
* **`Command/Ctrl + 鼠标滚轮滚动`**：缩放画布
* **`Command/Ctrl + 鼠标左键点击`**：快速选中套嵌元素
* **`Command/Ctrl + Z`**：撤销上一步