# Design System Extractor > Specialized skill for reverse-engineering Design Systems from websites. Uses Python pre-processing to extract design tokens without hitting token limits, and generates complete HTML documentation using real fragments and images from the original site. - Skill: `kalilfagundes/design-system-extractor` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add kalilfagundes/design-system-extractor` - Raw SKILL.md: https://api.skillmd.com/api/skills/kalilfagundes/design-system-extractor/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: kalilfagundes (https://skillmd.com/u/kalilfagundes) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/kalilfagundes/design-system-extractor --- design-system-extractor 2.0.0 Specialized skill for reverse-engineering Design Systems from websites. Uses Python pre-processing to extract design tokens without hitting token limits. Generates complete HTML documentation in Storybook/Figma format. - User requests a Design System analysis of a website - Request to extract colors, typography, or components from a URL - Request for style documentation or a pattern library - Reverse engineering of website UI/UX - Creating design tokens from existing sites - "extract the design system from this site" - "analyze the design of this website" - "create design system documentation" - "generate a design pattern" - "UI reverse engineering" - "extract colors and typography" CRITICAL — BEFORE ANALYZING: Due to token limits, NEVER read raw HTML or CSS in full. Use the Python pre-processor. File Location: All Python files are in the `tools/` folder of this skill: .agents/skills/design-system-extractor/tools/ ├── design_system_extractor.py ├── extract_tokens.py └── requirements.txt Required Flow: ```bash # Navigate to the tools folder cd .agents/skills/design-system-extractor/tools/ # Install dependencies (first time only) pip install -r requirements.txt # Run the Python pre-processor python design_system_extractor.py ``` What the Python script does: Step A: HTML Sanitization - Removes ALL ``, ``, `

`-`

`, `

`, ``, ` 

.ds-btn-primary {
background: var(--color-brand);
color: #FFFFFF;
border-radius: 100px;
height: 40px;
padding: 0 20px;
font-size: 14px;
font-weight: 600;
}

Cards

Cards are used for projects, partners, and information. They feature a light background, 15-20px border-radius, and subtle hover effects.

Project Cards

Project

Title

Subtitle

Partner Cards

Partner
Partner Name
Client

Pane Cards

01

Service

Description

Forms

Form elements are minimalist, with an animated underline on focus and large, bold labels.

Text Fields

Select & File Upload

+
Upload Files
Drag & drop or click

Badges & Chips

Chips are used for tags, filters, and categories. They have a pill shape and clear hover/active states.

Tag 1 Tag 2 Active

Numbers & Stats

Large numbers highlight statistics and achievements. Uses mega typography (130px) with negative letter-spacing.

150+
Projects
Completed

Awards

Awards list with animated underline on hover. Clean design with subtle item separation.

Award Name
2025

Animations

Animations are subtle and elegant, using GSAP and ScrollMagic for scroll-based effects.

Fade
Slide
Scale
Pulse
Keyframe Animations
@keyframes heartbeat {
0%, 20%, 40%, 100% { transform: scale(1); }
10%, 30% { transform: scale(1.1); }
}

@keyframes pulse {
0%, 100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(0,0,0, 0.1);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 50px rgba(0,0,0, 0);
}
}
]]> Before delivering, verify: Design Tokens: All primary colors extracted (brand, black, white, 6+ gray shades) Font-family identified and imported from Google Fonts Complete type scale (minimum 10 levels: mega, hero, display, h1-h6, body) Line-heights documented (tight, snug, normal, relaxed, loose) Letter-spacing documented (tighter, tight, normal, wide) Complete spacing system (minimum 10 values) Container widths defined Border radius system (sm, md, lg, full, pill) Shadows documented Transitions (fast, normal, slow) + easing Z-index scale Components and Visuals: Real logos and images from the site have been injected into the final HTML (no empty placeholders) Minimum 4 button types (primary, chip, link, fab) Minimum 3 card types populated with REAL EXTRACTED IMAGES (project, partner, pane) Form elements (textfield, selectbox, filebox, checkbox) Navigation example (sticky nav with real logo + menu + CTA) Badges & Chips with states Icons documented (inline SVG) Numbers & Stats with mega typography Awards list with animation Footer example (4 columns) Animations demonstrated (fade, slide, scale, pulse) Structure: CSS variables in :root (all categories) Functional sidebar navigation Scroll progress indicator Smooth scroll navigation Active navigation on scroll Responsive (media queries: 1024px, 768px) Code examples in each section Utility classes (margin, color, text-align) Python 3.x — For pre-processing requests — Python library for HTTP requests beautifulsoup4 — Python library for HTML parsing write — To create the HTML file Location: All files are in tools/ inside this skill. User Input: "Extract the design system from this site: https://example.com" Execution Flow: Navigate to the tools folder and install dependencies: cd .agents/skills/design-system-extractor/tools/ pip install -r requirements.txt Run the Python pre-processor: python design_system_extractor.py https://example.com Analyze the returned JSON: { "url": "https://example.com", "fonts": ["Inter", "Roboto"], "css_variables": { "color-brand": "#0070F3", "color-black": "#000000" }, "colors": ["#0070F3", "#000000", "#FFFFFF"], "components": [ {"type": "button", "count": 5}, {"type": "card", "count": 12} ], "images": ["https://example.com/logo.png", "https://example.com/banner.jpg"] } Generate HTML with extracted data, replacing tags with real image URLs from the JSON. Save file as design_pattern.html Deliver with a summary of the main elements (Colors, Fonts, Components, and the generated file). Color Card Template
Color Name
#HEX
Usage description
Type Item Template
Preview Text
font-size: XXpx
line-height: X.XX
letter-spacing: -X.XXem
font-weight: XXX
Spacing Item Template
Space Name
XXpx
Icon Card Template
Icon Name
Custom SVG
Button Card Template

