SuperAPI AI 工具集

studio-design-design-system-from-code

设计与创作

查看项目

更新于 10-15 20:09

技能介绍

用途:面向已有代码但缺少成文设计系统的棕地产品,把散落在 CSS、组件 props 和主题配置中的事实设计系统整理成一份 Google 格式的 docs/DESIGN.md(YAML frontmatter 加八个固定章节)。核心理念是记录现实而非擅自改进:不发明新审美、不替换字体、不静默修复对比度;仅主动处理内部不一致,且必须经用户确认。

主要能力:先识别框架与样式方案(Tailwind、CSS 变量、CSS-in-JS、设计令牌文件、组件库主题覆盖、SwiftUI/Android/Flutter 原生等);再按颜色、字体、间距、圆角、阴影、组件六类清点实际值并统计出现次数与位置;然后聚类冲突,如多个主色蓝、令牌被绕过、离网间距、同组件多种圆角、混合单位、字体泛滥、重复分叉组件。每个冲突列出竞争值、出现次数、示例位置并给出推荐值,由用户逐一决定。

使用方式:技能运行于含 productos/ 的应用仓库根目录,也可独立使用。先做扫描与清点,再交互式解决冲突,最后写出 YAML 令牌与 Markdown 正文(Brand & Style、Colors、Typography、Layout & Spacing、Elevation & Depth、Shapes、Components、Do's and Don'ts)。已存在的 docs/DESIGN.md 会作为校准基础;可选读取 productos/design/1-Product-Identity.md 作为歧义时的裁决依据,docs/PRODUCT.md 提供命名上下文。会话约 30–60 分钟。

限制:仓库若无 UI 代码(纯后端、CLI、数据管道)则无设计系统可提取。质量类问题(如未达 WCAG AA、非免费字体、字号体系过度膨胀)只作末尾提示,不在冲突环节修改。若代码库为 monorepo,需先指定要记录的应用,不混合多个产品。具体收费、价格、效果与额外步骤资料暂未提供。