> ## 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 |TRAE Work 是一套通用型产品设计系统，支持 Dashboard、Landing、Settings、文档示例等多种页面。它以 Light 模式为主，结构清晰，适合作为中后台产品和平台型产品的基础设计系统。 |
|TRAE |TRAE 是一套面向开发者工作台的深色设计系统，提供较丰富的组件、图标和工程场景示例。它支持 Dashboard、Dev Explorer 等工作台界面，并通过深色背景和醒目的强调色呈现技术产品的风格，适合 IDE、Agent 工作台、研发平台和运维系统。 |
|Volcengine |Volcengine 面向企业级 B2B 场景，支持 Light 与 Dark 双主题。它适合信息量大、操作入口多的复杂控制台，能够清晰呈现页面结构、运行状态和操作反馈，适用于云服务平台、基础设施管理和业务中台等产品。 |
|TikTok |TikTok 面向短视频内容消费和移动端沉浸式交互场景，强调黑色背景、强品牌色对比和内容优先的页面组织方式。它适合展示内容流、操作按钮和移动端交互节奏，适用于内容平台、创作者产品、活动内容页和移动产品原型。 |
|Doubao |Doubao 是一套适合 AI 交互和后台管理的设计系统，整体风格冷静、清晰，页面边界明确。它将聊天输入与 Dashboard 组件结合，既适合对话式产品，也适合任务管理和智能工作流产品，例如 AI 工作台、企业智能助手和生产力工具。 |
|Apple |Apple 设计系统以克制的留白、清晰的排版节奏和简洁的视觉层级为主要特征。它用较少的视觉元素呈现高品质的品牌感和产品内容，适用于官网首页、产品详情页、对比页和消费科技类展示页面。 |
|Claude |Claude 设计系统的界面风格温和、克制，更强调阅读体验。它不依赖强烈的科技感视觉，而是通过排版和留白降低干扰，适合长文本问答、内容创作、知识分析、研究辅助等需要长时间阅读和思考的 AI 产品。 |
|Google |Google 是一套偏分析型的后台设计系统，整体风格现代、清爽，重点提升数据的可读性和操作效率。它在轻量的视觉表达和清晰的信息传达之间保持平衡，适用于报表分析、广告投放、运营监测等数据驱动型界面。 |
|Vercel |Vercel 设计系统采用克制的黑白灰配色，强调简洁、准确和开发者导向。它减少装饰元素，突出平台功能本身，特别适用于部署管理、预览环境、域名配置、可观测性和平台能力类界面。 |
|Minimalist |Minimalist 设计系统强调中性色的页面框架、清晰的层级和克制的品牌表达。它用较少的视觉干扰建立稳定的信息秩序，让复杂界面保持安静、专业，适用于需要突出内容和结构的分析型产品。 |
|21th |21th 采用几何感较强的视觉风格，包含零圆角、等宽字体、硬朗阴影和醒目的蓝色强调色。它带有明显的操作台和终端风格，适合实验性、工具化或偏技术感的数据产品和管理后台。 |
|Motion Fit |Motion Fit 采用高对比的深色界面、硬朗的几何元素和带有竞技感的字体，呈现运动表现类产品的风格。它更像运动数据的状态面板，而不是传统的生活方式应用，适用于训练平台、运动数据面板、恢复与连续打卡追踪和挑战任务类产品。 |
|Golden Time |Golden Time 将杂志式排版和简报风格引入数据界面，在保留后台操作效率的同时增强内容的阅读节奏和质感。它适合续费规划、策略汇报、客户报告和工作区治理等同时重视数据表达和品牌形象的场景。 |
|Nerv |Nerv 设计系统面向监控、告警和态势感知场景，采用高对比、近黑色背景和强状态提示的视觉风格。它带有明显的指挥中心感，适用于安全产品、监控大盘、风险预警系统，以及需要实时状态反馈的技术型产品。 |
|Barbie |Barbie 设计系统将高识别度的品牌色与编辑式视觉风格结合，用鲜明的视觉形象构建结构化产品界面。它既有较强的记忆点，也能承载运营、活动和内容管理场景，适合时尚消费品牌、活动运营后台和品牌营销平台。 |
|Vibe Camp |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}

你可以编辑自定义设计系统，包括修改主题颜色、编辑图形、修改设计规范 Markdown 文件等。支持通过 “添加到对话” 的方式让 AI 协助你进行修改。

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

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

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

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