设计系统
AgentHub Home 遵循 TokenDance 共享设计契约，同时保留 AgentHub Desktop 工作台的产品气质。本页记录公开站点的设计规则，让首页、文档、mock UI、图标和动效保持一致。
设计来源
跨仓库设计契约由 TokenDance workspace docs 维护。本页是 AgentHub 公开站点的实现指南，负责把这些规则落到官网和文档系统中。
视觉方向
AgentHub 应该像一个安静、可靠的工程工具，而不是营销海报。界面要足够紧凑，适合反复使用，同时让初次访问的人也能读懂。
| 原则 | 规则 |
|---|---|
| 浅色优先 | 默认使用浅色表面、柔和阴影和清晰对比 |
| TokenDance Blue | 使用 rgb(0, 113, 188) / #0071BC 作为主品牌锚点 |
| 不回到旧紫色 | 不重新引入紫色渐变、彩虹条或无关强调条 |
| 默认紧凑 | 导航、胶囊、卡片和文档控件保持紧凑对齐 |
| 对齐 Desktop | 首页 mock 要接近 AgentHub Desktop 的行为和状态 |
| 状态诚实 | 视觉精致不能暗示未完成的能力已经通用可用 |
色彩 Token
| Token 意图 | 值 | 用途 |
|---|---|---|
| Brand | #0071BC | 主 CTA、选中状态、焦点提示 |
| Brand bright | #29ABE2 | Logo 次级蓝、小面积高亮 |
| Canvas | #F5F5F7 | 页面背景 |
| Surface | #FFFFFF | 卡片、文档正文、mock 面板 |
| Surface muted | #F8FAFC | 内层工具面板和侧栏 |
| Ink | #13111C | 主文本 |
| Ink muted | #6B6575 | 次级文本 |
| Hairline | rgba(19, 17, 28, 0.08) | 描边和分割线 |
Token 使用规则
公开站点组件应优先使用语义 token，而不是在组件里散落十六进制颜色。新增颜色前，先判断它属于哪类意图：
| 意图 | 推荐变量 | 使用场景 |
|---|---|---|
| 品牌动作 | --brand、--brand-hover、--brand-soft | CTA、选中项、链接 hover、焦点提示 |
| 页面表面 | --canvas、--surface-1、--surface-2、--surface-3 | 页面背景、文档正文、mock 面板、嵌套工具区 |
| 文本 | --ink、--ink-muted、--ink-subtle | 正文、说明、辅助 metadata |
| 边界 | --hairline、--hairline-strong | card、table、sidebar、mock window 分割 |
| 状态 | --state-success、--state-warning、--state-danger、--state-offline | 运行状态、错误、健康检查、离线目标 |
| 文档 | --docs-active-bg、--inline-code-bg、--cta-band-bg | docs 选中项、inline code、底部 CTA |
如果一个组件需要新颜色，先命名它的产品意图，再映射到 TokenDance Blue、moss 或中性色。不要直接把 purple、rainbow、hard black 或一次性 rgba(...) 写进组件。
组件规则
| 组件 | 设计规则 |
|---|---|
| 导航 | 登录放最右侧，GitHub 使用图标链接，语言控制保持紧凑 |
| 按钮 | 命令使用清晰文本；GitHub 等熟悉动作使用图标 |
| 胶囊 | 轻描边、低对比阴影，不使用厚重边框 |
| 文档侧栏 | 宽度稳定、分组清晰、选中项使用 TokenDance Blue |
| 表格 | 使用真实表格，移动端允许横向滚动 |
| 代码块 | 提供复制能力，控制换行，避免页面溢出 |
| Footer | 使用白色/浅色表面，不使用纯黑 |
Desktop Mock
首页 demo 不是装饰，它应该预览 AgentHub Desktop 的行为：
- 主题和语言跟随网站主题和语言；
- 会话状态可以自动播放，但不造成布局跳动；
- 文件、diff、预览、终端面板像真实工作台；
- hover 状态保持克制，不在 mock 内出现浏览器默认 focus 框；
- runtime logo 使用规范品牌图标，包括 Claude Code、Codex 等可用图标；
- 缩放不能在首帧显示原始尺寸后再跳变。
动效
动效用于帮助理解，不抢内容注意力。
| 模式 | 规则 |
|---|---|
| 页面入场 | 短时 opacity/translate，不使用大幅弹跳或跳字 |
| Mock 播放 | chat、files、diff、preview 之间平滑过渡 |
| Hover | 轻微抬升或颜色变化，避免重阴影 |
| 主题切换 | 网站和 mock 同步更新主题 |
| 减少动效 | 尊重 prefers-reduced-motion，无动画也能正常阅读 |
交互状态
交互状态要完整，但不能吵：
| 状态 | 规则 |
|---|---|
| Hover | 使用轻微背景、边框或阴影变化，不在 mock 内出现蓝色 DOM focus 框 |
| Active/selected | 使用 TokenDance Blue 的低饱和背景和细描边，避免大块实心色 |
| Focus-visible | 真实表单、链接、按钮保留可访问 focus；纯演示 mock 内不要暴露浏览器默认 outline |
| Loading | 不改变容器尺寸，不在 hydration 后从原始大小跳到缩放大小 |
| Error | 用明确的状态色和文字说明，不只靠红点或泛化 toast |
| Disabled | 降低对比度并保留布局尺寸，避免按钮宽度变化 |
文档、首页 mock 和未来的登录/注册入口应使用同一套状态语言。用户把鼠标放到 mock 或按钮上时，应该感觉它是同一个产品系统，而不是另一个临时 demo。
图标规则
- 通用 UI 命令优先使用
lucide-react中已有的图标。 - AI/LLM/runtime 品牌标识优先使用
@lobehub/icons。 - GitHub 导航用 GitHub 图标，不再堆一个文字导航项。
- 有官方/规范资产时，不手画类似品牌图标。
- 图标要和胶囊/按钮高度做视觉对齐。
文档页面规则
文档不是博客模板，应像工程产品手册：
- 每个状态页要说明“能做什么、不能承诺什么、升级需要什么证据”。
- 每个集成页要说明 owner、事件入口、失败态、密钥边界和公开/私有证据边界。
- 每个配置页要说明变量归属，但不写真实 key、host、SSH alias 或回滚路径。
- 中英文页面保持同构：标题结构、状态词、表格语义和安全边界一致。
- 代码示例使用占位 host/token/path，并优先展示可复制的最小请求。
视觉 QA
发布可见改动前，至少截图：
/zh与/en桌面首屏；/zh移动端首屏；- 一个文档页的桌面和移动端；
- 主题切换、语言切换和 mock 播放状态。
重点检查旧紫色、纯黑背景、导航/按钮换行、表格溢出、mock 内 focus 框、mock 语言滞后和 runtime logo 错误。