基于 2026 年的实际格局（含 2026-08/09 的行业综述与趋势调查）整理。结论先说：这三类东西不是一回事，必须分开选——混淆它们是绝大多数项目做砸视觉的根因。
它们解决不同问题、评估标准不同、更换成本也差了一个数量级。
可复用的组件 + token + 可用性规范。解决"按钮/弹层/下拉怎么实现、键盘和读屏怎么支持"。
表面的材质与手法。解决"看起来像什么"。寿命最短，1–3 年就换代。
密度、语气、情绪基线。解决"用起来什么感觉"。最隐蔽但最影响体验。
关键不是"谁更好"，而是——它的视觉烙印有多强。对要"拿得出手、不像模板"的项目，强烙印的成熟系统是负资产。
| 设计系统 | 归属 | 平台 / 生态 | Vue 支持 | 视觉烙印 | 数据可视化 | 适合我们 |
|---|---|---|---|---|---|---|
| Material 3 / M3 Expressive | Android / Flutter / Web / XR | Vuetify（完整但扛 Material 外观） | 强 | — | 不套用 | |
| Fluent 2 | Microsoft | Windows / Web Components / React | Web Components 可用 | 强 | — | 不套用 |
| IBM Carbon | IBM | React / Web Components | 无官方 Vue | 中强 | Carbon Charts（内置） | 可参考 |
| Spectrum 2 | Adobe | CC 全家桶 / 多端 | 无 | 中 | — | 不适用 |
| Ant Design | 阿里巴巴 | React / Vue / Angular | 成熟 | 强（一眼 antd） | AntV | 会像后台 |
| Atlassian DS | Atlassian | React | 无 | 强 | — | 不适用 |
| GOV.UK DS | 英国政府 | HTML/CSS 优先 | 无（样式可搬） | 中 | — | 可参考其可用性 |
| Mozilla Protocol | Mozilla | Web | 无 | 弱 | — | 轻量参考 |
| Headless + 自建 token Reka UI / Radix Vue / shadcn-vue + Tailwind | 社区 | Vue / React 原生 | 原生 | 无（完全自定义） | 自选（ECharts / AntV） | 推荐 |
Reka UI，即 Radix Vue 的继任者；或 shadcn-vue）给你无样式的可访问行为——弹层焦点管理、键盘导航、aria、下拉定位——而外观 100% 由我们自己的 token 决定。
正好同时满足"不像模板"和"a11y 不崩"。
状态列综合 2026 年的行业综述与趋势调查（含"正在退潮"清单）。重点看最后两列。
| 风格 / 手法 | 2026 状态 | 它解决什么 | 适不适合数据工具 | 我们的判断 |
|---|---|---|---|---|
| Expressive Minimalism（表达性极简） | 主流 | 克制布局 + 强层级 + 排版承担调性 | 高 | 基线 |
| Calm UI（平静界面） | 2026 头号趋势 | 降低认知负荷、减少刺激 | 高（择校本身就是压力场景） | 基线 |
| 语义化 token + 暗色并生 | 标配 | surface-1/surface-2/accent-strong 取代硬编码色值 | 高 | 采纳 |
| 触感粗野主义 Tactile Brutalism / 1px 实线 + 0 圆角 + 噪点 | 上升 | 反"AI 抛光感"，刻意做出"人写的"精密质感 | 中（要挑着用） | 部分借鉴：细边框 / mono / 刻度 要；0 圆角 / 噪点 不要 |
| Bento 网格布局 | 顶流（约 67% 头部 SaaS 落地页在用） | 模块化呈现"多个可扫的内容块" | 中 | 只用于 /about 与报告页，不用于筛选主界面 |
| Liquid Glass / 玻璃 2.0 | 作为"功能性层"存活 | 用半透明层表达"浮在内容之上" | 中 | 仅限地图之上的小面积浮层 |
| 玻璃拟态作为主视觉 | 已退潮（2024 见顶） | — | 低 | 不做 |
| 新拟物 / 粘土拟态 | 退潮 | — | 低（对比度不达标） | 不做 |
| 拟物化"回归" | 趋势调查显示正在失去势头 | — | 低 | 不做 |
| Dopamine 高饱和配色 / Y2K 霓虹 | 上升 | 情绪刺激 | 低（与"可信、快"冲突） | 不做 |
| Anti-Grid / 有机流线布局 | 上升 | 打破网格、增加性格 | 低（数据要能对齐比较） | 不做 |
| AI 对话式界面 | 最热 | "问一句就有答案" | 中 | Later：可作为 M5+ 的"自然语言查询"入口 |
| 3D / 空间设计 | 上升 | 沉浸与实体感 | 中 | M7 三维院校用 |
| 动效戏剧化（theatrics） | 退潮 | — | 低 | 不做：只保留"降低认知负荷"的功能性动效 |
色值与圆角为示意近似，目的是让你看清：用成熟设计系统的代价，是它自带的外观会盖过你的内容。
Reka UI（无障碍行为）+ Tailwind + 我们自己的 token。避开 antd / Vuetify——它们会让我们看起来像后台系统。这是"不像模板"的技术前提。surface-1/2、accent-strong/muted），不写死 hex——这是 2026 的标配，也是我们本来就该做的。