色彩搭配与视觉元素
先锁定中性底与主色的明度差（建议 0.4 以上），再用强调色点三处：主按钮、关键数字、当前标签。玻璃层只做层次，不做装饰堆砌。
Deliverable · 色板 8 色
人工智能平台开发 · 视觉决策陪伴
把样式参考，变成你的设计温度与灵感中心
这里不是冷冰冰的素材清单。我们用玻璃拟态的磨砂层次，把色彩搭配、排版布局与创意策划拆成可上手的参数；你在做人工智能平台的界面时，能一边比对一边调整，像有人在旁边轻声提醒你「这里再收一点、那里亮一点」。
Practical Checklist
实用指导清单：6 条可直接落地的样式参考要点
每条都给出做法、参数与阈值，方便你在人工智能平台的界面里逐项对照。慢慢来，一次调一处就够。
-
先定 60-30-10 的色彩占比
中性底占约 60%（
--bg/--surface），主色占约 30%（--primary），强调色只留 10%（--accent）。检验方法：把页面缩小到 25% 截图，若高饱和色块面积超过 1/10，就说明强调色给多了。 -
玻璃层不要超过两级
每张磨砂卡片用
backdrop-filter: blur(14–18px)即可，并同时写-webkit-backdrop-filter。同级卡片叠加最多 2 层，第三层开始内容对比度会掉到 4.5:1 以下，正文就别再压在玻璃上了。 -
用 4/8pt 节奏收紧间距
卡片间距取
--sp-3~--sp-4（12–16px），区块间距取--sp-6~--sp-7（32–48px）。所有值都从令牌里取，不写死 px，后期改一处就能整体呼吸感一致。 -
正文行宽控制在 46–56ch
创意排版再花，正文可读性不能丢。中文每行 24–32 字最舒服，用
max-width: 52ch兜住；标题字距可放到 0.02em，正文保持默认，避免两端同时过紧或过松。 -
图片统一比例防跳动
Hero 拼贴用
aspect-ratio: 4/5，特写用 16/10，全部object-fit: cover+loading="lazy"。这样图片加载前后不会造成布局位移，CLS 可控制在 0.02 以内。 -
动效统一 0.3–0.6s 缓出
入场用
--ease-out配 0.7s 交错延迟，hover 位移不超过 4px。切记加prefers-reduced-motion降级，别让晕动的伙伴被动画困住。
Feature Story
图文混排特写：磨砂层如何托住人工智能平台的信息量
用一张主图 + 参数清单，把「样式参考」讲清楚，而不是堆概念。
人工智能平台往往要在首屏同时呈现模型状态、任务队列与推理指标，信息密度高、颜色容易失控。做法是：把背景交给暖色低饱和底，让磨砂卡片承担分区，只把强调色留给关键数值与激活标签——眼睛自然知道先看哪里。
- 模糊半径卡片 14px / 浮层 18px，超过 24px 文字边缘会发虚
- 描边内高光1px
rgba(255,255,255,.6)内阴影，营造玻璃厚度 - 分层投影三级景深 --sh-1/2/3，跨度约 2px→46px
- 主图比例16/10 裁切，安全区留 8% 边距防裁脸
- 强调色用量整页不超过 3 处，仅用于按钮、关键数字、激活态
Tabs · 灵感分栏
按角色切换你的样式参考视角
同一套令牌，不同岗位看到的重点不一样。选一个最像你的入口。
创意排版与留白
倾斜错位卡片拼贴控制在 ±2° 以内，超过 3° 会显乱；图集间距统一 12px，让错落有节奏而非散落。留白交给区块间距，不靠空盒子撑。
Deliverable · 版式网格图集与特写配比
Hero 放 4 张 4/5 竖图形成拼贴，正文只留 1 张 16/10 特写。图多不等于信息多，每张图都要能对应一条可执行的参考点。
Deliverable · 图库规范
Metrics
关键数据条：样式参考的量化底线
把美学变成可测的数字，交给团队就能对齐，不用反复争论「感觉不对」。
60%中性低饱和底占比
4.5:1正文最小对比度
18px玻璃层最大模糊半径
≤4pxhover 位移上限
Timeline · 动态
最新动态与资讯
按时间纵向排列，每条都带一个可以今天就试的动作。
玻璃拟态令牌包 v2：新增暖调描边
把内高光从纯白改为带暖度的 oklch(0.98 0.01 0)，在米白底上不再发灰。升级方式：替换根类上的描边变量即可，组件无需改动。
人工智能平台首屏密度评测模板
给出 12 项检查点，含卡片层数、强调色面积、首屏信息条数。建议控制在 3 分钟内完成一次自评，每轮只改一项，避免一次动太多看不出效果。
交错入场动效的可访问性清单
延迟阶梯建议 0.05s / 0.14s / 0.23s / 0.32s / 0.41s，总时长不超过 0.8s；并强制提供 prefers-reduced-motion 降级。我们已把这套节奏写进示例代码。
把你的样式参考，沉淀成团队的共同语言
从一份色板、一套间距令牌、一张图库规范开始。今天先做三件事：定 60-30-10 占比、统一圆角与阴影层级、给每张图写清 alt 描述。做完这三步，你的界面就已经比昨天更稳、更暖了。