Aime Design System

### Do

• 每页默认带 8px 外边距 + 20px 浮岛外壳 + drop-shadow island。新页面不要写"全屏铺满"

• 所有 hover 走 bg-overlay-1 (rgba(91,100,117,0.06))，active 走 bg-overlay-2 (0.10)，pressed / container 底走 bg-overlay-3 (0.14)。品牌色按钮例外——走 brand-hover / brand-active

• 中文段落用 PingFang SC（自带英文字形），代码 / 文件名 / 数字用 JetBrains Mono

• 字号严格走 12 / 13 / 14 / 16 / 20 五档

• 圆角层级 outer 20 ≥ lg 12 ≥ md 8 ≥ default 6 ≥ sm 4 ≥ xs 2，外层永远 ≥ 内层

• 任何可交互元素必须实现 default / hover / active / disabled 四态，列表项再加 selected 态

• 任何数据驱动列表必须有 skeleton + empty-state + error-fallback 三件套

• 所有图标默认色 #444c5c，hover #232938，active #060e1f

• 面板 / 区域之间只用 1px border-subtle 分割，不加阴影。阴影只给浮岛外壳与少数 hover

• 一次只关注一个组件，迭代而非一次性全部产出。新组件先 sketch 出像素级规格再写 HTML

• 用 Arco / ToD 现成组件 + aime-theme.less 自动重置，不自造

### Don't

• 不用紫色 / 紫渐变。代码里 --agent-color-purple-* 实际是绿色，插槽名是误导。看到 #8b5cf6 / #6366f1 一律禁用

• 不用 emoji 作功能图标。全屏 emoji ≤ 2 个，仅出现在已建立感知的位置（如 upgrade banner 🎉）

• 不大面积铺品牌色 #3dbf3d。单点 > 80×80px = 失败。绿色穷举只在五处：send button / Switch on / brand logo / 文字链 / success

• 不用纯色中性灰（#666 / #999 / #ccc）。Aime gray 走 v2 冷蓝灰阶，gray-5 是 #747b8a（带蓝调，比 AntD #8c8c8c 更显冷），所有中性灰从 token 取，不凭空写 hex

• 不混用字体。同一段中文别切 PingFang 和 SF Pro

• 不在 panel 外壳上写 box-shadow——必须 filter: drop-shadow

• 不超过 3 级 text 颜色。一个面板只用 highlight + default + muted 三档

• 不写赛博霓虹 / 深蓝 #0D1117 GitHub-dark 美学

• 不混用 overlay 与 line 的基底——overlay 是暖 (91,100,117)，line 是冷 (77,101,148)

• 不写 outline: 1px dashed 当 focus ring——focused 走 border-color + shadow-input-focus

• 不让 chat list 出现绿底 active——它的 active 是白底 + 微阴影，不上绿

Aime 通过 MultiPlatformCompatible 组件容器 + body[aime-multi-platform-compatible] 全局属性区分三端，不用 media query 切换布局——同一份 markup，运行时按平台 hide 不需要的元素。Hide 优于另写，禁止为 mobile / mini 各写一份组件。

• desktop (useDevice().isDesktop): 三栏圆角浮岛（76 + 260 + flex）+ 完整 Header + content padding 0 20px 16px + max-w 760 居中。默认形态

• desktop-mini (useDevice().isDesktopMiniWindow): 仅 Main 区, BotList 与 Chat list 全部 `` 隐藏。Panel 外壳仍保留 20px radius + drop-shadow。宽度通常 360-400px

• mobile (useDevice().isMobile): 单列, Chat list 全屏, 选中后 Drawer 滑出全屏对话, content padding 0 12px 12px, Header 折叠右侧 tag 群

Breakpoint 阈值未单独抽 token——项目用 useDevice() hook 内部判断，禁止手写 window.innerWidth < 768。Touch targets：所有 icon-button ≥ 28×28，button ≥ 32 高，chat-list-item 整条 60px 高（远超 44 触屏标准）。

• 仅 assistant 框架在 scope。main / chat / task-list / history-tasks / showcase / workflow / setting / skill-mgmt / space-commands / space-setting / create-space / knowledge-base / mcp-debug / meego / assistant-config 等 27 个页面未验证。生成这些前先拿 Figma 节点补 templates

• Figma screenshot 未拿到（rate limit），无 design.png 像素对照。需要时由用户手动从 Figma 节点 8sN3eIAiVcQKDy1A6XI2dM / 146:11827 导出 PNG 放入 examples/assistant/design.png

• Dark mode 仅 reference 层完整映射。System 层暗色映射只覆盖 bg-page / bg-panel / text-*，其余 border / overlay / brand / status 在暗色下精确表现未提取

• 未覆盖组件: toast / message / popconfirm / progress / skeleton / loading-bubble / checkbox / radio / switch / select / cascader / date-picker / tabs / breadcrumb / pagination / steps / table / tree / list / chart-wrapper / artifact-preview / markdown-renderer。走 Arco / ToD 默认 + aime-theme 自动重置

• *字面量 `rgba(0,0,0,)** 未完全 token 化——部分 hover / shadow 用纯黑透明叠。#f5f5f5 / #e0e0e0 在 assistant/index.module.less` 内有少量遗留字面量

• 动画时序（消息进入 / 滚动到底 / loading-bubble / streaming typing / drawer backdrop fade）未规格化

• Breakpoint 阈值未抽 token——项目用 useDevice() hook 内部判断

• 助理头像 12 色板未提取——getAssistantColor(id) hash 函数输出色板未规格化

• 资产: 所有功能 icon 来自 @arco-design/iconbox-react-ve-o-design / @arco-design/iconbox-react-rdsvc 包，未单独导出。skill / knowledge / file mention 图标 + upgrade banner 🎉 替代图未提取

• 测试 / 验证: 未做 Playwright 截图对比、跨浏览器渲染验证、a11y 自动审计