用途:把完整设计系统按品牌换肤的真实顺序装进项目——先令牌,再接线,最后组件,凡令牌已定义的值不再硬编码。来源为 Open Agent Stack design-styles 的七个生产主题(各含 tokens.json、theme.css、tailwind.tokens.js 与 WCAG 对比度工作表),或任意本地 W3C 格式令牌文件。
主要能力与流程:一、选定风格。用户点名则从 open-agent-stack 仓库获取或读本地克隆;未点名则列出七个选项供选择:aurora-mesh(柔和未来暗色、渐变网格)、cirrus(浅色云空、磨砂)、liquid-glass(半透明分层)、mono-brutalist(冷峻、字体主导)、neo-terminal(CRT 黑底绿字)、sand-terra(温暖编辑风中性色)、tidal(深海蓝)。二、读取项目:检测技术栈(Tailwind 版本、CSS Modules、styled-components、纯 CSS),盘点当前颜色、字体、圆角、阴影的定义位置及硬编码组件数。三、安装令牌:按栈接线,Tailwind 将 tailwind.tokens.js 合并进 theme.extend(v4 输出 @theme CSS 变量),否则在 :root/[data-theme] 添加 theme.css 自定义属性;字体用 next/font 或预连接 link 正确加载,避免阻塞式导入链。四、重绘:按语义角色而非最接近的色值替换组件中的硬编码值;主题缺失的角色由调色板逻辑派生并记录,不得自创颜色。五、验证:运行构建,检查导航、首屏、按钮各状态、表单、卡片的渲染,确认派生后文本/背景对比度仍达 AA,输出 design-install-report.md,含已装令牌、改动文件、残留硬编码路径与新增派生令牌。
使用方式:可直接说“Install [style] into this project”走完整流程,“Show me the styles”看第一步风格画廊,“Just the tokens, no repaint”只做前三步,“What's still hardcoded?”执行第五步漂移审计。
限制与规则:安装后令牌是唯一事实来源;一律按语义角色映射,不按视觉相似;不得混搭主题,混搭需派生并诚实命名;仅改外观不改结构与内容;须遵守主题的动态令牌(时长与缓动);任何派生颜色上线前需做对比度检查。价格、收费、平台与效果等未在资料中提供。