SuperAPI AI 工具集

design-system

设计与创作

查看项目

更新于 10-15 20:28

技能介绍

用途:该技能用于治理项目的视觉标识,核心是 DESIGN.md(Google 开放格式的设计系统描述文件)。当编辑 UI 文件(组件、页面、布局、样式、DESIGN.md、tailwind.config.*)且项目根存在 DESIGN.md 时自动激活,先读取它,并强制颜色、排版、间距、圆角只能来自令牌。没有 DESIGN.md 则不介入,也不会因此阻止编辑,仅在需要时指向 /award-design 或 /frontend-dev。

主要能力:支持子命令 /design-system <verb> [path],涵盖 audit(别名 check、lint,检查并给出修复建议)、diff(版本间回归检查,感知 git)、export(令牌导出为 Tailwind 主题或 W3C DTCG tokens.json)、spec(输出规范)、migrate(把旧 Stitch 9 段式 DESIGN.md 迁移到 Google 标准)、init(生成最小可用 DESIGN.md)、audit-extensions(检查扩展令牌与 globals.css @theme 的双向漂移)。DESIGN.md 分两层:YAML frontmatter 为规范令牌(colors、typography、rounded、spacing、components),Markdown 正文为八个按序章节(Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'ts)。令牌引用用 {path.to.token},组件仅接受 backgroundColor、textColor、typography、rounded、padding、size、height、width 八个属性。

使用方式:CLI 为 @google/design.md,安装命令 npm install --global --ignore-scripts @google/design.md,验证 designmd --version。修改令牌前先更新 DESIGN.md,改完运行 /design-system audit <path>,再用 /design-system export tailwind 同步到主题与全局样式表;扩展令牌运行 /design-system audit-extensions 校验。

限制:不支持任意 Tailwind 值;重复章节标题属规范错误需拒绝;未知组件属性不可移植;export tailwind 输出为 Tailwind v3 配置 JSON,v4 项目需改为 CSS-first @theme;多份 DESIGN.md 时需人工指定治理目标;Google 规范无独立暗色模式概念,建议用语义令牌单文件处理。上述内容未提及收费、价格、平台或效果信息。