TraeWork 设计系统

用于构建一致产品界面的浅色模式设计系统

14
组件
671
图标
10
UI 套件
142
技能

组件

按钮

主要、次要、幽灵和危险按钮变体,支持图标

卡片

包含头部、主体和页脚部分的内容容器

表单

输入框、选择器、文本域、复选框、单选按钮、开关和滑块

对话框 / 模态框

用于覆盖层的模态对话框和滑出式抽屉

表格

支持排序、分页和行选择的数据表格

标签页

用于在内容面板之间切换的标签导航

菜单

带图标和分隔符的下拉菜单和上下文菜单

警告 / 通知

内联警告和吐司式通知

标签

带颜色变体的标签和状态指示器

头像

带状态指示器的用户头像

面包屑

导航面包屑路径

分页

页面导航控件

进度条

进度条和环形指示器

骨架屏

加载占位动画

UI 套件展示

仪表盘

包含图表、统计数据和数据表的分析仪表盘

仪表盘 2

替代仪表盘布局变体

着陆页

包含英雄区和功能区的营销着陆页

设置

用户设置和偏好面板

产品概览

产品详情和概览页面

定价

定价层级和计划比较

开发者工具

开发者工具探索界面

技能库

AI技能目录和浏览界面

评论线程

评论和讨论线程界面

文档

HTML有效性文档页面

资源

图标

按字母顺序排列的671个SVG图标

设计令牌 (JSON)

机器可读的令牌定义

使用指南

如何集成令牌、组件和图标

AI 技能

142个AI代理技能定义