ui-craft-dense-dashboard

UI Craft — 密集型仪表板

预设的密集型风格：数据优先、键盘优先、面向操作人员的工具。Bloomberg、Retool、Linear 问题视图、管理面板。每个像素都物尽其用。

参数（已锁定）

• CRAFT_LEVEL = 7 — 精致但不矫饰；操作人员看重速度胜过光鲜。
• MOTION_INTENSITY = 3 — 仅微动效。行悬停、行激活色调、行内确认。表格区域内不使用滚动触发的显示效果。
• VISUAL_DENSITY = 9 — 紧凑的 4/8px 网格；留白也要物尽其用。

探索阶段不要重新询问这些内容。只确认品牌强调色和深色／浅色偏好。

风格参考

• UI 无衬线字体 + 等宽字体搭配。所有 ID、哈希值、时间戳和代码均使用等宽字体。
• 必须使用语义色板：成功、警告、危险、信息 + 一种品牌强调色。
• 每个数字列都使用 tabular-nums；标识符使用等宽字体。
• 紧凑的 4/8px 间距网格。表格单元格使用 px-3 py-2，工具栏使用 gap-2。
• 到处使用迷你图；分类数据使用水平条形图；时间序列使用面积图。不使用饼图，不使用 3D。
• 行内显示键盘快捷键（⌘K、J/K、按 E 编辑）。
• 紧凑的界面元素：面包屑 + 标签页 + 工具栏 + 筛选标签均可使用。
• 仅使用微动效。行悬停、行激活、行内保存。不使用入场交错动画。

基础规则（继承）

../ui-craft/SKILL.md 中的所有规则均适用。本文件覆盖参数默认值，并在下文补充针对特定风格的指导。反套路和工艺品质测试仍须完整遵守。

针对特定风格的覆盖规则

排版

• UI：IBM Plex Sans 或 Inter，字重 400 / 500。
• 等宽字体：ID、哈希值、时间戳、代码、版本号和 kbd 使用 IBM Plex Mono 或 Geist Mono。
• 正文字号：默认 13-14px；密集表格中使用 12px 也可以。
• 每个数字列、指标卡、时间戳和时长都使用 tabular-nums。
• ID 和代码使用 font-variant-numeric: tabular-nums slashed-zero。
• 标题：紧凑。页面标题 18-20px，分区标题 14-15px，字重 500。

颜色（必须使用语义色板）

• 品牌强调色：一种，用于主要操作、激活的标签页和选中行的强调色调。
• 语义色采用低饱和度 OKLCH（亮度 50-60，色度 ≤ 0.15）：
  • success oklch(60% 0.12 150)
  • warning oklch(72% 0.13 75)
  • danger oklch(58% 0.15 25)
  • info oklch(62% 0.12 240)
• 绝不使用高饱和度色相——用户每天要盯着仪表板看 8 小时。
• 状态点、徽标文本和标签文本使用语义色；背景保持中性色。

间距与布局

• 使用 4/8px 间距刻度——绝不使用 5、7、9、10。坚持使用 4 / 8 / 12 / 16 / 24。
• 表格单元格：默认使用 px-3 py-2；超密集布局使用 px-2 py-1.5。
• 工具栏行：使用 gap-2，控件高度 h-9，文本使用 text-sm。
• 侧边栏：窄（200-240px），背景色调微妙，包含图标 + 标签；绝不使用全深色。
• 卡片：使用 p-4，圆角 8px；使用 1px 边框而非阴影。

数据展示

• 每个数字列都使用 tabular-nums + 右对齐。
• 每个 ID / 哈希值 / 提交记录 / 时间戳都使用等宽字体。
• 在行内使用迷你图呈现趋势信息。高度 24-40px，使用单色。
• 分类图表：使用水平条形图。时间序列：使用从 15% → 0% 渐变的面积图。不使用饼图。
• 变化值：使用语义色显示纯文本 +12.5%，不加药丸标签。
• 空状态：提供一行提示 + 用于创建的键盘快捷键。

界面元素与导航

• 面包屑 + 标签页 + 子工具栏可同时显示，且属于预期设计。
• 筛选标签：使用轮廓样式，可通过 × 移除，不填充药丸背景。
• 全局命令面板：在标题栏搜索入口处显示 ⌘K。
• 行操作：悬停时显示行内图标；也可通过键盘操作。
• 分页：显示文本 Page 3 of 42 + tabular-nums，并支持使用 J/K 导航。

动效

• 行悬停：背景以 80ms 过渡为 oklch(96% 0.002 250) 浅色／oklch(20% 0.005 250) 深色。
• 激活／选中行：使用约 6% 不透明度的品牌强调色调 + 2px 左侧强调色边框。
• 行内保存／确认：150ms 淡入淡出 + 切换为勾选图标。
• 表格区域内不使用滚动触发展示效果——长列表中会造成卡顿。
• 排序箭头、筛选器展开、列宽调整：立即生效或在 <100ms 内完成。

首先阅读参考文件

从 ../ui-craft/references/ 加载以下文件：

• dashboard.md — 主要参考；指标卡片、图表、侧边栏、表格
• typography.md — tabular-nums、等宽字体搭配、比例
• motion.md Rendering Performance — 合成器管线、图层提升、滚动联动动画
• responsive.md — 平板和笔记本断点、工具栏折叠

跳过 inspiration.md（侧重着陆页）、sound.md。

此风格的反模式

• 界面框架或数据中任何位置都不要使用衬线字体。Editorial 是另一种变体。
• 数字列中不要使用比例数字 — 始终使用 tabular-nums。
• 不要使用高饱和度色调 — 看起来像消费级应用，而不是运营工具。
• 每个变化值都不要使用彩色胶囊 — 使用语义色的纯文本。
• 不要使用饼图、环形图、3D 图表。任何情况下都不要。
• 时间序列不要使用垂直柱状图 — 使用面积图或折线图。
• 指标卡片不要统一使用彩色顶部边框。
• 不要使用留白过多的卡片网格 — 如果感觉太空旷，就不是正确的变体。
• 不要使用全暗色侧边栏（常见的 AI 风格）— 只使用淡色调。
• 表格区域不要使用滚动触发展示或交错动画。
• 不要隐藏键盘快捷键 — 始终展示 ⌘K、行快捷键和帮助入口。
• 不要使用含糊的加载状态 — 显示与列结构匹配的骨架行，而不是通用加载动画。