用途:打造独特、生产级且高设计质量的前端界面,避免通用“AI 味”美学;同时审计既有设计与生成设计系统产物。
主要能力:三种模式。分析模式审计 CSS 的设计模式与不一致、从 CSS 提取设计令牌、检查无障碍(对比度、焦点状态等);规范模式用 JSON 定义要生成的内容;生成模式产出配色方案、字体系统、多格式设计令牌和各框架组件模板。
使用方式:需 Deno 运行时。示例命令包括:deno run --allow-read scripts/analyze-styles.ts styles.css;deno run --allow-read scripts/extract-tokens.ts ./src --format css;deno run --allow-read scripts/analyze-accessibility.ts component.tsx;生成类命令如 deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#2563eb" --theme warm、deno run --allow-read --allow-write scripts/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro"、deno run --allow-read --allow-write scripts/generate-tokens.ts tokens-spec.json ./output/、deno run --allow-read --allow-write scripts/generate-component.ts --name Button --framework react --styling tailwind。
适用场景:构建或审查 Web 组件、页面与应用;审计 CSS 设计一致性;从遗留代码提取设计令牌;生成配色与字体系统;按框架生成组件模板;检查设计元素的无障碍合规。
限制:不适用于纯文本内容修改、纯后端工作与非视觉功能。脚本依赖 Deno,分析类需 --allow-read,生成类需 --allow-read --allow-write。颜色对比检查可能因无法解析的 CSS 变量失败;组件框架仅支持 react、vue、svelte、html;令牌格式支持 css、scss、tailwind、style-dictionary、tokens-studio、json、ts。价格、版本等其它信息暂未提供。