SuperAPI AI 工具集

design-system-generator

设计与创作

查看项目

更新于 10-16 01:57

技能介绍

用途

Design System Generator 用于创建或修订一个项目的设计系统,产出一份简明、贴合产品实际技术栈与视觉语言的设计系统文档,记录能让未来 UI 工作保持一致的决策。适用场景为需要建立或更新持久性设计系统契约时。

主要能力

  • 以 TEMPLATE_DESIGN_SYSTEM.md 作为主题菜单,按需覆盖相关章节,并省略不适用的部分,用已核实的项目决策替换示例。
  • 覆盖的相关主题包括:表面、主题、设备以及语言或 RTL 约束;令牌归属、字体排印、颜色、间距、布局与动效;共享组件及每个组件实际支持的交互状态;令牌、组件、工具类和局部例外的扩展规则;键盘交互、可见焦点、对比度目标、语义标记和减少动效;在可比状态与视口下的视觉验证;当设计系统负责时,资源加载和缓存失效的职责。
  • 在提出方案前先检查:读取现有设计文档、品牌参考、代表性界面、共享组件、主题配置、令牌和构建工具,并据此推断框架、CSS 方法、主题、浏览器支持和导出格式。
  • 仅针对未解决且对文档有实质影响的产品选择进行提问。
  • 对已确立且一致的系统予以保留;对新产品在用户约束内推荐一个合适方向,仅在有用或被要求时比较备选方案。

使用方式

  • 默认在主对话中运行。
  • 委派可增加用量:在使用子智能体前,需就提议的智能体数量和范围获得明确批准;在该批准范围内复用,扩展已批准的数量或范围前需再次询问。
  • 输出:更新既有设计系统负责人,或在仓库约定位置创建 DESIGN_SYSTEM.md。仅在请求或约定实现需要时导出 CSS 或 JSON 令牌。
  • 读取 examples/tokens.css 和 examples/design-tokens.json 仅用于对应格式;examples/manifest.example.json 仅与基于 manifest 的流水线相关。
  • 若可发现性需要指令文件链接,使用 examples/AGENTS.patch.md 中的最小模式,保留现有 AGENTS.md/CLAUDE.md 的归属或符号链接;不新增重复指令文件或重复设计规则。
  • 验证:对照其负责人检查已记录的路径、令牌名称、组件 API 和构建声明;在做出视觉决策或更改令牌时检查代表性已渲染组件;无法运行视觉验证时进行报告。移除占位符、矛盾和重复的唯一事实来源。
  • 报告文档及任何导出、重要决策、已执行的验证和未解决的选择。

适用场景

  • 需要创建或修订项目设计系统,并希望记录令牌、组件、无障碍、动效和视觉验证等决策的项目。
  • 需要让未来 UI 工作保持一致性的产品团队。

限制

  • 不要仅为匹配本技能的示例而添加组件库或迁移构建工具。
  • 避免记录产品未使用的框架或主题的支持。
  • 文档应保持可操作且针对具体项目;省略提示词写作建议和通用框架教程。
  • 哈希文件名和 manifest 是一种缓存策略,不是必需的新构建系统。
  • 关于具体收费、价格、平台支持等未在资料中提供的信息暂未提供。