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

内置设计系统

查看内置设计系统

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

在左栏中，点击顶部的 设计系统。
右侧展示设计系统管理中心。
在内置区域，查看 TRAE Work 的内置设计系统。

内置设计系统介绍

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

设计系统名称	描述
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 等多种内容组织方式，适用于社群平台、课程营地、创作者社区和活动运营产品。

添加自定义设计系统

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

在左栏中，点击顶部的 设计系统。
右侧展示设计系统管理中心。
点击右上角的 添加设计系统 按钮。
界面上弹出 添加设计系统 窗口。
输入该设计系统的名称。

选择添加设计系统的方式，并完成所需操作：
可用方式如下：

方式	描述
解析 Figma	将 Figma 设计文件导出为本地 .fig 文件后，上传至 TRAE Work。AI 会解析文件中的颜色、字体、组件等关键内容，并基于解析结果生成对应的设计系统。如生成结果存在遗漏或偏差，可在后续对话中要求 AI 补充或调整。
导入设计系统	上传本地已有的 TRAE Design 设计系统 .zip 文件，直接导入并复用其中的设计系统内容。
风格探索	描述你的视觉风格偏好，例如色彩、质感、布局或品牌调性。AI 会根据你的描述继续追问并确认细节，帮助你生成一套新的设计系统。

编辑自定义设计系统

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

进入设计系统展示和管理界面

前往 设计系统 > 自定义。
将鼠标悬浮至目标设计系统的卡片。
卡片中央会显示管理按钮。
点击管理按钮。
你将进入该设计系统的展示和管理界面。
按需进入主题、组件、图形或 设计规范 页签进行编辑。

编辑主题

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

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

添加到对话：将该变量添加到 AI 对话输入框。输入并发送修改指令后，AI 会根据你的指令调整该变量。

打开编辑器：在右侧编辑器面板中手动修改变量配置。操作说明如下：

分组	操作说明
颜色	直接输入：在输入框中修改 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（等宽/代码字体）。你可以从列表中选择内置字体，也可以上传其他字体。
圆角	找到目标圆角变量，在对应输入框中填入新数值，然后点击输入框以外的任意区域使修改生效。
尺寸	找到目标尺寸变量，在对应输入框中填入新数值，然后点击输入框以外的任意区域使修改生效。
间距	找到目标间距变量，在对应输入框中填入新数值，然后点击输入框以外的任意区域使修改生效。

编辑组件

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

编辑图形

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

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

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

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

编辑设计规范

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

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

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

管理自定义设计系统

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

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

Design 模式

语音讨论

名词解释