ui-craft-dense-dashboard

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Craft — Dense Dashboard

UI Craft — 高密度仪表盘

Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg, Retool, Linear issues view, admin panels. Every pixel earns its place.

预定义的高密度风格：数据优先、键盘优先、操作员工具。参考Bloomberg、Retool、Linear问题视图、管理面板。每一个像素都物尽其用。

Knobs (locked)

锁定参数

CRAFT_LEVEL = 7 — polished but not precious; operators value speed over sheen.
MOTION_INTENSITY = 3 — micro-only. Row hover, row active tint, inline confirm. No scroll reveals in table areas.
VISUAL_DENSITY = 9 — tight 4/8px grid; whitespace earns its place.

Do not re-ask these in Discovery. Confirm brand accent + dark/light preference only.

CRAFT_LEVEL = 7 — 精致但不刻意；操作员更看重速度而非华丽外观。
MOTION_INTENSITY = 3 — 仅保留微动效。行悬停、行激活高亮、内联确认。表格区域无滚动揭示动画。
VISUAL_DENSITY = 9 — 紧凑的4/8px网格；留白需有意义。

在需求调研阶段无需再询问这些参数。仅需确认品牌强调色以及明暗主题偏好即可。

Style anchors

风格锚点

UI sans + mono pairing. Mono for every ID, hash, timestamp, code.
Semantic palette required: success, warning, danger, info + one brand accent.
```
tabular-nums
```
on every numeric column; mono on identifiers.
Tight 4/8px spacing grid.
```
px-3 py-2
```
table cells,
```
gap-2
```
toolbars.
Sparklines everywhere; horizontal bars for categorical; area for time-series. No pie. No 3D.
Keyboard shortcuts visible inline (
```
⌘K
```
,
```
J/K
```
,
```
E
```
to edit).
Dense chrome: breadcrumbs + tabs + toolbars + filter chips are welcome.
Micro-motion only. Row hover, row active, inline save. No entrance stagger.

UI无衬线字体与等宽字体搭配。所有ID、哈希值、时间戳、代码均使用等宽字体。
必须使用语义化配色板：成功、警告、危险、信息 + 一种品牌强调色。
所有数值列使用
```
tabular-nums
```
格式；标识符使用等宽字体。
紧凑的4/8px间距网格。表格单元格使用
```
px-3 py-2
```
，工具栏使用
```
gap-2
```
。
随处使用迷你走势图（sparklines）；分类数据用横向条形图；时间序列用面积图。禁止使用饼图、3D图表。
键盘快捷键内联显示（
```
⌘K
```
、
```
J/K
```
、
```
E
```
键编辑）。
高密度导航栏：面包屑、标签页、工具栏、筛选芯片均适用。
仅保留微动效：行悬停、行激活、内联保存。无入场 stagger 动画。

Base rules (inherited)

基础规则（继承）

All rules in

../ui-craft/SKILL.md

apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.

../ui-craft/SKILL.md

中的所有规则均适用。本文件会覆盖参数默认值，并添加以下特定风格指南。反冗余测试和工艺测试仍然完全适用。

Style-specific overrides

特定风格覆盖规则

Typography

UI: IBM Plex Sans or Inter, 400 / 500.
Mono: IBM Plex Mono or Geist Mono for IDs, hashes, timestamps, code, version numbers, kbd.
Body size: 13-14px default; 12px in dense tables is fine.
```
tabular-nums
```
on every numeric column, metric card, timestamp, duration.

font-variant-numeric: tabular-nums slashed-zero

for IDs + codes.

Headings: compact. Page title 18-20px, section 14-15px 500.

Color (semantic palette required)

