CommunityResearch & Data Analysisgithub.com

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.

What is design-system-extractor-skill?

design-system-extractor-skill is a Claude Code agent skill that 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.

Works withClaude Code~Codex CLI~Cursor
npx skills add david-lai-jpg/design-system-extractor-skill

Installed? Explore more Research & Data Analysis skills: obra/superpowers, affaan-m/quarkus-verification, affaan-m/uspto-database · View all 6 →

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

What does design-system-extractor-skill do?

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.

Related Skills