大模型推理服务
把模型网关、批处理队列与缓存层拆成三列栅格，请求路径可视化，便于定位长尾延迟。
P95 300ms批大小 32
01 / Applied
六类可落地的 AI 平台应用场景
每个场景都映射到同一套 12 列栅格与响应式设计规则，卡片采用图标居中大留白排布，保证移动端与超宽屏下模块对齐一致。
虚拟现实训练舱
VR 场景每帧预算 11ms，用栅格化图层切分渲染区域，降低头显端掉帧率。
72 FPS丢帧 <1%
增强现实导览
AR 叠加层走独立合成通道，与主内容共享栅格列宽，避免遮挡关键操作按钮。
识别 180ms叠加层 60Hz
实时数据洞察
指标看板按 4 列栅格自动换行，超宽屏扩展到 6 列，横向空间不浪费。
刷新 1s图表 24 组
低代码工作流编排
节点画布用吸附式栅格对齐，拖拽落点误差控制在 4px 以内，减少误连边。
吸附 4px节点 200+
模型安全审计
审计日志按时间与风险双维度分列，高风险事件在 10 秒内推送至值守通道。
告警 10s留存 180 天
02 / Numbers
把性能写进栅格：四条硬指标
下列数值是 AI 平台展示站在真实压测下的目标线，任何一次改版都应以此为准绳，而不是凭观感判断。
1.2s首屏内容渲染 LCP目标 ≤1.5s，超时即回滚
0.03累计布局偏移 CLS图片必须预留宽高比容器
60 FPS动态效果帧率动画只用 transform / opacity
44px最小点按区边长移动端按钮与导航项下限
Case 01
折页式知识库首页
左目录 + 正文的双栏栅格，滚动定位误差 <8px，长文阅读跳出率下降 22%。
Case 02
推理监控大屏
4 列数据条在 2560px 下扩展为 6 列，横向信息密度提升 50%。
Case 03
VR 训练舱入口
呼吸式缓慢缩放替代弹跳动画，眩晕反馈下降 35%。
Case 04
控制台重构
统一 4/8pt 间距节奏后，组件复用率从 41% 提升到 78%。
03 / Playbook
六条能直接照做的性能落地清单
每一条都给出做法、参数与验收阈值，照着改就能在 AI 平台上拿到可测量的效率提升。
栅格先定列宽，再放内容
以 1140px 为基准容器，12 列、列间距 24px；卡片跨 4 列、间距 16px。所有子项加 min-width:0，长英文模型名才不会撑破列宽。
容器 1140 / 1400 / 1680列间距 24px
图片必须预留宽高比容器
所有展示图放进 aspect-ratio 容器（16/10 或 4/3）再 object-fit:cover，页面加载阶段不会跳动，CLS 可稳定压到 0.03 以内。
CLS ≤0.05loading=lazy
动画只碰 transform / opacity
呼吸缩放与呼吸光点统一用 transform，配合 0.45s cubic-bezier(.16,1,.3,1)。避免动画 width/height/top，防止主线程被布局计算拖住。
帧率 ≥55 FPS时长 .45s
玻璃层数不超过 2 层
backdrop-filter 每多一层，移动端合成开销约增 8ms。导航与目录卡各一层即可，并同时写 -webkit- 前缀兼容 Safari。
≤2 层模糊模糊 10–14px
响应断点按内容定，不按设备定
主断点 1024px（目录折为两列）、640px（单列堆叠）、380px（内边距收到 12px、按钮满宽）。超宽屏 1600px 起把容器放宽并将卡片扩到 6 列。
1024 / 640 / 3801600+ 放宽
为动效偏好留一条静音通道
用 prefers-reduced-motion 关闭所有循环动画，只保留不透明度切换；横向案例带同时取消 scroll-snap，保证键盘与眩晕敏感用户可用。
降级动画 0.01ms键盘可达
04 / Compare
三档 AI 平台展示方案怎么选
按团队规模与性能预算挑选，别一上来就堆最重的方案；先跑通再扩容，效率优先。
静态栅格版
≤150KB首屏资源
- 适合：验证消息与内容结构，单人可维护
- 栅格：12 列固定断点，无动态数据
- 指标：LCP ≤1.2s，CLS ≤0.03
动态栅格版
≤420KB首屏资源
- 适合：需要实时指标与动态效果的中型平台
- 栅格：12 列 + 横向滚动案例带 + 数据条
- 指标：P95 300ms，动画 55 FPS 以上
沉浸交互版
≤900KB首屏资源
- 适合：含 VR / AR 入口的展示型平台
- 栅格：栅格 + 3D 叠加层独立合成通道
- 指标：帧率 72 FPS，掉帧率 <1%