能力卡围绕平台中枢呈弧形展开，越靠核心的能力越先被调用；每张卡都标注可量化验收口径，方便与前端交付对齐。
mesh 渐变以 4 个径向光斑合成，单层 blur ≤ 60px，GPU 合成耗时控制在 4ms 内。
首帧 16.7ms 内完成合成12 列栅格 + 便当盒跨列，卡片最小高度 148px，信息密度较传统三列卡提升约 1.8 倍。
跨列 4/5/7 三档hover 抬升 2–4px、描边发光 1px，动效全部走 transform/opacity，避免布局抖动。
CLS < 0.02条形/环形/趋势三类基础图元，颜色只取自平台令牌，禁止另起色相。
图元复用率 78%接入 LCP/INP/CLS 三指标埋点，异常波动超过 8% 即向设计侧告警。
告警阈值 8%四类高频场景共用同一套创意矩阵骨架，hover 放大 1.06 倍以强调可探索感，缩放仅作用于图片层、不触发重排。
所有图形色值一律取自令牌：主色青蓝承担 30% 视觉权重，强调暖粉仅用于关键数字与激活态，占比不超过 10%。
统计窗口 15 分钟，采样 12 万次请求，单位毫秒。
面向设计与前端的协作清单，每条都给出做法与阈值，可直接贴进需求评审。
mesh 渐变放在 position:absolute 的独立层，单层透明度 ≤ 0.22；正文区域对比度保持 ≥ 4.5:1，用中性深底承托文字。
用内联 SVG feTurbulence 生成噪点层，opacity 取 0.5、mix-blend-mode:overlay 后实际可见度约 0.06；超过 0.1 会显脏并拉低文字清晰度。
便当盒统一 grid-template-columns:repeat(12,minmax(0,1fr))，跨列只用 4/5/7 三档，1024px 以下自动降为 12 或 6 跨列，防止窄屏挤压。
所有配图放进固定比例容器并加 object-fit:cover，显式写 width/height 或用 aspect-ratio，避免布局跳动；单图压缩至 ≤ 180KB。
抬升 2–4px、描边走 1px 主色或强调色，过渡 150–450ms；配合 prefers-reduced-motion 关闭跑马灯与位移动效，保证可访问性。
LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.02；首屏图片懒加载，非首屏资源用 loading="lazy"，动效只用 transform/opacity 避免重排。
每一步都绑定交付物与检查项，让前沿设计真正被工程化落地。
梳理 5 个核心能力与 4 类场景，输出 12 列栅格跨列映射表，明确 4/5/7 三档跨列的使用边界。
在根类落地配色与间距令牌，先做静态极光光晕叠层，确认透明度 ≤ 0.22 且正文对比度 ≥ 4.5:1。
把能力卡、场景图、数据条封成组件，统一引用 --sh-*/--r-*/--ease；动效只挂 transform 与 opacity。
实测 LCP/INP/CLS 三指标，跑一遍 320px 到 2560px 的溢出检查，确认无横向滚动条后交付。
来自 AI 平台团队在极光风改版中最常问的四个问题。
不会，只要把光晕做成纯 CSS 径向渐变并通过 GPU 合成。注意单层 blur 不超过 60px、光斑不超过 4 个，实测合成耗时约 4ms，LCP 增量小于 0.2s。
1024px 断点把 7/5 跨列合并为 12 跨列，4 跨列并成 6；640px 及以下全部单列堆叠，并把卡片内边距收到 --sp-3，确保点按区不小于 44px。
遵循 60/30/10：中性深底约 60%、主色青蓝约 30%、暖粉强调色控制在 10% 以内，仅用于按钮、激活态与关键数字，绝不做整块背景填充。
噪点层要放在内容之下并设 pointer-events:none，可见度压到 0.06 左右；若背景很亮，可改用 soft-light 混合模式或再降 0.02 透明度。
来自三位平台负责人的真实反馈，聚焦差异化体验与可量化收益。
“极光背景加上创意矩阵，让我们的 AI 平台第一次有了自己的视觉记忆点，用户停留时长提升了约 27%，而不是换了个壳。”
“把数据可视化图元的色值全部收进令牌后，跨页面返工从每周 6 小时降到 1 小时以内，设计走查也快了一倍。”
“清单里那六条阈值非常实用，尤其是噪点 0.06 和 CLS 0.02，直接帮我们在上线前拦掉了两次体验回退。”
把这套令牌体系接入现有设计系统，可在两周内完成一次高保真改版：先对齐配色与栅格，再替换能力卡与数据面板，最后跑一遍全断点溢出与性能验收。