Design 模式

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

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

使用场景

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

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

快速开始

切换至 Design 模式

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

指定设计风格

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

可选项如下：

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

发起任务

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

常见任务类型如下：

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

在画布中预览并管理设计成果

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

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

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

使用 Code 模式开发设计产物

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

1. 在画布中选中一个或多个需要开发的产物。
2. 在顶部导航栏中，选择 ··· > 导出设计文件 > 在 Code 模式中开发。
   TraeWork 会打开一个独立的 Code 模式窗口，将选中的设计成果打包为 .zip 文件并添加至对话输入框，同时填充默认开发指令。
   
3. 根据需要修改默认指令，例如补充技术栈、页面交互、响应式要求或代码目录规范。
4. 选择任务运行环境和代码存储位置。
5. 发送指令。