mcpField
D
design-system-extractor

design-system-extractor

github.com/sylphxai设计与 UI150 次安装今天更新
代码仓库

关于 design-system-extractor

一项从分散的 UI 中提取可复用设计系统的技能，面向希望规范现有产品界面的团队。它盘点设计令牌、组件、状态和模式，并生成包含缺口、重复项及验证检查的系统图。

主要功能

  1. 01盘点 UI 令牌与组件
  2. 02记录状态和布局模式
  3. 03统一命名并区分基础元素
  4. 04发现缺口与重复元素
  5. 05制定迁移和验证计划

适用场景

  1. 01整理现有产品的设计系统
  2. 02查找不同界面中的重复组件
  3. 03规划组件命名规范迁移
  4. 04检查无障碍与响应式设计覆盖

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sylphxai/skills --skill design-system-extractor

安装后在 Claude Code 中输入/design-system-extractor确认已加载。

附带文件agents/openai.yamlreferences/design-system-extraction-systems.md

详细介绍

设计系统提取器

使用此技能，将零散的 UI 整理成连贯的设计系统，供 Agent 重复使用。

工作流

  1. 确认源界面、产品类型、平台、品牌限制以及系统的目标使用者。
  2. 阅读 references/design-system-extraction-systems.md。
  3. 盘点令牌、组件、状态、布局模式、内容模式、动效、无障碍支持和例外情况。
  4. 规范为标准名称，并将基础要素与产品专属组件分开。
  5. 输出设计系统地图，列出缺口、重复项、迁移计划和验证检查项。

不适用场景

  • 对于基础模型无需借助此技能的特定交付物规范即可处理的一般性建议，请勿使用。

注意事项

  • 如果任务是提取现有系统，请勿另行发明新系统。
  • 请勿将有意义的产品变体合并成一个通用组件。
  • 请勿忽略无障碍状态、错误状态、密度、响应式行为或动效。

输出格式

Source surfaces:
System shape:

Tokens:
- color / type / spacing / radius / elevation / motion

Components:
- <component> -> variants, states, usage, gaps

Inconsistencies:
- <issue> -> recommended canonical pattern

Migration plan:
- quick wins / systematic fixes / open questions

评论

支持 Markdown