> ## 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.

设计系统用于存放一整套设计资产，包含主题、图形、组件和设计规范，用于规范产物的设计风格。TRAE Work 提供一系列可直接使用的内置设计系统，你也可以添加自定义设计系统。

## 名词解释 {#hFIqR6s3W}

<!-- @cols-width: 104,811 -->
| | | \
|**名词** |**描述** |
|---|---|
|主题 |定义产品视觉风格的基础配置，包括主题色、字体、字号、间距、圆角、阴影等设计变量。主题用于统一界面的视觉基调，是组件样式和页面布局的基础。 |
|图形 |设计系统中的视觉资源，包括图标、SVG、插画等。图形用于表达功能含义、状态变化或品牌特征，应保持统一的尺寸、颜色、线条风格和使用规则。 |
|组件 |基于主题和图形组合形成的可复用界面，例如按钮、输入框、卡片、弹窗等。组件用于承载具体交互和展示能力。 |
|设计规范 |用于说明主题、图形和组件使用规则的 Markdown 文档。设计规范为设计系统补充上下文，帮助使用者理解整体设计风格、设计原则、使用边界和落地方式。 |

## 内置设计系统 {#hWzAs98cG}

### 查看内置设计系统 {#hmpYseXhO}

使用以下步骤查看内置设计系统：

1. 在左栏中，点击顶部的 **设计系统**。
   右侧展示设计系统管理中心。
2. 在 **内置** 区域，查看 TRAE Work 的内置设计系统。
   ![Image=2340x392](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0520925aef2c41389dfd79a8c2cb3df7~tplv-goo7wpa0wc-topic.png)   


### 内置设计系统介绍 {#hJHF7YLv2}

TRAE Work 提供以下内置设计系统：

<!-- @cols-width: 148,766 -->
| | | \
|**设计系统名称** |**描述** |
|---|---|
|TRAE Work |通用型产品设计系统，支持 Dashboard、Landing、Settings、文档示例等多种页面。以 Light 模式为主，结构清晰，适合作为中后台和平台型产品的基础设计系统。 |
|TRAE |面向开发者工作台的深色设计系统，组件、图标和工程场景示例较为丰富，支持 Dashboard、Dev Explorer 等界面。采用深色背景加醒目强调色，适合 IDE、Agent 工作台、研发平台和运维系统。 |
|Volcengine |面向企业级 B2B 场景，支持 Light 和 Dark 双主题。适合信息量大、操作入口多的复杂控制台，能清楚展示页面结构、运行状态和操作结果，适用于云服务平台、基础设施管理和业务中台。 |
|TikTok |面向短视频消费和移动端沉浸式交互，采用黑色背景、强烈的品牌色对比，并把内容放在最显眼的位置。适合展示内容流和操作按钮，适用于内容平台、创作者产品、活动内容页和移动端产品原型。 |
|Doubao |面向 AI 对话和后台管理，风格冷静、页面分区清楚，把聊天输入和 Dashboard 组件结合在一起。既适合对话式产品，也适合任务管理和智能工作流产品，例如 AI 工作台、企业智能助手和生产力工具。 |
|Apple |留白充足、排版清晰、视觉层级简单，用尽量少的元素呈现高品质的品牌感和产品内容。适用于官网首页、产品详情页、对比页和消费电子类展示页面。 |
|Claude |界面温和、克制，以阅读体验为重。不堆砌科技感视觉，而是靠排版和留白减少干扰，适合长文本问答、内容创作、知识分析、研究辅助等需要长时间阅读和思考的 AI 产品。 |
|Google |偏数据分析的后台设计系统，风格现代、清爽，重点是让数据更好读、操作更高效。视觉简洁但信息表达清楚，适用于报表分析、广告投放、运营监测等数据驱动型界面。 |
|Vercel |采用黑、白、灰为主的克制配色，强调简洁、准确、面向开发者。装饰元素少，把重点放在平台功能上，适用于部署管理、预览环境、域名配置、可观测性等界面。 |
|Minimalist |以中性色框架、清晰层级和克制的品牌表达为主，通过减少视觉干扰让信息层级保持清晰，使复杂界面不显杂乱、更显专业，适用于强调内容和结构的分析型产品。 |
|21th |视觉风格几何感强，采用零圆角、等宽字体、硬朗阴影和醒目的蓝色强调色，整体像操作台和终端界面，适合实验性、工具化或偏技术感的数据产品和管理后台。 |
|Motion Fit |采用高对比深色界面、硬朗的几何元素和力量感强的字体。适用于训练平台、运动数据面板、恢复与打卡追踪和挑战任务类产品。 |
|Golden Time |把杂志式排版和简报风格带入数据界面，在保证后台操作效率的同时，提升内容的可读性和视觉质量。适合续费规划、策略汇报、客户报告和工作区治理等既看重数据、又看重品牌形象的场景。 |
|Nerv |面向监控、告警和态势感知场景，采用高对比、近黑色背景和醒目的状态提示，界面类似指挥中心，能集中展示大量实时状态。适用于安全产品、监控大盘、风险预警系统等技术型产品。 |
|Barbie |把高识别度的品牌色和杂志编辑式风格结合起来，用鲜明的视觉打造结构化界面，辨识度高，能支撑运营、活动和内容管理场景，适合时尚消费品牌、活动运营后台和品牌营销平台。 |
|Vibe Camp |在 Dashboard 结构中融入内容社区和活动运营的特点，兼顾管理效率和社群氛围，支持 Sessions、Community、Analytics 等多种内容组织方式，适用于社群平台、课程营地、创作者社区和活动运营产品。 |

## 添加自定义设计系统 {#hKbNpZmwN}

使用以下步骤，添加自定义设计系统：

