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:
# 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 <URL>
What the Python script does:
Step A: HTML Sanitization
- Removes ALL
<svg>, <path>, <script>, <noscript>, <iframe>, <style> tags
- Removes base64 data (
src="data:image...")
- Keeps only structure:
<header>, <main>, <section>, <h1>-<h6>, <p>, <a>, <button>, and CSS classes
Step B: External CSS Extraction
- Identifies
<link rel="stylesheet"> tags in <head>
- Fetches
.css files
- Uses regex to extract ONLY:
:root { ... } block (90% of Design Tokens)@font-face rules- Important global classes (
.btn, .card, .container, h1, h2, h3)
Step C: Utility Framework Detection
- Detects Tailwind patterns:
text-[16px], bg-[#RRGGBB], leading-tight
- Spacing patterns:
m-4, p-8, gap-16, w-full
- Typography:
font-bold, text-xl, tracking-wide
Colors:
- Prioritize colors from CSS variables (:root)
- If no :root exists, use colors detected in HTML/Tailwind
- Classify into: Brand, Black, White, Gray (light/medium/dark/text/muted/social)
- Detect gradients and opacities
- Document usage of each color (CTAs, text, background, borders)
Typography:
- Font-family from CSS variables or @font-face
- If Google Fonts are used, extract from the tag in HTML
- Font-size: mega (130px), hero (86px), display (66px), h1-h6, body, small
- Font-weight: 400, 500, 600, 700
- Line-height: tight (0.94), snug (1.03), normal (1.2), relaxed (1.25), loose (1.65)
- Letter-spacing: tighter (-0.05em), tight (-0.035em), normal (-0.03em), wide (0.175em)
Spacing:
- Based on a 4px unit
- Space system: 1(4px), 2(8px), 4(12px), 6(16px), 8(20px), 10(24px), 16(40px), 24(60px), 40(90px), 75(150px), 100(200px), 125(250px)
- Container widths: max (1920px), content (1400px), narrow (1360px), small (1200px), text (800px), tight (780px)
Buttons (Minimum 4 types):
- Primary: brand background, pill radius (100px), height 40px
- Chip: gray background, pill radius, hover/active states
- Link: text only, with animated arrow suffix
- FAB: fixed position, backdrop-filter, pulse animation
- Padding, border-radius, font-size, font-weight, transitions
Cards (Minimum 3 types):
- Project Card: media with image, content, title, subtitle
- Partner Card: image left, content right, max-width 310px
- Pane Card: index number, title, subtitle with divider line
- Borders (15-20px radius), shadows, hover effects, image aspect ratios
Forms:
- Textfield: animated underline, large label, height 56px
- Selectbox: underline + chevron suffix
- Filebox: dashed border, drag & drop style
- Checkbox: custom control with checkmark
- Input styles, labels, validation states, focus states
Navigation:
- Sticky header with transition
- Logo + horizontal menu + CTA button
- Dropdown with arrow animation
- Scroll-based color change
Images:
- Extract URLs from src (always use the originals from the site)
- Identify format (WebP, JPG, PNG, SVG)
- Document aspect ratios (e.g. 55% padding-top for cards)
- Note border-radius and effects (hover scale, etc.)
Icons and Logos:
- Insert the exact URL of the original site's logo in the sidebar and headers.
- Library (FontAwesome, Material, Phosphor, custom SVG)
- Style (filled, outline, duotone)
- Extract inline SVGs when possible, or use the original URLs
Base tokens STRICTLY on the data from the JSON returned by Python.
If the site uses heavy minification (classes .a, .b, .c) and no CSS is mapped:
- Infer the Design System by analyzing numeric patterns
- Use industry defaults (4px grid, 1.25 type scale)
NEVER invent colors or fonts that are not present in the analyzed data.
If information is missing, use default values documented as "Default".
NO EMPTY PLACEHOLDERS: Instead of leaving [URL] or generic gray images, ALWAYS inject the REAL image, photo, and logo URLs extracted from the site into the HTML. The documentation should look like a piece of the real site.
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.
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
Type Item Template
Spacing Item Template
Icon Card Template
Button Card Template
Project Card Template
Partner Card Template
Pane Card Template
Form Elements Template
Number Stats Template
Award Item Template
Animation Card Template
Code Block Template
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); }
.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;
}
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:
cd .agents/skills/design-system-extractor/tools/
python design_system_extractor.py <URL>
1---2name: design-system-extractor3description: 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.4---56<skill>7<skill_info>8<name>design-system-extractor</name>9<version>2.0.0</version>10<description>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.</description>11</skill_info>1213<triggers>14<use_cases>15- User requests a Design System analysis of a website16- Request to extract colors, typography, or components from a URL17- Request for style documentation or a pattern library18- Reverse engineering of website UI/UX19- Creating design tokens from existing sites20</use_cases>21<activation_commands>22- "extract the design system from this site"23- "analyze the design of this website"24- "create design system documentation"25- "generate a design pattern"26- "UI reverse engineering"27- "extract colors and typography"28</activation_commands>29</triggers>3031<instructions>32<data_collection_and_sanitization>33CRITICAL — BEFORE ANALYZING: Due to token limits, NEVER read raw HTML or CSS in full. Use the Python pre-processor.3435File Location:36All Python files are in the `tools/` folder of this skill:37.agents/skills/design-system-extractor/tools/38├── design_system_extractor.py39├── extract_tokens.py40└── requirements.txt4142Required Flow:43```bash44# Navigate to the tools folder45cd .agents/skills/design-system-extractor/tools/4647# Install dependencies (first time only)48pip install -r requirements.txt4950# Run the Python pre-processor51python design_system_extractor.py <URL>52```5354What the Python script does:55Step A: HTML Sanitization56- Removes ALL `<svg>`, `<path>`, `<script>`, `<noscript>`, `<iframe>`, `<style>` tags57- Removes base64 data (`src="data:image..."`)58- Keeps only structure: `<header>`, `<main>`, `<section>`, `<h1>`-`<h6>`, `<p>`, `<a>`, `<button>`, and CSS classes5960Step B: External CSS Extraction61- Identifies `<link rel="stylesheet">` tags in `<head>`62- Fetches `.css` files63- Uses regex to extract ONLY:64 - `:root { ... }` block (90% of Design Tokens)65 - `@font-face` rules66 - Important global classes (`.btn`, `.card`, `.container`, `h1, h2, h3`)6768Step C: Utility Framework Detection69- Detects Tailwind patterns: `text-[16px]`, `bg-[#RRGGBB]`, `leading-tight`70- Spacing patterns: `m-4`, `p-8`, `gap-16`, `w-full`71- Typography: `font-bold`, `text-xl`, `tracking-wide`7273</data_collection_and_sanitization>7475<data_analysis>76Using the JSON returned by Python, analyze:7778Colors:79- Prioritize colors from CSS variables (:root)80- If no :root exists, use colors detected in HTML/Tailwind81- Classify into: Brand, Black, White, Gray (light/medium/dark/text/muted/social)82- Detect gradients and opacities83- Document usage of each color (CTAs, text, background, borders)8485Typography:86- Font-family from CSS variables or @font-face87- If Google Fonts are used, extract from the <link> tag in HTML88- Font-size: mega (130px), hero (86px), display (66px), h1-h6, body, small89- Font-weight: 400, 500, 600, 70090- Line-height: tight (0.94), snug (1.03), normal (1.2), relaxed (1.25), loose (1.65)91- Letter-spacing: tighter (-0.05em), tight (-0.035em), normal (-0.03em), wide (0.175em)9293Spacing:94- Based on a 4px unit95- Space system: 1(4px), 2(8px), 4(12px), 6(16px), 8(20px), 10(24px), 16(40px), 24(60px), 40(90px), 75(150px), 100(200px), 125(250px)96- Container widths: max (1920px), content (1400px), narrow (1360px), small (1200px), text (800px), tight (780px)9798</data_analysis>99100<component_catalog>101Use the components detected by Python and expand:102103Buttons (Minimum 4 types):104- Primary: brand background, pill radius (100px), height 40px105- Chip: gray background, pill radius, hover/active states106- Link: text only, with animated arrow suffix107- FAB: fixed position, backdrop-filter, pulse animation108- Padding, border-radius, font-size, font-weight, transitions109110Cards (Minimum 3 types):111- Project Card: media with image, content, title, subtitle112- Partner Card: image left, content right, max-width 310px113- Pane Card: index number, title, subtitle with divider line114- Borders (15-20px radius), shadows, hover effects, image aspect ratios115116Forms:117- Textfield: animated underline, large label, height 56px118- Selectbox: underline + chevron suffix119- Filebox: dashed border, drag & drop style120- Checkbox: custom control with checkmark121- Input styles, labels, validation states, focus states122123Navigation:124- Sticky header with transition125- Logo + horizontal menu + CTA button126- Dropdown with arrow animation127- Scroll-based color change128129</component_catalog>130131<assets_and_media>132CRITICAL FOR VISUAL IMMERSION:133- Capture and USE the real image URLs from the site (original logo, banners, profile photos, card images).134- The generated HTML MUST incorporate these "real pieces" of the site in <img> tags and component backgrounds. Do not use only solid colors if the original site uses rich imagery.135- This ensures the generated documentation has the look and feel of the original site.136137Images:138- Extract URLs from src (always use the originals from the site)139- Identify format (WebP, JPG, PNG, SVG)140- Document aspect ratios (e.g. 55% padding-top for cards)141- Note border-radius and effects (hover scale, etc.)142143Icons and Logos:144- Insert the exact URL of the original site's logo in the sidebar and headers.145- Library (FontAwesome, Material, Phosphor, custom SVG)146- Style (filled, outline, duotone)147- Extract inline SVGs when possible, or use the original URLs148149</assets_and_media>150151<animations_and_interactions>152- Transition durations: fast (0.15s), normal (0.25s), slow (0.5s)153- Timing functions: ease-smooth cubic-bezier(0.65, 0.05, 0.36, 1)154- Keyframe animations: heartbeat, fade, slide, scale, pulse, ticker155- Scroll-based animations (GSAP, ScrollMagic, AOS)156- Hover effects: transform, opacity, background-color157</animations_and_interactions>158159<grid_and_layout>160- Container max-widths161- Grid system (CSS grid, flexbox)162- Breakpoints (1024px, 768px)163- Gaps and gutters164- Z-index scale: base (1), dropdown (2), header (3), sticky (10), fixed (55), overlay (100)165</grid_and_layout>166</instructions>167168<anti_hallucination_guidelines>169CRITICAL: To avoid fabricating data:170171Base tokens STRICTLY on the data from the JSON returned by Python.172173If the site uses heavy minification (classes .a, .b, .c) and no CSS is mapped:174- Infer the Design System by analyzing numeric patterns175- Use industry defaults (4px grid, 1.25 type scale)176177NEVER invent colors or fonts that are not present in the analyzed data.178179If information is missing, use default values documented as "Default".180181NO EMPTY PLACEHOLDERS: Instead of leaving [URL] or generic gray images, ALWAYS inject the REAL image, photo, and logo URLs extracted from the site into the HTML. The documentation should look like a piece of the real site.182</anti_hallucination_guidelines>183184<output_format>185<description>186HTML file (design_pattern.html)187Generate ONLY the final HTML code. Do not add explanations before or after the code.188Use the template below and REPLACE the [Site Name], #HEX, and value placeholders with the actual extracted properties.189IMPORTANT: Replace ALL placeholders such as <!-- Site Logo SVG -->, <img src="[URL]">, or text reading "LOGO" with the REAL image URLs captured from the site.190Keep all CSS boilerplate exactly as provided, only modifying the :root block.191</description>192<html_template>193194<![CDATA[195<!DOCTYPE html>196<html lang="en">197<head>198<meta charset="UTF-8">199<meta name="viewport" content="width=device-width, initial-scale=1.0">200<title>[Site Name] Design System | Design Pattern</title>201202<!-- Import detected fonts -->203<link rel="preconnect" href="https://fonts.googleapis.com">204<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>205<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">206207<style>208/* ============================================209DESIGN TOKENS - [Site Name] Design System210============================================ */211:root {212/* ===== COLORS ===== */213--color-brand: #000000;214--color-brand-hover: #222222;215--color-black: #000000;216--color-white: #FFFFFF;217--color-gray-light: #EEEEEE;218--color-gray-medium: #CDCDCD;219--color-gray-text: #9A9A9A;220--color-gray-dark: #7B7B7B;221--color-gray-muted: #575757;222--color-gray-social: #CBCBCB;223224/* ===== TYPOGRAPHY ===== */225--font-family: 'Inter', sans-serif;226--font-weight-regular: 400;227--font-weight-medium: 500;228--font-weight-semibold: 600;229--font-weight-bold: 700;230231/* ===== FONT SIZES ===== */232--text-xs: 8px;233--text-sm: 12px;234--text-base: 14px;235--text-md: 16px;236--text-lg: 18px;237--text-xl: 22px;238--text-2xl: 24px;239--text-3xl: 26px;240--text-4xl: 28px;241--text-5xl: 36px;242--text-6xl: 42px;243--text-7xl: 46px;244--text-8xl: 50px;245--text-display: 66px;246--text-hero: 86px;247--text-mega: 130px;248249/* ===== LINE HEIGHTS ===== */250--leading-tight: 0.94;251--leading-snug: 1.03;252--leading-normal: 1.2;253--leading-relaxed: 1.25;254--leading-loose: 1.65;255256/* ===== LETTER SPACING ===== */257--tracking-tighter: -0.05em;258--tracking-tight: -0.035em;259--tracking-normal: -0.03em;260--tracking-wide: 0.175em;261262/* ===== SPACING ===== */263--space-1: 4px;264--space-2: 8px;265--space-4: 12px;266--space-6: 16px;267--space-8: 20px;268--space-10: 24px;269--space-16: 40px;270--space-24: 60px;271--space-40: 90px;272--space-75: 150px;273--space-100: 200px;274--space-125: 250px;275276/* ===== CONTAINERS ===== */277--container-max: 1920px;278--container-content: 1400px;279--container-narrow: 1360px;280--container-small: 1200px;281--container-text: 800px;282--container-tight: 780px;283284/* ===== BORDER RADIUS ===== */285--radius-sm: 5px;286--radius-md: 15px;287--radius-lg: 20px;288--radius-full: 50%;289--radius-pill: 100px;290291/* ===== SHADOWS ===== */292--shadow-none: 0 0 0 0 rgba(0,0,0, 0);293--shadow-sm: 0 0 0 0 rgba(0,0,0, 0.1);294--shadow-md: 0px 0px 20px rgba(13, 13, 13, 0.2);295296/* ===== TRANSITIONS ===== */297--transition-fast: 0.15s;298--transition-normal: 0.25s;299--transition-slow: 0.5s;300--ease-smooth: cubic-bezier(0.65, 0.05, 0.36, 1);301302/* ===== Z-INDEX ===== */303--z-base: 1;304--z-dropdown: 2;305--z-header: 3;306--z-sticky: 10;307--z-fixed: 55;308--z-overlay: 100;309}310311/* Base styles */312/* Layout (sidebar + main) */313/* Components */314/* Utilities */315/* Responsive */316</style>317</head>318<body>319<!-- Scroll Progress Indicator -->320<div class="ds-scroll-indicator" id="scrollIndicator"></div>321322<div class="ds-layout">323<!-- Sidebar Navigation -->324<aside class="ds-sidebar">325<div class="ds-sidebar-logo">326<!-- INSERT THE REAL LOGO URL FROM THE SITE HERE -->327<img src="[REAL LOGO URL]" alt="Site logo" style="max-width: 100%;">328</div>329330<nav>331<ul class="ds-nav">332<li class="ds-nav-section">Foundations</li>333<li class="ds-nav-item"><a href="#colors" class="ds-nav-link">Colors</a></li>334<li class="ds-nav-item"><a href="#typography" class="ds-nav-link">Typography</a></li>335<li class="ds-nav-item"><a href="#spacing" class="ds-nav-link">Spacing</a></li>336<li class="ds-nav-item"><a href="#icons" class="ds-nav-link">Icons</a></li>337338<li class="ds-nav-section">Components</li>339<li class="ds-nav-item"><a href="#buttons" class="ds-nav-link">Buttons</a></li>340<li class="ds-nav-item"><a href="#cards" class="ds-nav-link">Cards</a></li>341<li class="ds-nav-item"><a href="#forms" class="ds-nav-link">Forms</a></li>342<li class="ds-nav-item"><a href="#navigation" class="ds-nav-link">Navigation</a></li>343<li class="ds-nav-item"><a href="#badges" class="ds-nav-link">Badges & Chips</a></li>344345<li class="ds-nav-section">Patterns</li>346<li class="ds-nav-item"><a href="#numbers" class="ds-nav-link">Numbers & Stats</a></li>347<li class="ds-nav-item"><a href="#awards" class="ds-nav-link">Awards</a></li>348<li class="ds-nav-item"><a href="#footer" class="ds-nav-link">Footer</a></li>349<li class="ds-nav-item"><a href="#animations" class="ds-nav-link">Animations</a></li>350</ul>351</nav>352</aside>353354<!-- Main Content -->355<main class="ds-main">356<!-- Header -->357<header class="ds-header">358<h1 class="ds-title">Design System</h1>359<p class="ds-subtitle">Complete Design System documentation for [Site Name] — extracted via reverse engineering of the official site.</p>360</header>361362<!-- Colors Section -->363<section id="colors" class="ds-section">364<h2 class="ds-section-title">Colors</h2>365<p class="ds-section-description">366The color palette is built around [brand color] as the primary accent,367contrasting with black, white, and gray tones.368</p>369370<h3 class="ds-mb-16">Brand Colors</h3>371<div class="ds-color-grid ds-mb-40">372<div class="ds-color-card">373<div class="ds-color-swatch" style="background-color: var(--color-brand);"></div>374<div class="ds-color-info">375<div class="ds-color-name">Brand Color</div>376<div class="ds-color-value">[#HEX]</div>377<div class="ds-color-usage">CTAs, links, icons, hover states</div>378</div>379</div>380<!-- More colors... -->381</div>382383<div class="ds-code">384<div class="ds-code-title">CSS Variables</div>385<pre>:root {386--color-brand: [#HEX];387--color-brand-hover: [#HEX];388--color-black: #000000;389--color-white: #FFFFFF;390--color-gray-light: #EEEEEE;391--color-gray-medium: #CDCDCD;392--color-gray-text: #9A9A9A;393--color-gray-dark: #7B7B7B;394--color-gray-muted: #575757;395--color-gray-social: #CBCBCB;396}</pre>397</div>398</section>399400<!-- Typography Section -->401<section id="typography" class="ds-section">402<h2 class="ds-section-title">Typography</h2>403<p class="ds-section-description">404Typography uses the <strong>[Font Name]</strong> font with weights from 400 to 700.405The type system is characterized by negative letter-spacing and tight line-heights.406</p>407408<div class="ds-type-scale">409<div class="ds-type-item">410<div class="ds-type-preview" style="font-size: 130px; font-weight: 700; line-height: 0.94; letter-spacing: -0.05em;">411Mega Title412</div>413<div class="ds-type-meta">414<div class="ds-type-meta-item">font-size: 130px</div>415<div class="ds-type-meta-item">line-height: 0.94</div>416<div class="ds-type-meta-item">letter-spacing: -0.05em</div>417<div class="ds-type-meta-item">font-weight: 700</div>418</div>419</div>420<!-- More type levels... -->421</div>422</section>423424<!-- Spacing Section -->425<section id="spacing" class="ds-section">426<h2 class="ds-section-title">Spacing</h2>427<p class="ds-section-description">428The spacing system is based on a <strong>4px</strong> unit.429Major sections are separated by 200px, with 90px lateral padding.430</p>431432<div class="ds-spacing-grid ds-mb-40">433<div class="ds-spacing-item">434<div class="ds-spacing-box" style="width: 4px;"></div>435<div class="ds-spacing-label">Space 1</div>436<div class="ds-spacing-value">4px</div>437</div>438<!-- More spaces... -->439</div>440</section>441442<!-- Icons Section -->443<section id="icons" class="ds-section">444<h2 class="ds-section-title">Icons</h2>445<p class="ds-section-description">446All icons are custom inline SVGs with no external libraries.447They use <code>currentColor</code> to inherit color from context.448</p>449450<div class="ds-icons-grid ds-mb-40">451<div class="ds-icon-card">452<svg class="ds-icon-preview" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">453<!-- SVG path -->454</svg>455<div class="ds-icon-name">Icon Name</div>456<div class="ds-icon-code">Custom SVG</div>457</div>458<!-- More icons... -->459</div>460</section>461462<!-- Buttons Section -->463<section id="buttons" class="ds-section">464<h2 class="ds-section-title">Buttons</h2>465<p class="ds-section-description">466Buttons are characterized by a pill border-radius (100px),467fast transitions (0.15s), and clear hover states.468</p>469470<div class="ds-buttons-grid ds-mb-40">471<div class="ds-button-card">472<h4 class="ds-mb-16">Primary Button</h4>473<div class="ds-button-example">474<button class="ds-btn ds-btn-primary">Button</button>475</div>476<div class="ds-code">477<pre>.ds-btn-primary {478background: var(--color-brand);479color: #FFFFFF;480border-radius: 100px;481height: 40px;482padding: 0 20px;483font-size: 14px;484font-weight: 600;485}</pre>486</div>487</div>488<!-- More buttons... -->489</div>490</section>491492<!-- Cards Section -->493<section id="cards" class="ds-section">494<h2 class="ds-section-title">Cards</h2>495<p class="ds-section-description">496Cards are used for projects, partners, and information.497They feature a light background, 15-20px border-radius, and subtle hover effects.498</p>499500<h3 class="ds-mb-24">Project Cards</h3>501<div class="ds-cards-grid ds-mb-40">502<div class="ds-card">503<div class="ds-card-media">504<!-- REPLACE WITH REAL IMAGE URL EXTRACTED FROM SITE -->505<img src="[REAL IMAGE URL FROM SITE]" alt="Project">506</div>507<div class="ds-card-content">508<h3 class="ds-card-title">Title</h3>509<p class="ds-card-text">Subtitle</p>510</div>511</div>512</div>513514<h3 class="ds-mb-24">Partner Cards</h3>515<div class="ds-cards-grid ds-mb-40">516<div class="ds-partner-card">517<div class="ds-partner-image">518<!-- REPLACE WITH REAL IMAGE URL EXTRACTED FROM SITE -->519<img src="[REAL IMAGE URL FROM SITE]" alt="Partner">520</div>521<div class="ds-partner-content">522<div class="ds-partner-title">Partner Name</div>523<div class="ds-partner-subtitle">Client</div>524</div>525</div>526</div>527528<h3 class="ds-mb-24">Pane Cards</h3>529<div class="ds-cards-grid ds-mb-40">530<div class="ds-pane-card">531<div class="ds-pane-index">01</div>532<h3 class="ds-pane-title">Service</h3>533<p class="ds-pane-subtitle">Description</p>534</div>535</div>536</section>537538<!-- Forms Section -->539<section id="forms" class="ds-section">540<h2 class="ds-section-title">Forms</h2>541<p class="ds-section-description">542Form elements are minimalist, with an animated underline on focus543and large, bold labels.544</p>545546<div class="ds-form-grid ds-mb-40">547<div class="ds-form-card">548<h3 class="ds-form-title">Text Fields</h3>549550<div class="ds-textfield">551<label class="ds-textfield-label">Name</label>552<input type="text" class="ds-textfield-input" placeholder="Your name">553</div>554</div>555556<div class="ds-form-card">557<h3 class="ds-form-title">Select & File Upload</h3>558559<div class="ds-selectbox">560<input type="text" class="ds-selectbox-input" value="Option" readonly>561<svg class="ds-selectbox-suffix" viewBox="0 0 18 10"><!-- chevron --></svg>562</div>563564<div class="ds-filebox">565<div class="ds-filebox-icon">+</div>566<div class="ds-filebox-title">Upload Files</div>567<div class="ds-filebox-text">Drag & drop or click</div>568</div>569570<label class="ds-checkbox">571<input type="checkbox" class="ds-checkbox-input">572<span class="ds-checkbox-control"></span>573<span class="ds-checkbox-label">I agree</span>574</label>575</div>576</div>577</section>578579<!-- Navigation Section -->580<section id="navigation" class="ds-section">581<h2 class="ds-section-title">Navigation</h2>582<p class="ds-section-description">583Navigation is sticky, with a smooth color transition on scroll.584Dropdowns appear with a 0.25s delay.585</p>586587<div class="ds-nav-example ds-mb-40">588<nav class="ds-nav-bar">589<div class="ds-nav-bar-left">590<div class="ds-nav-bar-logo">591<!-- REPLACE WITH REAL LOGO URL -->592<img src="[REAL LOGO URL]" alt="Logo" style="height: 30px;">593</div>594<ul class="ds-nav-bar-menu">595<li class="ds-nav-bar-item"><a href="#" class="ds-nav-bar-link">Link</a></li>596<li class="ds-nav-bar-item"><a href="#" class="ds-nav-bar-link ds-nav-bar-dropdown">Dropdown</a></li>597</ul>598</div>599<button class="ds-btn ds-btn-primary">CTA</button>600</nav>601</div>602</section>603604<!-- Badges & Chips Section -->605<section id="badges" class="ds-section">606<h2 class="ds-section-title">Badges & Chips</h2>607<p class="ds-section-description">608Chips are used for tags, filters, and categories.609They have a pill shape and clear hover/active states.610</p>611612<div class="ds-chips-row ds-mb-40">613<span class="ds-chip">Tag 1</span>614<span class="ds-chip">Tag 2</span>615<span class="ds-chip ds-chip-active">Active</span>616</div>617</section>618619<!-- Numbers & Stats Section -->620<section id="numbers" class="ds-section">621<h2 class="ds-section-title">Numbers & Stats</h2>622<p class="ds-section-description">623Large numbers highlight statistics and achievements.624Uses mega typography (130px) with negative letter-spacing.625</p>626627<div class="ds-numbers-grid ds-mb-40">628<div class="ds-number-item">629<div class="ds-number-value">150+</div>630<div class="ds-number-label">Projects</div>631<div class="ds-number-note">Completed</div>632</div>633</div>634</section>635636<!-- Awards Section -->637<section id="awards" class="ds-section">638<h2 class="ds-section-title">Awards</h2>639<p class="ds-section-description">640Awards list with animated underline on hover.641Clean design with subtle item separation.642</p>643644<div class="ds-awards-list ds-mb-40">645<div class="ds-award-item">646<div class="ds-award-header">647<div class="ds-award-name">Award Name</div>648<div class="ds-award-year">2025</div>649</div>650</div>651</div>652</section>653654<!-- Footer Section -->655<section id="footer" class="ds-section">656<h2 class="ds-section-title">Footer</h2>657<p class="ds-section-description">658The footer uses a dark background with white and gray text.6594-column grid with links and contact information.660</p>661662<div class="ds-footer-example ds-mb-40">663<div style="font-size: 50px; color: var(--color-gray-muted);">hello@example.com</div>664665<div class="ds-footer-grid">666<div class="ds-footer-col">667<div class="ds-footer-col-title">Services</div>668<ul class="ds-footer-col-list">669<li class="ds-footer-col-item"><a href="#" class="ds-footer-col-link">Service 1</a></li>670</ul>671</div>672</div>673674<div class="ds-footer-bottom">675<div class="ds-footer-bottom-text">© 2026 Brand</div>676</div>677</div>678</section>679680<!-- Animations Section -->681<section id="animations" class="ds-section">682<h2 class="ds-section-title">Animations</h2>683<p class="ds-section-description">684Animations are subtle and elegant, using GSAP and ScrollMagic685for scroll-based effects.686</p>687688<div class="ds-animation-grid ds-mb-40">689<div class="ds-animation-card">690<div class="ds-animation-box fade"></div>691<div class="ds-animation-name">Fade</div>692</div>693<div class="ds-animation-card">694<div class="ds-animation-box slide"></div>695<div class="ds-animation-name">Slide</div>696</div>697<div class="ds-animation-card">698<div class="ds-animation-box scale"></div>699<div class="ds-animation-name">Scale</div>700</div>701<div class="ds-animation-card">702<div class="ds-animation-box pulse"></div>703<div class="ds-animation-name">Pulse</div>704</div>705</div>706707<div class="ds-code">708<div class="ds-code-title">Keyframe Animations</div>709<pre>@keyframes heartbeat {7100%, 20%, 40%, 100% { transform: scale(1); }71110%, 30% { transform: scale(1.1); }712}713714@keyframes pulse {7150%, 100% {716transform: scale(0.9);717box-shadow: 0 0 0 0 rgba(0,0,0, 0.1);718}71970% {720transform: scale(1);721box-shadow: 0 0 0 50px rgba(0,0,0, 0);722}723}</pre>724</div>725</section>726</main>727</div>728729<!-- JavaScript for interactivity -->730<script>731// Scroll Progress Indicator732window.addEventListener('scroll', function() {733const scrollTop = window.scrollY;734const docHeight = document.documentElement.scrollHeight - window.innerHeight;735const scrollPercent = (scrollTop / docHeight) * 100;736document.getElementById('scrollIndicator').style.width = scrollPercent + '%';737});738739// Smooth scroll for navigation links740document.querySelectorAll('.ds-nav-link').forEach(link => {741link.addEventListener('click', function(e) {742e.preventDefault();743const targetId = this.getAttribute('href');744const targetElement = document.querySelector(targetId);745746if (targetElement) {747targetElement.scrollIntoView({748behavior: 'smooth',749block: 'start'750});751}752});753});754755// Active navigation link on scroll756const sections = document.querySelectorAll('.ds-section');757const navLinks = document.querySelectorAll('.ds-nav-link');758759window.addEventListener('scroll', function() {760let current = '';761762sections.forEach(section => {763const sectionTop = section.offsetTop;764const sectionHeight = section.clientHeight;765766if (pageYOffset >= sectionTop - 200) {767current = section.getAttribute('id');768}769});770771navLinks.forEach(link => {772link.classList.remove('active');773if (link.getAttribute('href') === '#' + current) {774link.classList.add('active');775}776});777});778</script>779</body>780</html>781]]>782783784</html_template>785</output_format>786787<validation_checklist>788Before delivering, verify:789Design Tokens:790791All primary colors extracted (brand, black, white, 6+ gray shades)792793Font-family identified and imported from Google Fonts794795Complete type scale (minimum 10 levels: mega, hero, display, h1-h6, body)796797Line-heights documented (tight, snug, normal, relaxed, loose)798799Letter-spacing documented (tighter, tight, normal, wide)800801Complete spacing system (minimum 10 values)802803Container widths defined804805Border radius system (sm, md, lg, full, pill)806807Shadows documented808809Transitions (fast, normal, slow) + easing810811Z-index scale812813Components and Visuals:814815Real logos and images from the site have been injected into the final HTML (no empty placeholders)816817Minimum 4 button types (primary, chip, link, fab)818819Minimum 3 card types populated with REAL EXTRACTED IMAGES (project, partner, pane)820821Form elements (textfield, selectbox, filebox, checkbox)822823Navigation example (sticky nav with real logo + menu + CTA)824825Badges & Chips with states826827Icons documented (inline SVG)828829Numbers & Stats with mega typography830831Awards list with animation832833Footer example (4 columns)834835Animations demonstrated (fade, slide, scale, pulse)836837Structure:838839CSS variables in :root (all categories)840841Functional sidebar navigation842843Scroll progress indicator844845Smooth scroll navigation846847Active navigation on scroll848849Responsive (media queries: 1024px, 768px)850851Code examples in each section852853Utility classes (margin, color, text-align)854</validation_checklist>855856<required_tools>857858Python 3.x — For pre-processing859860requests — Python library for HTTP requests861862beautifulsoup4 — Python library for HTML parsing863864write — To create the HTML file865866Location: All files are in tools/ inside this skill.867</required_tools>868869<usage_example>870User Input:871"Extract the design system from this site: https://example.com"872873Execution Flow:874875Navigate to the tools folder and install dependencies:876cd .agents/skills/design-system-extractor/tools/877pip install -r requirements.txt878879Run the Python pre-processor:880python design_system_extractor.py https://example.com881882Analyze the returned JSON:883{884"url": "https://example.com",885"fonts": ["Inter", "Roboto"],886"css_variables": {887"color-brand": "#0070F3",888"color-black": "#000000"889},890"colors": ["#0070F3", "#000000", "#FFFFFF"],891"components": [892{"type": "button", "count": 5},893{"type": "card", "count": 12}894],895"images": ["https://example.com/logo.png", "https://example.com/banner.jpg"]896}897898Generate HTML with extracted data, replacing <img> tags with real image URLs from the JSON.899900Save file as design_pattern.html901902Deliver with a summary of the main elements (Colors, Fonts, Components, and the generated file).903</usage_example>904905<section_templates>906907Color Card Template908<div class="ds-color-card">909 <div class="ds-color-swatch" style="background-color: #HEX;"></div>910 <div class="ds-color-info">911 <div class="ds-color-name">Color Name</div>912 <div class="ds-color-value">#HEX</div>913 <div class="ds-color-usage">Usage description</div>914 </div>915</div>916917Type Item Template918<div class="ds-type-item">919 <div class="ds-type-preview" style="font-size: XXpx; font-weight: XXX; line-height: X.XX; letter-spacing: -X.XXem;">920 Preview Text921 </div>922 <div class="ds-type-meta">923 <div class="ds-type-meta-item">font-size: XXpx</div>924 <div class="ds-type-meta-item">line-height: X.XX</div>925 <div class="ds-type-meta-item">letter-spacing: -X.XXem</div>926 <div class="ds-type-meta-item">font-weight: XXX</div>927 </div>928</div>929930Spacing Item Template931<div class="ds-spacing-item">932 <div class="ds-spacing-box" style="width: XXpx;"></div>933 <div class="ds-spacing-label">Space Name</div>934 <div class="ds-spacing-value">XXpx</div>935</div>936937Icon Card Template938<div class="ds-icon-card">939 <svg class="ds-icon-preview" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">940 <path d="..."/>941 </svg>942 <div class="ds-icon-name">Icon Name</div>943 <div class="ds-icon-code">Custom SVG</div>944</div>945946Button Card Template947<div class="ds-button-card">948 <h4 class="ds-mb-16">Button Name</h4>949 <div class="ds-button-example">950 <button class="ds-btn ds-btn-type">Button</button>951 </div>952 <div class="ds-code">953 <pre>.ds-btn-type {954 background: #XXX;955 color: #XXX;956 border-radius: 100px;957 height: 40px;958 font-size: XXpx;959 font-weight: 600;960}</pre>961 </div>962</div>963964Project Card Template965<div class="ds-card">966 <div class="ds-card-media">967 <!-- REPLACE WITH REAL URL EXTRACTED FROM SITE -->968 <img src="[REAL IMAGE URL FROM SITE]" alt="Project">969 </div>970 <div class="ds-card-content">971 <h3 class="ds-card-title">Project Title</h3>972 <p class="ds-card-text">Category</p>973 </div>974</div>975976Partner Card Template977<div class="ds-partner-card">978 <div class="ds-partner-image">979 <!-- REPLACE WITH REAL URL EXTRACTED FROM SITE -->980 <img src="[REAL IMAGE URL FROM SITE]" alt="Partner">981 </div>982 <div class="ds-partner-content">983 <div class="ds-partner-title">Partner Name</div>984 <div class="ds-partner-subtitle">Client</div>985 </div>986</div>987988Pane Card Template989<div class="ds-pane-card">990 <div class="ds-pane-index">01</div>991 <h3 class="ds-pane-title">Service Name</h3>992 <p class="ds-pane-subtitle">Description text</p>993</div>994995Form Elements Template996<!-- Textfield -->997<div class="ds-textfield">998 <label class="ds-textfield-label">Label</label>999 <input type="text" class="ds-textfield-input" placeholder="Placeholder">1000</div>10011002<!-- Selectbox -->1003<div class="ds-selectbox">1004 <input type="text" class="ds-selectbox-input" value="Option" readonly>1005 <svg class="ds-selectbox-suffix" viewBox="0 0 18 10"><!-- chevron --></svg>1006</div>10071008<!-- Filebox -->1009<div class="ds-filebox">1010 <div class="ds-filebox-icon">+</div>1011 <div class="ds-filebox-title">Upload Files</div>1012 <div class="ds-filebox-text">Drag & drop or click</div>1013</div>10141015<!-- Checkbox -->1016<label class="ds-checkbox">1017 <input type="checkbox" class="ds-checkbox-input">1018 <span class="ds-checkbox-control"></span>1019 <span class="ds-checkbox-label">Label</span>1020</label>10211022Number Stats Template1023<div class="ds-number-item">1024 <div class="ds-number-value">150+</div>1025 <div class="ds-number-label">Label</div>1026 <div class="ds-number-note">Note text</div>1027</div>10281029Award Item Template1030<div class="ds-award-item">1031 <div class="ds-award-header">1032 <div class="ds-award-name">Award Name</div>1033 <div class="ds-award-year">2025</div>1034 </div>1035</div>10361037Animation Card Template1038<div class="ds-animation-card">1039 <div class="ds-animation-box fade"></div>1040 <div class="ds-animation-name">AnimationName</div>1041</div>10421043Code Block Template1044<div class="ds-code">1045 <div class="ds-code-title">Section Title</div>1046 <pre>.class {1047 property: value;1048}</pre>1049</div>10501051Utility Classes1052.ds-mb-0 { margin-bottom: 0; }1053.ds-mb-8 { margin-bottom: var(--space-8); }1054.ds-mb-16 { margin-bottom: var(--space-16); }1055.ds-mb-24 { margin-bottom: var(--space-24); }1056.ds-mb-40 { margin-bottom: var(--space-40); }10571058.ds-text-brand { color: var(--color-brand); }1059.ds-text-gray { color: var(--color-gray-text); }1060.ds-text-center { text-align: center; }10611062.ds-bg-black { background-color: var(--color-black); }1063.ds-bg-white { background-color: var(--color-white); }1064.ds-bg-gray { background-color: var(--color-gray-light); }1065</section_templates>10661067<best_practices>1068Always use CSS variables for consistency1069Always 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 site1070Always document states (hover, active, focus, disabled)1071Always include code examples in each section1072Maintain fidelity to the original design1073Use descriptive token names (brand, gray-light, etc.)1074Document responsive breakpoints (1024px, 768px)1075Include animations and transitions with timing functions1076Follow the layout structure: sidebar + main content1077Implement scroll progress indicator1078Add smooth scroll and active navigation1079Use utility classes for margins and colors1080Include at least 10 spacing levels1081Document line-heights and letter-spacing for typography1082Create at least 4 button types and 3 card types populated with real media1083</best_practices>10841085<required_css_structure>1086Base Layout1087.ds-layout {1088 display: grid;1089 grid-template-columns: 280px 1fr;1090 min-height: 100vh;1091}10921093.ds-sidebar {1094 position: sticky;1095 top: 0;1096 height: 100vh;1097 background-color: var(--color-black);1098 color: var(--color-white);1099 padding: var(--space-40) var(--space-24);1100 overflow-y: auto;1101}11021103.ds-main {1104 padding: var(--space-50) var(--space-75);1105 max-width: var(--container-max);1106}11071108Header1109.ds-header {1110 margin-bottom: var(--space-100);1111 padding-bottom: var(--space-50);1112 border-bottom: 1px solid var(--color-gray-light);1113}11141115.ds-title {1116 font-size: var(--text-mega);1117 font-weight: var(--font-weight-bold);1118 line-height: var(--leading-tight);1119 letter-spacing: var(--tracking-tighter);1120}11211122.ds-subtitle {1123 font-size: var(--text-5xl);1124 font-weight: var(--font-weight-medium);1125 color: var(--color-gray-text);1126}11271128Sections1129.ds-section {1130 margin-bottom: var(--space-100);1131}11321133.ds-section-title {1134 font-size: var(--text-5xl);1135 font-weight: var(--font-weight-bold);1136 margin-bottom: var(--space-40);1137 padding-bottom: var(--space-16);1138 border-bottom: 3px solid var(--color-brand);1139 display: inline-block;1140}11411142.ds-section-description {1143 font-size: var(--text-lg);1144 color: var(--color-gray-text);1145 margin-bottom: var(--space-40);1146 max-width: var(--container-text);1147}11481149Scroll Indicator1150.ds-scroll-indicator {1151 position: fixed;1152 top: 0;1153 left: 0;1154 height: 3px;1155 background-color: var(--color-brand);1156 z-index: var(--z-fixed);1157 width: 0%;1158 transition: width 0.1s;1159}1160</required_css_structure>11611162<limitations>1163- Do not copy copyright-protected code1164- Use for educational/reference purposes only1165- Respect font and asset licenses1166- Do not reproduce protected text content1167- Sites with anti-scraping protection may fail to fetch1168</limitations>11691170<setup_and_metadata>1171Python Dependencies:1172Install before using:1173```bash1174# Navigate to the tools folder1175cd .agents/skills/design-system-extractor/tools/11761177# Install dependencies1178pip install -r requirements.txt1179```1180Or directly:1181```bash1182pip install requests beautifulsoup41183```11841185requirements.txt:1186```1187requests>=2.31.01188beautifulsoup4>=4.12.01189```11901191Location: tools/requirements.txt inside this skill.11921193Versioning:1194Version: 2.0.0 (Optimized with Python)1195Last updated: 2026-03-1911961197v2.0 Improvements:1198- Python pre-processing — Prevents context window overflow1199- HTML sanitization — Removes SVGs, scripts, base641200- Selective CSS extraction — Focuses on :root, ignores the rest1201- Tailwind detection — Token inference from utility classes1202- Anti-hallucination — Strict guidelines to prevent fabricated data1203- Optimized output — Generates only HTML with real image injection12041205File Structure:1206```1207.agents/skills/design-system-extractor/1208├── SKILL.md # This skill (you are here)1209└── tools/1210 ├── design_system_extractor.py # Main Python script1211 ├── extract_tokens.py # Standalone CSS token extractor1212 ├── requirements.txt # Python dependencies1213 └── README.md # Tools documentation1214```12151216Important: Always run Python scripts from the tools/ folder:1217```bash1218cd .agents/skills/design-system-extractor/tools/1219python design_system_extractor.py <URL>1220```1221</setup_and_metadata>1222</skill>
kalilfagundes