令牌驱动的色彩搭配
全站颜色收进 8 个 oklch 令牌，按 60-30-10 分配：60% 低饱和深底、30% 降饱和主色、10% 暖色强调。任何新页面先查令牌表再动手，色相偏差控制在 ±2° 内，避免同色系页面互相打架。
令牌复用率 86%硬编码颜色 ≤ 4 处
人工智能平台开发 · 样式参考
把 AI 平台的界面，
把 AI 平台的界面，
做成可长期维护的绿色资产
以 50:50 分屏重构「样式参考」这件事：左侧承载现代排版布局与色彩搭配规范，右侧用玻璃拟态＋光晕渐变呈现真实界面切片。目标是把每一次视觉改动，折算成更低的能耗、更少的返工与更稳的用户体验优化。
42%样式 token 复用率提升
1.8s首屏渲染目标上限
3 档分屏断点收敛层级
≤ 90KB单页 CSS 体积预算
玻璃拟态 · 光晕渐变
应用场景：三类 AI 产品界面的分屏范式
同一套 token，切换三种业务语境。每类场景都给出可复用的网格比例与信息密度建议。
训练控制台 · 5:5 双栏，表单左、曲线右
左栏固定 480–560px 承载超参数字段，右栏用 minmax(0,1fr) 承接曲线与日志。日志行高锁 1.55、字段间距走 8pt 节奏，长实验名开启 overflow-wrap:anywhere，避免撑破列宽。目标：单页可视训练任务 ≥ 12 条，滚动深度控制在 2.5 屏内。
数据标注台 · 4:6 非对称，画布让位质检
标注画布给 40% 宽度、质检与标签树给 60%，因为审核动作的信息密度更高。标签项圆角统一 --r-md、命中态只用 --accent-2 细描边点亮，不做整块高饱和填充，长时间作业更护眼。
推理服务台 · 3:7 数据优先，指标先行
左栏 30% 放关键数字（P95 延迟、QPS、失败率），右栏 70% 放趋势与错误分布。关键数字用数字滚动计数呈现，但仅 3 个、每次 0.6s ease-out，避免持续闪动带来的注意力损耗与多余重绘。
核心能力：把样式参考变成可执行规范
三项能力对应可持续设计的三条底线：可复用、可度量、可降级。
分屏式排版布局引擎
以 grid 双栏为骨架，提供 5:5 / 4:6 / 3:7 三档比例，列宽一律 minmax(0,1fr)。断点只在 1024px 与 640px 收口，超过 1600px 容器放宽并加列，避免中间一条窄柱、两侧大片空白。
布局抖动 0 次断点数量 3 档
用户体验优化的动态效果
动效只做三件事：入场淡入上浮、hover 抬升 2–4px、关键数字计数。过渡曲线统一 cubic-bezier(.16,1,.3,1)，时长 0.25–0.45s；并在 prefers-reduced-motion 下全部降级为静态，尊重用户与设备能耗。
动效均时长 0.32s重绘面积 ≤ 18%
实用指导清单：6 条可直接落地的做法
每条都带阈值或步骤，照着改一版页面，通常能同时降低返工率与渲染开销。
先定令牌，再画界面
把颜色、间距、圆角、阴影、字号写成根类 CSS 变量，组件只引用变量。落地标准：一个页面里
padding出现 px 字面量的次数 ≤ 3，其余走 --sp-* 节奏。分屏比例按信息密度定，而非美观
表单+曲线用 5:5，画布+质检用 4:6，指标+趋势用 3:7。判断依据：两侧可交互元素数量比接近 1:1 / 1:2 / 1:3 时体验最稳。
强调色只做 10% 的点亮
把 accent 限制在按钮、激活态、关键数字与细高亮线，单屏高饱和面积 ≤ 10%。避免整条横幅或大块背景使用最高彩度色，长时间使用更不易疲劳。
图片统一裁切，防布局跳动
所有配图放进固定宽高比容器（16/9、16/10、4/3），配 object-fit:cover 并写死 aspect-ratio；首屏图加 loading 优先级，非首屏一律 loading="lazy"，CLS 目标 < 0.05。
断点只收口三档，超大屏要放宽
1024px 转单列、640px 收窄内边距、380px 单列堆叠并下调字号；1600px 以上容器放到 1400px、卡片由 3 列变 4 列，充分利用横向空间而不是留白。
动效做减法，并给降级通道
入场淡入位移 ≤ 12px、时长 0.3–0.6s；hover 抬升 2–4px 配阴影加深。统一在 prefers-reduced-motion: reduce 中降为静态，既省电也更稳健。
图文混排特写：一次改版的量化复盘
把「好看」翻译成四个可测指标，改版前后各测一次，才知道设计到底省下了什么。
用同一套令牌，把维护成本压下去
改版把 17 个散落色值收敛为 1 套令牌，把 9 种间距统一到 4/8pt 节奏。结果是：新人接手一个页面从 3 天缩短到 1 天，样式回归缺陷从每月 14 个降到 4 个，页面体积同步下降，间接减少了重复渲染带来的能耗。
常见问题 FAQ
关于分屏布局、色彩克制与可持续维护，最常被追问的四个问题。
分屏布局在窄屏会不会直接塌掉？
不会。双栏在 1024px 断点转为单栏，640px 收窄内边距，380px 下调字号并让按钮满宽。列宽始终用 minmax(0,1fr) 并给子项加 min-width:0，长实验名与长英文词都不会撑破列宽。
绿色主题怎么用才不刺眼？
降低饱和度、提高明度层次，让主色只占约 30%，其余交给深色中性底；强调色用暖色（本页为暖粉调）小面积点缀，形成冷暖对比。切忌整屏荧光绿或单一高饱和绿铺满。
玻璃拟态会不会拖慢性能？
把 backdrop-filter 限制在少数固定尺寸容器上（如 Hero 主图与浮层卡片），并同时写 -webkit- 前缀。实测：全页毛玻璃元素 ≤ 3 个时，滚动帧率基本无损；超过 6 个则明显掉帧。
动态效果和无障碍如何兼得？
动效只承担「引导注意力」这一职责：淡入位移 ≤ 12px、hover 抬升 2–4px、数字计数一次 0.6s。所有动效都在 prefers-reduced-motion: reduce 下关闭，焦点态统一用 :focus-visible 描边，键盘可达。
客户评价：来自一线团队的真实反馈
他们关心的不是「好不好看」，而是这套参考能不能被团队长期用下去。
「把样式参考做成令牌表之后，我们三个人并行开发同一个平台，半年内没有出现一次颜色对不上的情况。分屏结构也让评审时讨论的是信息层级，而不是像素偏移。」
研研测平台负责人人工智能平台开发 · 团队 12 人
「最惊喜的是能耗与体积。收敛色彩搭配和图片裁切之后，单页 CSS 从 210KB 降到 88KB，运营同事在旧笔记本上打开控制台终于不再卡顿。」
前前端架构师推理服务中台 · 团队 8 人
「清单里的阈值特别好用：对比度 7:1、点按区 44px、卡片间距 12–20px。它把『用户体验优化』从口号变成了验收项，新人第一周就能独立交付。」
设设计系统维护者数据标注产品 · 团队 6 人
把这份参考带进你的下一个 AI 平台项目
下载包含 8 个色彩令牌、6 条落地清单与 3 档分屏比例的样式参考卡，按周迭代一次，让界面与团队一起可持续地长下去。