1. 在左栏中，点击顶部的 **设计系统**。
   右侧展示设计系统管理中心。
2. 点击右上角的 **添加设计系统** 按钮。
   界面上弹出 **添加设计系统** 窗口。
   ![Image=3024x1891](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/349c29181fe541d6b1b65d7a2a4674ae~tplv-goo7wpa0wc-topic.png)
3. 输入该设计系统的名称。
4. 选择添加设计系统的方式，并完成所需操作：
   可用方式如下：
   <!-- @cols-width: 120,765 -->
   | | | \
   |**方式** |**描述** |
   |---|---|
   |解析 Figma |将 Figma 设计文件导出为本地 .fig 文件后，上传至 TRAE Work。AI 会解析文件中的颜色、字体、组件等关键内容，并基于解析结果生成对应的设计系统。如生成结果存在遗漏或偏差，可在后续对话中要求 AI 补充或调整。 |
   |导入设计系统 |上传本地已有的 TRAE Design 设计系统 .zip 文件，直接导入并复用其中的设计系统内容。 |
   |风格探索 |描述你的视觉风格偏好，例如色彩、质感、布局或品牌调性。AI 会根据你的描述继续追问并确认细节，帮助你生成一套新的设计系统。 |   


## 编辑自定义设计系统 {#huOx4VokN}

你可以进入自定义设计系统的管理界面，按需修改主题、组件、图形和设计规范。

### 进入设计系统展示和管理界面 {#hK0RjEcDd}

1. 前往 **设计系统** > **自定义**。
2. 将鼠标悬浮至目标设计系统的卡片。
   卡片中央会显示 **管理** 按钮。
   ![Image=2966x517](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/df2fc9cb11a44d858b8cc1b8caef03ac~tplv-goo7wpa0wc-topic.png)
3. 点击 **管理** 按钮。
   你将进入该设计系统的展示和管理界面。
4. 按需进入 **主题**、**组件**、**图形** 或 **设计规范** 页签进行编辑。

### 编辑主题 {#hy7apQDpm}

在 **主题** 页签中，你可以修改设计变量的默认配置，例如颜色、排版、圆角、尺寸和间距。

点击目标设计变量右侧的 **编辑** 图标后，从快捷菜单中选择修改方式：

* **添加到对话**：将该变量添加到 AI 对话输入框。输入并发送修改指令后，AI 会根据你的指令调整该变量。
* **打开编辑器**：在右侧编辑器面板中手动修改变量配置。操作说明如下：
   <!-- @cols-width: 117,794 -->
   | | | \
   |**分组** |**操作说明** |
   |---|---|
   |颜色 |* **直接输入**： 在输入框中修改 Hex 值，然后点击输入框以外的任意区域使修改生效。 |\
   | |* **使用调色盘**： 点击 Hex 值左侧的颜色方格，打开调色盘后选取或调整颜色。 |
   |排版 |* 对于 font size、font weight 和 line height，可直接在输入框中编辑数值，然后点击输入框以外的任意区域使修改生效。 |\
   | |* 对于 font family，可设置 font-family-sf-pro-text（正文文本字体）、font-family-sf-pro（标题/展示字体）、font-family-inter（通用界面字体）和 font-family-jetbrains-mono（等宽/代码字体）。 |\
   | |   你可以从列表中选择内置字体，也可以上传其他字体。 |
   |圆角 |找到目标圆角变量，在对应输入框中填入新数值，然后点击输入框以外的任意区域使修改生效。 |
   |尺寸 |找到目标尺寸变量，在对应输入框中填入新数值，然后点击输入框以外的任意区域使修改生效。 |
   |间距 |找到目标间距变量，在对应输入框中填入新数值，然后点击输入框以外的任意区域使修改生效。 |   


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

### 编辑组件 {#hZkXmeb34}

在 **组件** 页签中，你可以查看由主题和图形组合形成的可复用界面。若组件样式或交互不符合预期，可将该组件添加到对话，并说明需要调整的内容，让 AI 协助修改。

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

### 编辑图形 {#hpAtU1fZv}

在 **图形** 页签中，你可以管理设计系统中的图标、SVG 和其他图形资源。

选中目标图形后，在快捷菜单中按需选择以下操作：

* 选择 **添加到对话**，让 AI 协助编辑该图形。若需要补充信息，AI 会在对话中与你确认。
* 选择 **重命名**，为该图形设置新的名称。
* 选择 **删除**，将该图形从设计系统中移除。

若现有图形无法满足需求，你可以点击右上角的 **上传** 按钮，导入目标图形的 .svg 文件。导入时可按需勾选 **去色**；勾选后，系统会将整个图形的颜色变为白色。

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

### 编辑设计规范 {#htx64XrYQ}

在 **设计规范** 页签中，你可以编辑该设计系统的设计规范文件，包括用于介绍设计系统的 README，以及用于辅助开发的 Skill。

点击 **···** 后，在快捷菜单中按需选择以下操作：

* 选择 **添加到对话**，让 AI 协助编辑该设计规范文件。
* 选择 **删除**，将该设计规范文件从设计系统中移除。
   删除旧设计规范后，你可以点击 **添加** 按钮，上传新的设计规范文件。待上传文件须满足以下要求：
   * README 须为纯 .md 格式文件。
   * Skill 须为包含根目录 `SKILL.md` 文件的 zip 或 .skill 文件，或单独的 .md 文件，且 `SKILL.md` 须包含以 YAML 格式编写的技能名称和描述。

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

## 管理自定义设计系统 {#ht8pucbXF}

你可以对自定义设计系统进行重命名、创建副本、导出为 .zip 文件或删除。

1. 前往 **设计系统** > **自定义**。
2. 在目标设计系统卡片的右下角，点击 **···**。
3. 从菜单中选择所需操作并完成。