Button Name

.ds-btn-type {
  background: #XXX;
  color: #XXX;
  border-radius: 100px;
  height: 40px;
  font-size: XXpx;
  font-weight: 600;
}
Project Card Template
Project

Project Title

Category

Partner Card Template
Partner
Partner Name
Client
Pane Card Template
01

Service Name

Description text

Form Elements Template
+
Upload Files
Drag & drop or click
Number Stats Template
150+
Label
Note text
Award Item Template
Award Name
2025
Animation Card Template
AnimationName
Code Block Template
Section Title
.class {
  property: value;
}
Utility Classes .ds-mb-0 { margin-bottom: 0; } .ds-mb-8 { margin-bottom: var(--space-8); } .ds-mb-16 { margin-bottom: var(--space-16); } .ds-mb-24 { margin-bottom: var(--space-24); } .ds-mb-40 { margin-bottom: var(--space-40); } .ds-text-brand { color: var(--color-brand); } .ds-text-gray { color: var(--color-gray-text); } .ds-text-center { text-align: center; } .ds-bg-black { background-color: var(--color-black); } .ds-bg-white { background-color: var(--color-white); } .ds-bg-gray { background-color: var(--color-gray-light); } Always use CSS variables for consistency Always inject REAL images from the site (logos, banners, card photos) into the generated HTML to create a visual catalog identical to the original, functioning as literal pieces of the site Always document states (hover, active, focus, disabled) Always include code examples in each section Maintain fidelity to the original design Use descriptive token names (brand, gray-light, etc.) Document responsive breakpoints (1024px, 768px) Include animations and transitions with timing functions Follow the layout structure: sidebar + main content Implement scroll progress indicator Add smooth scroll and active navigation Use utility classes for margins and colors Include at least 10 spacing levels Document line-heights and letter-spacing for typography Create at least 4 button types and 3 card types populated with real media Base Layout .ds-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .ds-sidebar { position: sticky; top: 0; height: 100vh; background-color: var(--color-black); color: var(--color-white); padding: var(--space-40) var(--space-24); overflow-y: auto; } .ds-main { padding: var(--space-50) var(--space-75); max-width: var(--container-max); } Header .ds-header { margin-bottom: var(--space-100); padding-bottom: var(--space-50); border-bottom: 1px solid var(--color-gray-light); } .ds-title { font-size: var(--text-mega); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); } .ds-subtitle { font-size: var(--text-5xl); font-weight: var(--font-weight-medium); color: var(--color-gray-text); } Sections .ds-section { margin-bottom: var(--space-100); } .ds-section-title { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-40); padding-bottom: var(--space-16); border-bottom: 3px solid var(--color-brand); display: inline-block; } .ds-section-description { font-size: var(--text-lg); color: var(--color-gray-text); margin-bottom: var(--space-40); max-width: var(--container-text); } Scroll Indicator .ds-scroll-indicator { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--color-brand); z-index: var(--z-fixed); width: 0%; transition: width 0.1s; } - Do not copy copyright-protected code - Use for educational/reference purposes only - Respect font and asset licenses - Do not reproduce protected text content - Sites with anti-scraping protection may fail to fetch Python Dependencies: Install before using: ```bash # Navigate to the tools folder cd .agents/skills/design-system-extractor/tools/ # Install dependencies pip install -r requirements.txt ``` Or directly: ```bash pip install requests beautifulsoup4 ``` requirements.txt: ``` requests>=2.31.0 beautifulsoup4>=4.12.0 ``` Location: tools/requirements.txt inside this skill. Versioning: Version: 2.0.0 (Optimized with Python) Last updated: 2026-03-19 v2.0 Improvements: - Python pre-processing — Prevents context window overflow - HTML sanitization — Removes SVGs, scripts, base64 - Selective CSS extraction — Focuses on :root, ignores the rest - Tailwind detection — Token inference from utility classes - Anti-hallucination — Strict guidelines to prevent fabricated data - Optimized output — Generates only HTML with real image injection File Structure: ``` .agents/skills/design-system-extractor/ ├── SKILL.md # This skill (you are here) └── tools/ ├── design_system_extractor.py # Main Python script ├── extract_tokens.py # Standalone CSS token extractor ├── requirements.txt # Python dependencies └── README.md # Tools documentation ``` Important: Always run Python scripts from the tools/ folder: ```bash cd .agents/skills/design-system-extractor/tools/ python design_system_extractor.py ```