Design Extract
CLI + Claude Code plugin that reverse-engineers the complete design system of any website, colors, typography, spacing, shadows, motion language, interaction states (hover/focus/active), brand voice and responsive behavior. Outputs DTCG tokens ready to import in Figma, Tailwind v4 or shadcn/ui.
Strengths
- Extracts motion language (animations, transitions) in addition to visual tokens, unique on the market
- Multi-platform output: Tailwind v4, Figma variables, shadcn/ui, iOS SwiftUI, Android Compose
- Integrated MCP plugin, usable directly from Claude Code, Cursor or Windsurf
Limitations
- No package published since June 2026: the repository answers, but the project has stopped moving
- Returns values, not intentions: it cannot separate a system token from a hardcoded colour
- Requires Playwright and Node 20+, slightly heavier setup than a simple npx
Best for
- Devs who want to reproduce a competitor or inspiration site's UI without starting from scratch
- Designers who want to extract tokens from an existing site to import into Figma