Drift

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

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

1. 设计理念

Signal glamour。Drift 不是冷静的企业 dashboard，而是把转售市场做成一场夜色中的情报秀场。近黑画布吞掉噪音，热粉信号只落在真正值得行动的地方，等宽数字像交易 tape 一样冷静地给出判断。设计血统来自奢侈品 resale editorial、夜间店橱窗、drop culture 海报和交易终端。主要张力是“欲望陈列”对“成交证据”: 大字号制造戏剧性，ledger 式数据结构负责让决定成立。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题承担戏剧性，正文不得抢戏。 Space Grotesk 只给标题、模块名和大数值；正文与说明全部回到 Inter。
• 数值一律等宽。 KPI、轴标签、价格、时间戳、排名、delta、ID 全部使用 JetBrains Mono。
• 全屏最多两块真正高音量的大字。 再多就从“秀场”变成“海报噪音”。
• 元信息必须是低位信号。 全大写 mono label 可以多，但只能用 --text3 或 --text4。

间距语义

• 4px / 8px： 标签与点标、icon 与文字、数据微调。
• 16px / 24px： 控件内边距、列表行、KPI 单元、图表说明。
• 32px / 48px： 面板之间的结构间距。
• 64px+： 只留给主标题区、章节切换和页面呼吸。

颜色策略

• 背景只做黑阶变化，不做彩色铺底。 彩色必须稀缺。
• 热粉是行为信号，不是通用装饰。 CTA、选中态、关键 delta、当前追踪对象才配用 --accent。
• electric yellow 只做第二信号。 用于提醒“正在升温”“接近稀缺”，不要和 error 混用。
• 图表先靠结构成立，再靠颜色加速识别。 去掉填充渐变后，线条、轴线、标注仍必须可读。

构图方法

• 先搭戏台，再放图表。 让用户先感知“今天最值得看什么”，再进入探索路径。
• 分析台要有一个主视角。 一个主图、一列筛选、一块详情，不要所有卡片同权。
• 大标题必须与数据关系紧密。 它可以夸张，但必须紧贴当前主题，不得成为空洞营销文案。
• 玻璃与 glow 只包裹重点容器。 页面上同时发光的容器不能超过 3 个。

图表语气

• 网格线是节拍器。 用低透明虚线，不许粗，不许喧宾夺主。
• tooltip 像夜色里的 price callout。 黑玻璃底、亮色数字、极短说明。
• 图例不应把用户赶走。 能直接标注的数据，优先直标。
• brush 与 crosshair 可以存在，但必须安静。 这是探索工具，不是交互动效秀。

快速验证

退后一臂距离眯眼看屏幕：

1. 你应先看到一个主标题或主数值，而不是平均分布的卡片矩阵。
2. 粉色只该出现为“行动入口”或“焦点对象”。
3. 即使关掉所有 glow，层级仍要清楚，因为真正的结构来自排版、边框和留白。

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

1. No 彩色页面底。 背景永远是黑阶或近白中性，不要整页粉色渐变。
2. No 圆滚滚数据卡。 卡片最大圆角 10px；只有 chip / button 可以用 pill。
3. No 满屏发光。 glow 只服务焦点面板与关键数据，不得铺满所有图表。
4. No 品牌粉色正文。 正文与说明文本绝不使用 --accent。
5. No 无边界玻璃。 玻璃容器必须有 1px 边界或内高光，否则会融进背景。
6. No 把 yellow 当 error。 electric yellow 只表示稀缺、升温、注意，不表示失败。
7. No 超过 6 条同权系列线。 类别过多时先聚合，再绘制。
8. No 粗重坐标轴。 轴线必须退居辅助位置，不能像表格边框一样抢眼。
9. No 大段全大写正文。 全大写只保留给 mono label、时间与微型元信息。
10. No 厚阴影实体卡。 这是黑玻璃与夜场系统，不是纸片叠层系统。
11. No 悬浮 toast 雨。 告警与状态进入右侧详情区或图表内，少打断。
12. No 机械式纯后台文风。 页面必须保留一点 editorial 欲望感，否则就失去 Drift 的辨识度。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解 Space Grotesk、Inter、JetBrains Mono 的加载方式
2. 设置令牌 — 应用 references/tokens.md 中的颜色、字阶、间距、动效与数据色板
3. 先选主焦点 — 确定本屏最重要的品类、城市、卖家或 drop，再安排大标题与主图
4. 构建组件 — 使用 references/components.md 的按钮、glass panel、filter chip、tooltip、chart container 与 detail rail
5. 检查信号密度 — 粉色是否过多？yellow 是否只出现在二级提醒？glass 是否只包住重点区域？
6. 验证双模式 — 暗色像夜场情报台，亮色像稀有商品目录，但两者都必须保留相同的张力
7. 测试极端情况 — 单个卖家、空数据、价格暴涨、价格暴跌、过长城市名、超长品类名
8. 平台适配 — 查阅 references/platform-mapping.md 输出 CSS 变量、SwiftUI 常量与 Tailwind 映射

5. 参考文件