design-extract
Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.
- stars
- 4,110
- 30-day movement
- +248/day
- Related entries
- 61
- Connections
- 3
A Node 20+ CLI and MCP server that scrapes a website with Playwright and extracts its design system into DTCG-format design tokens at semantic, primitive, and composite levels. It emits to multiple targets (iOS SwiftUI, Android Compose, Flutter, WordPress, Tailwind v4, Figma variables, shadcn/ui) and adds a CSS health audit with WCAG remediation, plus a Chrome extension.
You want to recover a usable, standards-format token set from an existing site in one command instead of hand-auditing its CSS.
Use it to
- Extract DTCG tokens from a live website
- Port a site's design to SwiftUI, Compose, or Flutter
- Generate Tailwind v4 or Figma variables from a URL
- Audit a site's CSS and fix WCAG issues
- Run extraction inside Claude Code, Cursor, or Windsurf via MCP
For Developers rebuilding or porting existing website designs
- Role
- mcp-server
- Language
- HTML
- Licence
- MIT
- Forks
- 348
- Open issues
- 21
- Last push
- 2026-09-16
- Latest release
- v2.0.0 · 2026-04-15
- Skills shipped
- 1