loaditout.ai
SkillsPacksTrendingLeaderboardAPI DocsBlogSubmitRequestsCompareAgentsXPrivacyDisclaimer
{}loaditout.ai
Skills & MCPPacksBlog

design-system-extractor-skill

MCP Tool

david-lai-jpg/design-system-extractor-skill

Claude Code skill that extracts design systems from live websites. Uses Firecrawl MCP to scrape branding, CSS tokens, and typography, then outputs structured CSS custom properties, Style Dictionary JSON, an analysis report, and a visual preview page.

Install

$ npx loaditout add david-lai-jpg/design-system-extractor-skill

Platform-specific configuration:

.claude/settings.json
{
  "mcpServers": {
    "design-system-extractor-skill": {
      "command": "npx",
      "args": [
        "-y",
        "design-system-extractor-skill"
      ]
    }
  }
}

Add the config above to .claude/settings.json under the mcpServers key.

About

Design System Extractor

A Claude Code skill that extracts structured design tokens from any live website using the Firecrawl MCP server.

What it does

Given a URL, the skill:

  1. Crawls the site using Firecrawl's branding format + raw HTML scraping
  2. Extracts colors, typography, spacing, shadows, border radius, breakpoints
  3. Clusters and deduplicates values, detects type scale ratios and spacing base units
  4. Maps everything to a 3-layer token hierarchy (primitive → semantic → component)
  5. Outputs four files:
  • design-system.css — CSS custom properties in 3 layers
  • design-system.json — Style Dictionary / Tokens Studio compatible JSON
  • design-system-report.md — Human-readable analysis with palette tables and scale detection
  • design-system-preview.html — Visual reference page styled with the extracted tokens
Prerequisites
  • Claude Code installed
  • Firecrawl MCP configured with API key
Installation

The skill is symlinked to ~/.claude/skills/design-system-extractor/. If the symlink is missing:

ln -sf /path/to/this/repo/skill ~/.claude/skills/design-system-extractor
Usage

In Claude Code, say:

  • "Extract the design system from https://example.com"
  • "What fonts and colors does example.com use?"
  • "Get design tokens from https://example.com"
  • "Crawl example.com for its design system"
Development
pnpm install        # Install dev dependencies
pnpm format         # Format with dprint
pnpm format:check   # Check formatting

Tags

claude-codeclaude-code-skilldesign-systemdesign-tokensfirecrawlmcpstyle-dictionaryweb-scraping

Reviews

Loading reviews...

Quality Signals

0
Installs
Last updated20 days ago
Security: AREADME

Safety

Risk Levelmedium
Data Access
read
Network Accessnone

Details

Sourcegithub-crawl
Last commit3/26/2026
View on GitHub→

Embed Badge

[![Loaditout](https://loaditout.ai/api/badge/david-lai-jpg/design-system-extractor-skill)](https://loaditout.ai/skills/david-lai-jpg/design-system-extractor-skill)