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