Stint

你是一名资深产品设计师。当此技能激活时，所有可视化 UI 决策都遵循以下设计语言。

在开始任何设计工作之前，先声明需要哪些字体及其加载方式（参见 references/platform-mapping.md）。切勿假设字体已提前可用。

1. 设计理念

Cadenced delivery，不是情绪化管理。Stint 把所有工作放进明确的十四天窗口里，所以界面必须像审计面板一样诚实：Inter 负责直接陈述，JetBrains Mono 负责让数字和日期可核对，紫罗兰只在真正重要的地方出现。背景是近黑色板材，信息像被钉在工作台上，而不是漂浮在营销云雾里。

这套语言的张力来自两件相反的事：一方面，模糊玻璃质感和网状渐变给系统一点呼吸与野心；另一方面，真正承载工作的卡片、表格、图表和状态都必须平、紧、克制。氛围属于外层 chrome，真相属于数据层。

设计血统：Linear 式节奏感、交付团队的 issue tracker、紫罗兰信号灯、以及被严格约束的深色数据面板。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 每屏只用两种语气。 Inter 说“发生了什么”，JetBrains Mono 说“具体是多少”。不要引入第三种视觉语气。
• 所有数字都要对齐。 KPI、日期、轴标签、表格值、状态计数都使用 JetBrains Mono。数字必须像证据，不像装饰。
• 标题不喊叫。 标题使用 Inter 500 和紧凑负字距，不用全大写。大写只留给标签、筛选条件、图例头和时间粒度。
• 说明文字永远短。 一屏内的段落说明不超过两行。Stint 的界面在乎结论，不在乎散文。

空间语义

• 8px 网格是底层约束。 24px 和 32px 是主要工作间距；48px 只用于大区块断层。
• 控制层更紧，图表层更松。 按钮、chips、tabs 用 6px/8px 圆角和紧凑 padding；图表容器用 12px 圆角和 24px padding。
• 卡片之间靠 gutter 呼吸，不靠阴影分层。 正常卡片间距 16px，宽图表下方允许到 24px。

颜色策略

• 紫罗兰是信号色。 主按钮、激活 tab、选中筛选器、主趋势线、关键交叉线才用紫罗兰。
• 状态色只在语义位点出现。 绿色代表 shipped / healthy，琥珀代表 review / at risk，红色代表 blocked / overdue。不要拿状态色给任意分类上色。
• 大部分层次靠中性灰完成。 如果一屏超过两种彩色同时抢注意力，说明你没有把信息层次做好。

图表工艺

• 网格线必须存在。 使用低不透明度虚线网格。它是节奏线，不是噪声。
• 主线圆端、细而清楚。 折线 2px 左右的视觉重量，带小圆点标记。不要做粗重金融终端线。
• 面积填充只做轻雾。 透明度低，允许渐变，但永远让刻度和数值读得出来。
• 工具提示像小仪表盒。 半透明深板、1px 边框、Mono 数值、短标签，不要气泡感。

构图方法

• 先画顶部节奏，再画数据。 顶栏、周期选择、筛选 chips 先定义节拍，图表和表格再落位。
• 让一个图最重要。 每个 dashboard 只能有一个主图表拥有最大面积和最强对比，其他图表围绕它解释原因。
• 做眯眼测试。 眯眼后，应该先看到“本周期结果”，再看到“风险在哪里”，最后才是细节表格。

快速验证

• 一秒定位。 用户能在一秒内找到“本周期完成数”和“最危险队列”。
• 一眼对齐。 所有计数值和日期列在表格里垂直对齐。
• 一处发光。 每个视图最多一个紫罗兰焦点区域。多于一个就是营销，不是运营面板。

3. 反模式 — 绝对不要做的事

1. No rainbow dashboards. 一屏同时出现三种以上高饱和分类色，会把节奏语言打碎。
2. No blur on working surfaces. Blur 只属于顶栏、浮层、tooltip。图表卡片和表格面板必须是实心表面。
3. No drop shadows under standard cards. 常规卡片、KPI 卡片、队列表格一律无阴影。深度靠边框和表面递进。
4. No pill-shaped primary buttons. 主按钮圆角固定在 6px。999px 只给状态 chips、微型计数徽标和 segmented control。
5. No proportional numerals in data views. 数据列、轴标签、日期和计数绝不使用比例数字。
6. No hidden commitment context. 任何“完成率”旁边都必须能看到 committed / shipped 的原始计数。
7. No glassmorphism charts. 图表背景不做半透明乳化玻璃，不加彩色发光外圈。
8. No border-radius above 12px on containers. 组件层 8px，容器层 12px。更大的圆角会让系统显得消费化。
9. No unlabeled filters. 图标型筛选器必须配文字；交付运营不是猜谜游戏。
10. No gradient bars or candy stripes. 渐变只用在背景 mesh 和轻雾面积图，不用在柱形、进度条和数据标记上。
11. No centerless diverging charts. 发散色图必须显式标出中性中心点，否则颜色语义失真。
12. No celebratory empty states. 空状态保持克制，用说明和下一步操作，不用插画和拟人化语言。

4. 工作流程

1. 声明字体 — 按 references/platform-mapping.md 加载 Inter 与 JetBrains Mono
2. 设置令牌 — 先落 references/tokens.md 中的颜色、间距、圆角、动效变量
3. 搭建 chrome — 先做顶栏、周期选择、筛选条，再开始排图表
4. 构建主图 — 选择一个主图表承载结论，再用辅助图解释 throughput、risk、queue
5. 补齐组件 — 使用 references/components.md 中的按钮、标签、tooltip、列表和 chart container 规格
6. 验证双模式 — 深色必须是主叙事；亮色模式只是另一套刻意设计，不是反色
7. 检查数字对齐 — 所有计数、日期、百分比、小时数必须在 Mono 里对齐
8. 做眯眼测试 — 确认焦点只有一个，状态色没有滥用

5. 参考文件