design-style-installer

设计风格安装器

像真正的品牌焕新一样，将完整的设计系统应用到项目中：先处理设计令牌，再接入，最后处理组件；设计令牌已定义的内容，不要硬编码。来源：Open Agent Stack design-styles/ 中的七种生产级主题——每种主题都包含 tokens.json（W3C design-tokens）、theme.css、tailwind.tokens.js 和一份 WCAG 对比度检查表——或者任意本地 W3C 格式的设计令牌文件。

工作流

1. 选择风格。 如果用户指定了风格，就从 open-agent-stack 仓库获取（或读取本地克隆）。如果没有指定，就展示七种选项及其一句话风格描述——aurora-mesh（柔和的未来感暗色、渐变网格）、cirrus（明亮的云雾／天空感、磨砂质感）、liquid-glass（半透明分层）、mono-brutalist（鲜明、以字体为主导）、neo-terminal（CRT 黑底绿字）、sand-terra（温暖的编辑风中性色）、tidal（深海蓝）——并询问哪种适合该产品。
2. 检查项目。 检测技术栈（Tailwind 版本、CSS modules、styled-components、纯 CSS），并梳理当前样式的定义位置：颜色、字体、圆角和阴影在哪里定义，以及有多少组件在这些定义之外硬编码了值。
3. 安装设计令牌。 根据技术栈接入主题：Tailwind——将 tailwind.tokens.js 合并到 theme.extend（v4：输出 @theme CSS 变量）；其他情况——将 theme.css 自定义属性添加到 :root／[data-theme]。正确加载主题字体（使用 next/font 或预连接的 <link>），切勿使用会阻塞渲染的导入链。
4. 重新着色。 将组件中的硬编码值替换为设计令牌引用，并按语义角色映射，而不是按最接近的十六进制值映射：旧主色 -> 新强调色，旧页面背景 -> bg.base，旧卡片 -> surface。如果旧设计中的角色在主题中没有对应项（例如第三种强调色、警告色调），则依据主题的调色板逻辑推导，并在设计令牌文件中记录新增项——不要自行随意添加颜色。
5. 验证。 运行构建，然后检查关键路径的渲染效果：导航、主视觉区、各种状态下的按钮、表单、卡片。确认经过任何推导后，文字／背景组合仍达到对比度检查表中的 AA 级别。输出 design-install-report.md：列出已安装的设计令牌、修改过的文件、剩余硬编码值（含路径）以及新增的推导设计令牌。

规则

• 安装后，设计令牌是唯一真实来源。重新着色后若组件中仍散落着十六进制代码，就说明工作尚未完成。
• 按语义角色映射，绝不按视觉相似度映射——旧的浅灰色边框和旧的浅灰色禁用文本是不同的设计令牌，即使它们原本使用相同的十六进制值。
• 切勿混用主题。如果用户想要 sand-terra 页面上的 aurora-mesh 卡片，这就是自定义主题——应分叉设计令牌文件，并为其取一个恰当的名称。
• 完全保留布局和内容：此技能只改变视觉样式，不改变结构。关于结构方面的问题，应在报告中作为建议提出。
• 同样遵循主题的动效设计令牌——时长和缓动效果也是风格的一部分，不能跳过。
• 保留主题的无障碍保障：任何推导出的颜色在发布前都必须经过对比度检查。

快速命令

• “将 [style] 安装到此项目中”——完整工作流
• “给我看看有哪些风格”——第 1 步：展示风格及其描述
• “只安装设计令牌，不重新着色”——第 1–3 步
• “还有哪些是硬编码的？”——第 5 步中的偏差审计