用途:作为顶层设计编排器,把多个上游静态技能组合成完整设计系统,用于新建设计系统、品牌重塑或既有系统内的样式细化。
主要能力:组合 frontend-design(美学方向)、taste-skill(反套路规则与调节旋钮)、web-design-guidelines(合规检查)与 design-tokens(CSS @theme、OKLCH、8pt 网格,始终最先调用)。上游静态技能不可修改。
使用方式:先询问用户选择 Explore(全新,6 个截然不同的方向)或 Extend(既有系统内 6 种针对性细化)。随后检测上下文(brand.yaml、tailwind 配置、globals.css、组件目录、DESIGN_MEMORY.md),进行实时生态调研(如用 gemini 或 WebSearch 查询 UI 库现状),再生成单文件 design-catalog.html 可视化目录,含 6 个标签页、完整应用外壳、指标卡、监控列表、事件告警与组件套件,通过 CDN 引入 Tailwind 与 daisyUI 等库。用户选定方向后调用 /design-tokens,应用约束层,必要时搭建组件库结构,最后运行 /visual-qa --fix 做视觉质检,并写入 DESIGN_MEMORY.md。
适用场景:React/Next.js 等前端项目的设计系统搭建与迭代,尤其适合需要多方向对比选型的 SaaS 类产品。
限制:依赖上游技能与外部工具(如 Gemini CLI、WebSearch)可用;目录为单 HTML 文件、无本地资源导入;动画需尊重 prefers-reduced-motion;设计变更必须经浏览器渲染验证。具体收费、平台与效果资料暂未提供。