文档反馈
设计系统用于存放一整套设计资产，包含主题、图形、组件和设计规范，用于规范产物的设计风格。TRAE Work 提供一系列可直接使用的内置设计系统，你也可以添加自定义设计系统。
名词解释
| 名词 | 描述 |
|---|---|
| 主题 | 定义产品视觉风格的基础配置，包括主题色、字体、字号、间距、圆角、阴影等设计变量。主题用于统一界面的视觉基调，是组件样式和页面布局的基础。 |
| 图形 | 设计系统中的视觉资源，包括图标、SVG、插画等。图形用于表达功能含义、状态变化或品牌特征，应保持统一的尺寸、颜色、线条风格和使用规则。 |
| 组件 | 基于主题和图形组合形成的可复用界面单元，例如按钮、输入框、卡片、弹窗等。组件用于承载具体交互和展示能力。 |
| 设计规范 | 用于说明主题、图形和组件使用规则的 Markdown 文档。设计规范为设计系统补充上下文，帮助使用者理解整体设计风格、设计原则、使用边界和落地方式。 |
内置设计系统
查看内置设计系统
使用以下步骤查看内置设计系统：
- 在左栏中，点击顶部的 设计系统。
右侧展示设计系统管理中心。 - 在 内置 区域，查看 TRAE Work 的内置设计系统。
内置设计系统介绍
TRAE Work 提供以下内置设计系统：
| 设计系统名称 | 描述 |
|---|---|
| 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 是一套偏分析型的后台设计系统，整体风格现代、清爽，重点提升数据的可读性和操作效率。它在轻量的视觉表达和清晰的信息传达之间保持平衡，适用于报表分析、广告投放、运营监测等数据驱动型界面。 | |
| 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 等多类内容组织方式，适用于社群平台、课程营地、创作者社区和活动运营产品。 |
添加自定义设计系统
使用以下步骤，添加自定义设计系统：
- 在左栏中，点击顶部的 设计系统。
右侧展示设计系统管理中心。 - 点击右上角的 添加设计系统 按钮。
界面上弹出 添加设计系统 窗口。
- 输入该设计系统的名称。
- 选择添加设计系统的方式，并完成所需操作：
可用方式如下：方式 描述 解析 Figma 将 Figma 设计文件导出为本地 .fig 文件后，上传至 TRAE Work。AI 会解析文件中的颜色、字体、组件等关键内容，并基于解析结果生成对应的设计系统。如生成结果存在遗漏或偏差，可在后续对话中要求 AI 补充或调整。 导入设计系统 上传本地已有的 TRAE Design 设计系统 .zip 文件，直接导入并复用其中的设计系统内容。 风格探索 描述你的视觉风格偏好，例如色彩、质感、布局或品牌调性。AI 会根据你的描述继续追问并确认细节，帮助你生成一套新的设计系统。
编辑自定义设计系统
你可以编辑自定义设计系统，包括修改主题颜色、编辑图形、修改设计规范 Markdown 文件等。支持通过 “添加到对话” 的方式让 AI 协助你进行修改。
- 前往 设计系统 > 自定义。
- 将鼠标悬浮至目标设计系统的卡片。
卡片中央会出现 管理 按钮。
- 点击 管理 按钮。
你将进入该设计系统的展示和管理页面。 - 按需编辑主题、组件、图形或设计规范。
管理自定义设计系统
你可以对自定义设计系统进行重命名、创建副本、导出为 .zip 文件或删除。
- 前往 设计系统 > 自定义。
- 在目标设计系统卡片的右下角，点击 ···。
- 从菜单中选择所需操作并完成。