skills.rest
pnewsam
pnewsamCOMMUNITY
Explore all skills by this author →
Website𝕏@paultakumaGitHub

extract-design-system

Extracts spacing, color, typography, and component patterns from a codebase into a design system contract.

1|Updated Apr 15, 2026
Search Tags:#typography#documentation#design system#css#color palette#tailwind#extract
One-click install
npx skills add https://github.com/pnewsam/skills --skill extract-design-system-pnewsam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract-design-system
Source: https://github.com/pnewsam/skills/tree/main/archive/extract-design-system
Command: npx skills add https://github.com/pnewsam/skills --skill extract-design-system-pnewsam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Most codebases have an implicit design system that is never written down, making it impossible to enforce visual consistency or detect drift. This legacy workflow reads the actual code to document the patterns that already exist. ## Core Features & Use Cases - Pattern Extraction: Surveys Tailwind configs, CSS custom properties, theme objects, and token files to extract spacing scales, color palettes, typography scales, and component patterns. - Contract Generation: Produces a structured docs/DESIGN_SYSTEM.md document covering palette, semantic color roles, type hierarchy, layout conventions, and responsive behavior. - Inconsistency Detection: Flags places where the codebase disagrees with itself, creating a backlog for convergence work. - Use Case: After a redesign introduces divergent patterns, run this workflow to document what the code actually does and identify which deviations need alignment. Note: This skill is deprecated. Prefer the current ui-* reference skills and the design-expert/design-* reference model for new UI and design work. ## Quick Start Ask the agent to run the legacy design system extraction workflow to survey this codebase and write the findings to docs/DESIGN_SYSTEM.md.

Frequently Asked Questions about extract-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I document an undocumented design system in an existing codebase?▼

Survey the styling configuration first, such as the Tailwind config, CSS custom properties, or theme objects, then extract the spacing, color, and typography values actually used. Document the majority patterns as the system and record deviations in an inconsistencies section.

How to extract a color palette from CSS or Tailwind code?▼

Search the source for hex color values and color definitions, then count their frequency to find the dominant palette. Map the raw colors to semantic roles like primary, danger, background, and text based on how they are used.

Does this workflow work with component libraries like MUI or Chakra?▼

Yes. When a component library provides the base system, the workflow documents how the project customizes it, including theme overrides, custom components alongside library ones, and conventions for when to use each.

What if the codebase has no consistent design system?▼

Document the most common patterns even when they are not universal, and use the inconsistencies section to record the disagreements. This makes the scope of future alignment work visible.

Should I use this skill for new design work?▼

No. This skill is deprecated and parked while the design taxonomy is reorganized. Use the current ui-* reference skills and the design-expert or design-* reference model unless the old docs/DESIGN_SYSTEM.md contract workflow is explicitly requested.

Related Skills

Explore More Design & Creative Skills→
RuggeryRuggery

reversa-design-system

Extracts design tokens from CSS, theme files, and screenshots into documentation.

Community
Intermediate
agentik-osagentik-os
10

design-system

Audit UI design systems and standardize typography, spacing, components, and color tokens.

Community
Advanced
telum-aitelum-ai
2

visual-quality

Validate UI component files against design-system.md standards.

Official
Advanced
renpereiradxrenpereiradx

enhance-prompt

Deprecated prompt optimizer for the discontinued Stitch UI design tool.

Community
Basic