100100 Ideas AI
Submit Tool

design-extract

MCPOpen source

Extract any website's complete design system as DTCG tokens, Tailwind, Figma variables and MCP server output.

4.1kMIT

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+.

Pros

  • +One command emits 17+ artifacts including DTCG tokens, Tailwind v4, shadcn theme, Figma variables and multi-platform emitters
  • +MCP server integrates directly with Claude Code, Cursor and Windsurf for AI coding workflows
  • +Deep analysis beyond tokens: responsive breakpoints, interaction states, WCAG contrast scoring and multi-page consistency

Cons

  • −Requires Node 20+ and a headless Playwright browser, adding setup weight
  • −Output quality depends on the target site's DOM and CSS structure
  • −Large feature surface (remix, battle, studio, fidelity) can be overwhelming for simple extraction needs

Target audience: Frontend engineers, design-system maintainers and AI coding agent users who want to reverse-engineer or audit a website's design language.

Related tools

Other open-source tools that share tags with design-extract.