Brand accent: one — primary actions, active tab, selected row accent tint.
Semantic, subdued OKLCH (lightness 50-60, chroma ≤ 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)
```
Never saturated hues — dashboards live on screens for 8 hours.
Status dots, badge text, chip text use semantic color; backgrounds stay neutral.

Spacing & layout

4/8px spacing scale — never 5, 7, 9, 10. Stick to 4 / 8 / 12 / 16 / 24.
Table cells:
```
px-3 py-2
```
default;
```
px-2 py-1.5
```
for ultra-dense.
Toolbar rows:
```
gap-2
```
,
```
h-9
```
controls,
```
text-sm
```
.
Sidebar: narrow (200-240px), subtle bg tint, icon + label; never full dark.
Cards:
```
p-4
```
, 8px radius; 1px border over shadow.

Data display

Every number column:
```
tabular-nums
```
+ right-aligned.
Every ID / hash / commit / timestamp: monospace.
Sparklines inline in rows for trend context. 24-40px tall, single color.
Category charts: horizontal bars. Time-series: area with 15% → 0% fade. No pies.
Deltas: plain text
```
+12.5%
```
in semantic color, no pill.
Empty states: one-line hint + keyboard shortcut to create.

Chrome & navigation

Breadcrumbs + tabs + sub-toolbar together is expected and fine.
Filter chips: outline style, removable
```
×
```
, no pill fill.
Global command palette:
```
⌘K
```
visible in header search affordance.
Row actions: inline icons on hover; also available via keyboard.
Pagination: text
```
Page 3 of 42
```
+
```
tabular-nums
```
, plus
```
J/K
```
navigation.

Motion

Row hover: background shift to
```
oklch(96% 0.002 250)
```
light /
```
oklch(20% 0.005 250)
```
dark, 80ms.
Active/selected row: brand accent tint at ~6% opacity + 2px accent left border.
Inline save / confirm: 150ms fade + check icon swap.
No scroll-triggered reveals in table areas — they stutter long lists.
Sort arrow, filter open, column resize: instant or <100ms.

排版

UI字体：IBM Plex Sans或Inter，字重400/500。
等宽字体：IBM Plex Mono或Geist Mono，用于ID、哈希值、时间戳、代码、版本号、键盘按键（kbd）。
正文字号：默认13-14px；高密度表格中可使用12px。
所有数值列、指标卡片、时间戳、时长均使用
```
tabular-nums
```
格式。

ID和代码使用

font-variant-numeric: tabular-nums slashed-zero

。

标题：紧凑风格。页面标题18-20px，章节标题14-15px，字重500。

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

品牌强调色：仅一种 — 用于主要操作、激活标签页、选中行的强调色高亮。
语义化低饱和度OKLCH颜色（亮度50-60，色度≤0.15）：
- 成功色
```
oklch(60% 0.12 150)
```
- 警告色
```
oklch(72% 0.13 75)
```
- 危险色
```
oklch(58% 0.15 25)
```
- 信息色
```
oklch(62% 0.12 240)
```
禁止使用高饱和度色调 — 仪表盘需长时间显示在屏幕上。
状态点、徽章文字、芯片文字使用语义化颜色；背景保持中性色。

间距与布局

4/8px间距刻度 — 绝对不要使用5、7、9、10px。严格遵循4/8/12/16/24px。
表格单元格：默认
```
px-3 py-2
```
；超高密度场景使用
```
px-2 py-1.5
```
。
工具栏行：
```
gap-2
```
，控件高度
```
h-9
```
，文字
```
text-sm
```
。
侧边栏：窄款（200-240px），轻微背景色调，图标+标签；禁止纯深色。
卡片：内边距
```
p-4
```
，圆角8px；使用1px边框而非阴影。

数据展示

所有数值列：
```
tabular-nums
```
格式 + 右对齐。
所有ID/哈希值/提交记录/时间戳：等宽字体。
行内迷你走势图（sparklines）用于趋势上下文。高度24-40px，单色。
分类图表：横向条形图。时间序列：带15%→0%渐变的面积图。禁止饼图。
差值：纯文本
```
+12.5%
```
搭配语义化颜色，无需胶囊样式。
空状态：一行提示文字 + 创建功能的键盘快捷键。

导航栏与导航

面包屑+标签页+子工具栏组合是符合预期的，完全可行。
筛选芯片：轮廓样式，可移除（
```
×
```
），无填充胶囊。
全局命令面板：
```
⌘K
```
快捷键在头部搜索区域可见。
行操作：悬停时显示内联图标；同时支持键盘操作。
分页：文本
```
Page 3 of 42
```
+
```
tabular-nums
```
格式，外加
```
J/K
```
导航快捷键。

动效

行悬停：背景切换为浅色模式下的
```
oklch(96% 0.002 250)
```
/ 深色模式下的
```
oklch(20% 0.005 250)
```
，时长80ms。
激活/选中行：品牌强调色淡色（约6%不透明度）+ 左侧2px强调色边框。
内联保存/确认：150ms淡入淡出 + 勾选图标切换。
表格区域禁止滚动触发的揭示动画 — 长列表中会卡顿。
排序箭头、筛选展开、列宽调整：即时或时长<100ms。

Reference files to read first

需优先阅读的参考文件

Load these from

../ui-craft/references/

```
dashboard.md
```
— primary reference; metric cards, charts, sidebar, tables
```
typography.md
```
— tabular-nums, mono pairing, scale
```
motion.md
```
Rendering Performance — compositor pipeline, layer promotion, scroll-linked motion
```
responsive.md
```
— tablet + laptop breakpoints, toolbar collapse

Skip

inspiration.md

(landing-page focused),

sound.md

从

../ui-craft/references/

加载以下文件：

```
dashboard.md
```
— 主要参考；包含指标卡片、图表、侧边栏、表格
```
typography.md
```
— tabular-nums、字体搭配、字号刻度
```
motion.md
```
渲染性能 — 合成器管线、图层提升、滚动关联动效
```
responsive.md
```
— 平板+笔记本断点、工具栏折叠

跳过

inspiration.md

（聚焦着陆页）、

sound.md

。

Anti-patterns for THIS style

本风格的反模式

Serif fonts anywhere in chrome or data. Editorial is a different variant.
Proportional figures in numeric columns — always
```
tabular-nums
```
.
Saturated hues — reads as consumer app, not operator tool.
Colored pills on every delta — plain text in semantic color.
Pie charts, donut charts, 3D charts. Ever.
Vertical bar chart for time-series — use area/line.
Uniform colored top borders on metric cards.
Card grids with heavy whitespace — if it feels airy, wrong variant.
Full-dark sidebar (common AI pattern) — subtle tint only.
Scroll-triggered reveals or stagger animations in table areas.
Hidden keyboard shortcuts — always surface
```
⌘K
```
, row shortcuts, help trigger.
Vague loading states — show skeleton rows matching column structure, not generic spinner.

导航栏或数据区域使用衬线字体。编辑类界面属于不同变体。
数值列使用比例数字 — 必须始终使用
```
tabular-nums
```
。
高饱和度色调 — 会让人感觉是消费级应用，而非操作员工具。
每个差值都使用彩色胶囊 — 应使用语义化颜色的纯文本。
饼图、环形图、3D图表。绝对禁止。
时间序列使用垂直条形图 — 应使用面积图/折线图。
指标卡片使用统一颜色的顶部边框。
带大量留白的卡片网格 — 如果感觉轻盈，说明选错了变体。
纯深色侧边栏（常见AI模式）— 仅允许轻微色调。
表格区域使用滚动触发的揭示或 stagger 动画。
隐藏键盘快捷键 — 必须始终显示
```
⌘K
```
、行操作快捷键、帮助触发按钮。
模糊的加载状态 — 应显示与列结构匹配的骨架行，而非通用加载 spinner。