样式骨架档
￥2.8万 / 6 周
- 响应式设计断点 3 档（1680 / 1024 / 640）
- 设计令牌 42 个，色板收敛至 8 色
- Lighthouse 性能基线 ≥ 85
- 交付 Figma 变量表 + CSS 变量映射
01 / Services
服务与价格档位
按平台成熟度分档交付，每档绑定可验收的量化指标，避免为未使用的算力付费。
平台组件档
￥6.5万 / 10 周
- 含 36 个平台业务组件（训练/推理/标注）
- 首屏 P75 ≤ 1.8s，CLS ≤ 0.05
- 接入埋点 60+ 事件，漏斗可视化
- 无障碍对比度 ≥ 4.5:1 全量校验
数据决策档
￥15万起 / 按里程碑
- 实验平台打通，A/B 分流偏差 ≤ 1%
- 指标字典 + 血缘追溯，覆盖 100% 核心看板
- 灰度发布看板，异常回滚 ≤ 5 分钟
- 专属设计系统维护与季度审计
规模化期：以吞吐与单位成本为北极星
当并发推理请求跨过 5,000 QPS，界面重心从功能堆叠转向资源可观测。本档位把集群利用率、单位 Token 成本与排队时长放进同一视图，任何一次扩缩容都能被数据解释。
- GPU 利用率目标区间 65%–78%，低于 55% 触发调度告警
- 单卡冷启动 ≤ 12s，预热池命中率 ≥ 80%
- 看板刷新频率 5s，历史保留 90 天
智能运营期：从看板到决策闭环
把实验平台、指标字典与告警中心串成一条链路：发现问题 → 定位分群 → 生成实验 → 回收显著性。界面样式上以新科技风格的坐标网格承载时间轴，让每一次干预都有前后对比。
- 实验显著性阈值 p < 0.05，最小样本量 8,000/组
- 分群维度 ≥ 12 个，支持实时下钻到会话级
- 决策记录留痕，复盘可追溯到单次发布
02 / Playbook
实用指导清单
面向人工智能平台开发前端团队的可执行条目，每条都给出参数或阈值，可直接落进验收单。
先定数据契约再画界面
把训练、推理、标注三类核心指标写成 schema（名称/单位/刷新频率/责任人），接口字段与前端展示字段 1:1 对齐；契约评审通过率要求 100%，任何看板不得出现前端硬编码的换算系数。
响应式按四档断点收敛
使用 min-width:1600px / 1024px / 640px / 380px 四档，容器宽度走 1140→1400→1680 阶梯；网格列在超大屏由 3 列升为 4 列，避免居中窄柱两侧留白。
首屏预算写进 CI
JavaScript 首屏 ≤ 180KB（gzip），首屏图片单张 ≤ 220KB 且必须 lazy；CLS 控制在 0.05 内，媒体元素用固定宽高比容器占位，防布局跳动。
发光与网格只做点缀
霓虹描边仅用于激活态与关键数字，面积占比 ≤ 10%；网格背景线透明度 ≤ 0.35，并用遮罩限制在首屏上部，避免长时间阅读疲劳。
对比度与焦点不可省
正文对比度 ≥ 4.5:1，大号标题 ≥ 3:1；所有可点击元素提供 :focus-visible 2px 主色轮廓，点按区最小 44×44px，蒙层与玻璃面板必须同时写 -webkit-backdrop-filter。
用指标驱动设计迭代
上线后跟踪三个数：任务完成率、平均配置耗时、错误恢复时长。任一项连续两周劣化超过 8%，触发一次样式回滚评审，而不是继续叠加新模块。
03 / Dashboard
数据可视化面板
把平台运行态压缩成可扫读的图形层：横向条看资源占比，方块看关键数值，全部来自真实埋点而非估算。
推理链路各环节耗时占比（P75，单位 ms）
99.95%推理服务可用性（近 30 天）目标 ≥ 99.9%
372ms端到端响应 P75预算 ≤ 400ms
0.71单位 Token 成本指数环比 -9.2%
3.4%标注返工率阈值 ≤ 5%
04 / Compare
解决方案对比
三种常见平台建设路径的取舍，用可验证的能力项而非形容词来判断。
| 能力项 | 自建内核型 | 托管编排型 | 混合灰度型 |
|---|---|---|---|
| 上线周期 | 10–14 周 | 3–5 周 | 6–8 周 |
| 算力成本弹性 | 完全可控 | 受供应商档位约束 | 核心自持，峰值外溢 |
| 数据可观测性 | 需自建血缘 | 平台内建 | 双轨校验 |
| 灰度回滚 | 依赖自研发布系统 | 一键回滚 | 分钟级切流 |
| 前端改造量 | 高，需重写控制台 | 低，复用样式令牌 | 中，按模块替换 |
| 适合阶段 | 有算法中台的团队 | 快速验证业务假设 | 规模化且成本敏感 |
05 / Numbers
关键数据条
四个数字定义这套人工智能平台界面是否达标，任何一项未过线即视为样式未验收。
42设计令牌数量 · 覆盖间距/圆角/景深
4视觉断点 · 1680 / 1024 / 640 / 380
60+埋点事件 · 覆盖训练到推理全链路
≤0.05CLS 布局偏移预算（移动端）
06 / Feature
图文混排特写
以时间轴纵向排布的方式，看一个平台页面如何从数据浪涌变成可读的决策线索。
坐标网格 + 刻度：让时间轴不再是装饰
本页视觉签名由「网格坐标背景线 + 刻度」构成：竖向刻度对应发布批次，横向网格线对应指标阈值。新科技风格的发光描边只出现在当前激活批次上，形成唯一视觉焦点。
- 刻度间距 64px，与栅格节奏一致，缩放不产生半像素模糊
- 激活批次高亮仅用 2px 主色描边，不使用整块填充
- 移动端刻度降为每 96px 一条，保证标签不重叠
- 所有装饰网格标记 aria-hidden，不干扰读屏顺序