mcpField
D
design-system-extractor

design-system-extractor

github.com/sylphxaiDesign & UI150 installsUpdated today
Repository

About design-system-extractor

A skill for extracting a reusable design system from scattered UI, intended for teams standardizing an existing product interface. It inventories tokens, components, states, and patterns, then produces a system map with gaps, duplicates, and validation checks.

Key features

  1. 01Inventory UI tokens and components
  2. 02Capture states and layout patterns
  3. 03Normalize names and distinguish primitives
  4. 04Identify gaps and duplicated elements
  5. 05Create a migration and validation plan

Use cases

  1. 01Document an existing product's design system
  2. 02Find duplicated UI components across surfaces
  3. 03Plan migration toward canonical component names
  4. 04Check accessibility and responsive design coverage

Install

Copy the command and run it in a terminal.

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

After installing, type/design-system-extractorin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlreferences/design-system-extraction-systems.md

Details

From the project README

Design System Extractor

Use this skill to turn scattered UI into a coherent design system an agent can reuse.

Workflow

  1. Identify source surfaces, product type, platforms, brand constraints, and target consumers of the system.
  2. Read references/design-system-extraction-systems.md.
  3. Inventory tokens, components, states, layout patterns, content patterns, motion, accessibility, and exceptions.
  4. Normalize into canonical names and separate primitives from product-specific components.
  5. Produce a design-system map with gaps, duplicates, migration plan, and validation checks.

When not to use

  • Do not use for generic advice the base model already handles without this skill's specific artifact contract.

Guardrails

  • Do not invent a new system when the task is to extract the existing one.
  • Do not collapse meaningful product variants into one generic component.
  • Do not ignore accessibility states, error states, density, responsive behavior, or motion.

Output format

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

Comments

Markdown supported