栅格先定后画
先写 12 列栅格与 --sp-* 间距令牌，再画组件。容器宽度 1140 / 1400 / 1680 三档，列间距 16–24px，模块左边缘偏差控制在 ±1px 内。
Implementation Checklist
人工智能平台网站上线前的 6 条硬指标
以下每条都给出可验证的阈值与做法，验收时逐条打勾即可，避免“看起来很酷但用不起来”的赛博朋克外壳。
断点只留四个
1600 / 1024 / 640 / 380 四档足够；1600 以上把特性卡与价格卡由 3 列升为 4 列，避免超宽屏中间一条窄柱、两侧大片空白。
数据可视化限色
图表主色只允许本页主色系，序列色 3–5 条上限；同屏高饱和面积不超过 10%，关键数值用强调色点亮，其余降到中性灰。
动态交互设上限
同时运行的动效不超过 3 处；过渡统一用 150 / 250 / 450ms 三档；必须提供 prefers-reduced-motion 降级，避免前庭敏感用户不适。
图片统一裁切
所有配图放进固定宽高比容器并 object-fit:cover，首屏主视觉 16:10、侧栏图 3:5；加 loading="lazy"，避免布局跳动与带宽浪费。
无障碍与灼烧检测
正文对比度 ≥ 4.5:1，点按区 ≥ 44×44px，焦点环 2px 可见；上线前跑一次 320px 宽度测试，确认无横向滚动与文本溢出。
Workflow
从意图到上线的四段式工作流程
每段都有明确的交付物与时长区间，方便与设计、算法、前端三方对齐验收口径。
① 信息架构对齐
把模型能力翻译成用户任务：智能搜索、数据可视化、推理调用三类入口各占一屏，导航层级不超过两级。
- 产出：页面地图 + 栅格标注图
- 时长：3–5 个工作日
② 视觉母题与令牌
以波纹/波浪矢量作底纹，主色承载结构、强调色只点关键数字与按钮，形成冷暖对比而不刺眼。
- 产出：配色令牌 + 组件库
- 时长：5–8 个工作日
③ 动效与埋点接入
数字滚动计数、横向滚动作品带、卡片悬浮景深三类交互；同时埋点首屏可读时长、搜索命中率。
- 产出：交互规范 + 埋点清单
- 时长：4–6 个工作日
Selected Work
横向滚动：四个已落地的 AI 平台页面
左右滑动查看。每张卡片标注栅格用法与关键指标，用真实业务口径说明设计取舍。
模型市场 · 卡片网格
3 列卡网格，卡片最小宽 280px；首屏加载 1.2s，筛选后结果 200ms 内刷新。
网格系统响应式
监控看板 · 数据可视化
同屏 6 个指标卡 + 2 张时序图；序列色不超过 5 条，异常点用强调色单点标记。
数据可视化对齐
智能搜索 · 语义候选
输入 1 字符即出候选，键盘可达；命中项高亮，无结果时给出改写建议。
智能搜索动态交互
开发者文档 · 双栏锚点
左正文 8 列、右目录 3 列并粘性跟随；代码块横向滚动不撑破版心。
用户体验科技品牌
Service Tiers
三档服务：按页面数量与交互复杂度计价
价格含栅格视觉系统、响应式实现与一次无障碍复核；增项按页面或动效模块单独报价。
Key Numbers
关键数据条：可被复核的量化结果
以下为多个 AI 平台项目上线后 30 天内的中位数，统计口径统一，便于横向对照。
12 列栅格对齐精度边缘偏差 ≤ 1px
+34%搜索命中点击率候选分层后提升
1.6s首屏可读时长移动端 4G 中位数
4 档响应断点覆盖320–2560 无溢出
Voices
来自算法、产品与前端三方的评价
评价聚焦“是否真的提升了协作效率与用户理解成本”，而非视觉炫技。
“栅格标注图一到手，算法团队终于能在同一套坐标里讨论面板该怎么放。看板改版后，值班同学定位异常从 6 分钟压到 90 秒。”
算法平台负责人 · 推理服务“智能搜索的候选分层是我们最需要的改动：输入一个字符就给结果，命中率提升三成以上，客服重复提问明显下降。”
产品经理 · 开发者门户“动效上限写进规范后，前端不再各自调时长。统一到 150/250/450ms 三档，回退逻辑也已经内置，维护成本降了一半。”
前端工程师 · 设计系统组