设计系统一键安装器

问题：所谓“换肤”，通常是把色值换个位置

多数项目接入设计系统的做法是找到 #fff、#1a1a1a 之类的字面值，替换成新主题的对应色，再回头修那些因为对比度不足而看不见的按钮。结果是样式散落在组件里，主题文件沦为装饰。

像一次真正的品牌升级那样做事，顺序应该反过来：先落地 tokens，再接线到技术栈，最后才改组件。tokens 落地后，组件里不应再出现任何由 token 已定义过的字面值。

工作方式

• 选择风格：内置七个生产级主题，每个附带 tokens.json（W3C design-tokens）、theme.css、tailwind.tokens.js 与 WCAG 对比度工作表；也支持任意本地 W3C 格式的 tokens 文件。未指定主题时先展示七个选项及其一句话性格——aurora-mesh（柔和未来感深色）、cirrus（浅色云雾）、liquid-glass（半透明分层）、mono-brutalist（极简字体主导）、neo-terminal（CRT 黑底绿字）、sand-terra（暖调中性）、tidal（深海蓝）。
• 读懂项目：识别技术栈（Tailwind 版本、CSS Modules、styled-components、原生 CSS），盘点颜色、字体、圆角、阴影定义在哪，以及多少组件在这些定义之外硬编码了值。
• 安装 tokens：Tailwind 把 tailwind.tokens.js 合并进 theme.extend（v4 输出 @theme CSS 变量）；否则在 :root 或 [data-theme] 上挂 theme.css 自定义属性。字体用 next/font 或 preconnect 加载，避免阻塞式 import 链。
• 重绘：按语义角色替换硬编码值——旧 primary 映射到新 accent，旧页面背景映射到 bg.base，旧卡片映射到 surface。旧设计有主题缺的角色时，从主题调色逻辑推导并记入 tokens 文件，不自由发挥新颜色。
• 验证：跑构建，检查导航、Hero、按钮所有状态、表单、卡片，确认文本/背景组合在推导后仍满足对比度工作表的 AA 级别，并产出 design-install-report.md：已安装 tokens、改动文件、残留硬编码值及路径、新增推导 tokens。

边界与注意点

• tokens 是唯一真源。重绘后组件里仍散落十六进制色值，等于没做完。
• 一律按语义角色映射，不按视觉相似度：旧浅灰边框与旧浅灰禁用文字即使同色也是不同 token。
• 绝不混搭主题。要 sand-terra 页面配 aurora-mesh 卡片就是自定义主题，需要 fork tokens 文件并诚实命名。
• 布局与内容完全不变：改的是外观不是结构，结构上的想法写进报告作为建议。
• 动效 token 同样要遵守，时长与缓动是风格的一部分。
• 可访问性保证必须保住：任何推导出来的颜色，发布前都要过对比度检查。