TokenDance Design

多 Agent 协作平台的统一设计系统。语义化 Token、双主题、响应式布局、事件流组件——为 TokenDance 生态所有产品提供一致的视觉语言。

特性

• 语义化 Token - 颜色、字体、间距、圆角、阴影、动画，全部用语义变量命名
• 双主题 - Light / Dark 一键切换，基于 data-theme 属性
• 状态色系统 - Run State（6 色）+ Agent Role（5 色），覆盖 Agent 协作全场景
• 组件库 - 事件流、Inspector Tab、Composer 模式选择器、审批卡片、Diff 面板
• WCAG AA - 对比度、Focus Ring、无障碍合规
• Desktop 原型 - 可交互的功能完整原型，可直接体验产品交互

快速开始

git clone https://github.com/TokenDanceLab/tokendance-design.git
cd tokendance-design
pnpm install
pnpm dev

打开 http://127.0.0.1:5176/ 查看设计系统总览。

入口	地址
设计系统总览	http://127.0.0.1:5176/
Design System v4	http://127.0.0.1:5176/design-system-v4.html
Desktop 原型	http://127.0.0.1:5176/app/desktop/
Chat React 原型	cd app/chat && pnpm dev → http://localhost:7391

导出单文件原型：

pnpm run export:desktop
# → app/desktop/tokendance-desktop-prototype-single.html

Token 体系

颜色

类别	Light	Dark	说明
主色	#0071BC	#29ABE2	TokenDance 品牌蓝
成功	#409467	#69c967
警告	#c0883a	#d4aa4c
危险	#d15252	#e87070

Run State

状态	色值	用途
Running	#5e8dcc	Agent 正在执行
Thinking	#8b7ec8	Agent 推理中
Waiting	#c0883a	等待输入或审批
Success	#409467	任务完成
Failed	#d15252	任务失败
Cancelled	#858595	已取消

Agent Role

角色	色值
Orchestrator	#0071BC
Builder	#5e8dcc
Reviewer	#409467
Deployer	#2b8a9e
Researcher	#c0883a

排版

8 级语义排版：headline-lg / headline-md / headline-sm / title-sm / body-lg / body-sm / label / caption

间距与圆角

5 级间距（xs 4px → 2xl 32px）| 6 级圆角（xs 4px → full 9999px）

版本历史

版本	说明
v4	Desktop IM 工作台原型，完整交互
v3	降饱和精炼色板，Linear / Notion 级质感
v2	Run State + Agent Role + 事件流 + WCAG AA
v1	基础语义 Token 体系 + 四栏布局

历史版本见 archive/ 目录。

项目结构

tokendance-design/
├── index.html                  # 总览入口
├── design-system-v4.html       # 当前设计系统
├── app/
│   ├── chat/                   # Chat React 原型（Vite + React 19 + TypeScript）
│   │   ├── src/components/     # 聊天 UI 组件
│   │   ├── src/data/           # Mock 数据 + 类型定义
│   │   └── src/design/         # CSS Token 系统
│   └── desktop/                # Desktop 原型（纯 HTML/CSS/JS）
│       ├── index.html          # 原型主文件
│       ├── styles.css          # Token + 布局样式
│       ├── app.js              # 交互逻辑
│       └── tokendance-logo.svg # Logo
├── archive/                    # 历史迭代（v1/v2/v3）+ 交接文档 + 调研笔记
├── scripts/
│   └── export-single-html.mjs  # 单文件导出脚本
└── package.json

设计原则

• 降饱和高级感 - 偏灰调的柔和色板，Linear / Notion 级质感
• 边框优先 - 卡片用 border 不用 shadow，只在 Composer 浮层使用阴影
• 品牌蓝贯穿 - 主色使用 TokenDance 蓝，Light #0071BC，Dark #29ABE2
• 禁止项 - 彩色左边框、消息气泡尖角、Tabler CDN 依赖、深色主题紫色元素

相关仓库

• AgentHub - 多 Agent 协作平台主仓库
• TokenDance - TokenDance 组织

License

MIT