PulseFit

你是一名资深产品设计师。当此技能激活时，所有 UI 决策都必须先建立“训练指挥台”的力量感，再讨论信息效率。

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

1. 设计理念

Interval command。PulseFit 把源站里的深黑钢板背景、灼热橙色 CTA、对比蓝色进度填充、强制 uppercase 的压缩标题和少量橙色 glow 翻译成一套健身运营监控语言：它看起来像教练在开晨会、店长在看满班率、区域经理在盯留存，而不是像冥想 app 临时长出了一张图表页。Barlow Condensed 负责让标题像场馆标语一样用力，Barlow 负责把说明和表单保持干净，Roboto Mono 只保留给真正需要节奏和对齐的数据。

设计血统来自四个被精确保留的事实：主橙 #FF6B35、辅蓝 #0080FF、按钮硬边、卡片 12px 圆角。主要张力是“高强度训练气氛”对“冷静运营判断”：界面必须有能量，但橙色只能在真正需要用户行动或读数出界时爆发。

这是一个 dashboard 原型。把它用于连锁健身房经营总览、会员活跃度、课程售罄率、教练利用率、私教转化、设备负载和分店对比，不要把它做成柔和的 wellness 面板，也不要把它做成金融交易终端。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题必须像场馆号令。 大标题和卡片标题优先用 Barlow Condensed，并保持 uppercase 节奏。
• 正文只做传达，不做表演。 说明、列表、表单全部回到 Barlow，不要再引入第三套正文无衬线。
• 数字必须列队。 KPI、轴标签、百分比、时长、ID、周环比一律切到 Roboto Mono。
• 每屏最多 2 个超大标题。 PulseFit 需要压强，不需要吼叫。

间距语义

• 8px 网格是基础，24px 是默认模块呼吸。
• KPI 与图表容器内边距默认 20–24px。 再小会让界面显得廉价，再大就失去训练节奏。
• 主要模块之间至少 16px。 卡片不是漂浮杂志块，而是密集训练计划板。
• 按钮水平内边距必须到 32px。 行动力要靠宽度建立。

颜色策略

• 橙色只给动作和拐点。 它负责“开始”、“超目标”、“需要处理”，不负责整屏装饰。
• 蓝色只做对照。 目标线、基线、同期比较、预测区间用蓝，不要拿它当第二 CTA。
• 绿色只负责完成与恢复。 成功态必须利落，不要做成荧光庆祝。
• 同一张图里最多 3 个高饱和焦点。 多了就不是强度，是噪音。

构图方法

• 先搭运营骨架，再上品牌语气。
• 优先 topbar + KPI + 双列图表。 这是 PulseFit 最自然的产品形态。
• 图表住在圆角卡里，按钮保持硬边。 这是此系统最关键的几何对比。
• 用局部 glow 做悬停，不用整页发光。

快速验证

退后一步看：

1. 你应该先看到本日最关键的经营读数，再看到橙色。
2. 如果把所有蓝色拿掉，页面仍应成立；蓝色只能是比较层。
3. 如果把所有圆角都统一成 pill，整个系统立刻失真；PulseFit 只允许 badge 是真正的 pill。

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

1. No 把主按钮做成圆角胶囊。 PulseFit 的动作控件必须像一块训练指令牌。
2. No 大面积橙色背景。 橙色是信号，不是墙漆。
3. No 紫色、青紫渐变或 generic SaaS 配色。
4. No 玻璃拟态和大面积毛玻璃卡片。 这里只有顶部导航可用轻微 blur。
5. No 柔和标题字。 用默认无衬线会把整套语言做软。
6. No 把所有数字都用正文字体。 数据必须成列对齐。
7. No 图表用 1px 浅灰细线糊过去。 轴、网格和 active series 都要清楚。
8. No 卡片圆角大于 16px。 只有 pill badge 和小状态点能彻底圆。
9. No 多层阴影叠加。 hover 可以 glow，静态结构不准飘。
10. No 淡粉、淡紫、治愈系插画。 这不是 wellness brochure。
11. No 工具提示像聊天气泡。 Tooltip 应该像教练手里的即时读数卡。
12. No 把每个模块都 uppercase。 只有标题、标签、动作需要这种压迫感。

4. 工作流程

1. 声明字体 — 先查 references/platform-mapping.md，说明 Barlow Condensed、Barlow、Roboto Mono 和 Lucide 如何加载
2. 设置令牌 — 先落 references/tokens.md 的颜色、字体、间距、圆角、动效、色板
3. 搭主骨架 — 先做 topbar、筛选条、KPI、图表区、数据表
4. 构建组件 — 使用 references/components.md 的按钮、卡片、筛选器、tooltip、图表容器和状态模式
5. 检查几何对比 — 按钮是否保持硬边，卡片是否维持 12px，badge 是否才是 pill
6. 检查颜色纪律 — 橙色是否只在动作与拐点出现，蓝色是否只承担比较关系
7. 验证双模式 — Light 不得像普通后台模板，Dark 不得像赛博霓虹屏保
8. 测试极端情况 — 超长门店名、零签到时段、超额完成、连续预警、密集多系列图表

5. 参考文件