</>MCP Agents Market
Plugin

design-extract

by Manavarya094kHTMLUpdated 2026-08-31

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 remediatio

Claude CodeCursorWindsurfCodex

design-extract is a Claude Code plugin that automatically extracts complete design systems from any website with a single command. It uses headless browser automation to capture DTCG tokens, color palettes, typography, spacing, motion, components, and accessibility metrics from live websites. The plugin provides eleven slash commands within Claude Code for extracting, grading, comparing, and remixing web designs, outputting Tailwind configs, Figma variables, shadcn/ui themes, and multi-platform code (iOS SwiftUI, Android Compose, Flutter, WordPress).

Key Features

Eleven Claude Code slash commands (/extract, /grade, /battle, /remix, /pack, /site, /fidelity, /dna, /studio, /brand, /gallery)
Extracts W3C DTCG design tokens, Tailwind config, shadcn/ui theme, Figma variables, and CSS custom properties from live sites
Multi-platform code generation for iOS SwiftUI, Android Compose, Flutter, and WordPress block themes
Design quality scoring with letter grades (A-F), WCAG accessibility audits, and actionable improvement recommendations
Clone fidelity measurement comparing original sites against reproductions with pixel-diff and motion analysis
Whole-site design system synthesis from multiple pages with consistency grading and coverage metrics
Component anatomy extraction with variant matrices, interaction states (hover/focus/active), and responsive behavior across breakpoints
Motion system capture including durations, easings, spring detection, choreography/stagger, and scroll-linked animations

Use Cases

  • 01Rapidly recreating a competitor's design system in Tailwind, shadcn/ui, or Figma for internal prototyping
  • 02Auditing multi-page website consistency and generating canonical design tokens for design system consolidation
  • 03Measuring clone fidelity during website rebuilds with pixel-diff reports and ranked correction plans
  • 04Extracting accessible color palettes with WCAG contrast ratios and automatic remediation suggestions
  • 05Generating brand guideline documents and design report cards for client handoffs or portfolio showcases
  • 06Comparing design DNA of multiple sites to understand positioning in the design landscape

Related Plugins

View more

andrej-karpathy-skills

A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.

Plugin216.1k

claude-mem

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

Plugin95k

Understand-Anything

Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.

Plugin84.9k

rtk

CLI proxy that reduces LLM token consumption by 60-90% on common dev commands. Single Rust binary, zero dependencies

Plugin82.1k

design-extract — FAQ

What is the design-extract Claude Code plugin?+

It's a plugin that adds eleven slash commands to Claude Code for extracting, analyzing, and comparing web design systems. It uses headless browser automation to capture colors, typography, spacing, components, motion, and accessibility metrics from any live website, outputting DTCG tokens, Tailwind configs, Figma variables, and multi-platform code.

How do I install the design-extract plugin in Claude Code?+

Run '/plugin marketplace add Manavarya09/design-extract' inside Claude Code to register the repo as a marketplace, then '/plugin install designlang@designlang' to install the plugin. Restart Claude Code if prompted, and the slash commands become available immediately.

Which AI clients support this plugin?+

The plugin is specifically designed for Claude Code. The underlying CLI tool also works as an MCP server for Cursor, Windsurf, and other MCP-aware agents, and as a skill for 40+ AI coding agents via the skills ecosystem.

Does design-extract require API keys or external services?+

No API keys are required for basic extraction. Optional AI-powered features like '--smart' classification can use Atlas Cloud (requires ATLASCLOUD_API_KEY) or OpenAI/Anthropic keys, but the core extraction, grading, and token generation work completely offline after the one-time Chromium browser installation.

Is design-extract free to use?+

Yes, design-extract is MIT licensed and free. The core extraction and all 17+ output formats require no paid services. Optional AI classification features can route to Atlas Cloud or other providers if you have API keys, but are not required.

What outputs does the plugin generate?+

It generates 17+ files including DTCG tokens, Tailwind config, shadcn/ui theme, Figma variables, CSS custom properties, typed React component anatomy, motion tokens, brand voice JSON, prompt packs for v0/Lovable/Cursor, and platform-specific code for iOS, Android, Flutter, and WordPress when requested.

How do I install design-extract?+

Open the source repository on GitHub and follow its README. design-extract is a plugin — MCP Agents Market links you directly to the official repo.

Is design-extract free?+

design-extract is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.

Related searches

Design PluginsDeveloper Tools PluginsBest MCP ServersBest SkillsBest AgentsTop rated listingsClaude Code toolsBrowse all categories