design-extract

Q: How to install design-extract?

Open your MCP config: ~/.claude.json. Then add the config to "mcpServers": { "design-extract": { "command": "...", "args": [] } }. Finally, /mcp in Claude Code.

Q: What is design-extract best for?

design-extract is categorized under General. It covers: design, mcp.

New

3.2kGitHubGeneralby Manavarya09

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

First seen 5/22/2026

Summary

It also performs a CSS health audit, WCAG remediation, and includes a Chrome extension, making it invaluable for developers who need to reverse-engineer or migrate design systems quickly.

Install & Usage

Open your MCP config

~/.claude.json

Add the server config

Add the configuration to "mcpServers": { "design-extract": { "command": "...", "args": [] } }

Restart Claude Code

/mcp

Use Cases

Extract and convert a competitor's website design tokens into your own project's format for rapid prototyping.

Migrate an existing website's design system to a new framework like Tailwind v4 or shadcn/ui without manual inspection.

Generate Figma variables from a live website to sync design and development assets.

Perform a CSS health audit on a legacy website to identify unused styles and accessibility issues.

Create a cross-platform design token set for iOS, Android, and Flutter from a single website source.

Remediate WCAG compliance issues by extracting color contrast ratios and suggesting accessible alternatives.

Usage Examples

/design-extract https://example.com --emitters tailwind,figma,swiftui

Extract the design system from the current page and output DTCG tokens with a CSS health audit.

Run design-extract on my company's homepage and generate shadcn/ui components and WCAG remediation report.

View source on GitHub

designmcp

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is design-extract?

This skill extracts a complete design system from any website, generating DTCG tokens, semantic, primitive, and composite tokens, and multi-platform emitters for iOS SwiftUI, Android Compose, Flutter, WordPress, Tailwind v4, Figma variables, and shadcn/ui. It also performs a CSS health audit, WCAG remediation, and includes a Chrome extension, making it invaluable for developers who need to reverse-engineer or migrate design systems quickly.

How to install design-extract?

To install design-extract: open your mcp config (~/.claude.json), then add the config to "mcpServers": { "design-extract": { "command": "...", "args": [] } }. Finally, /mcp in Claude Code.

What is design-extract best for?

design-extract is a mcp categorized under General. It is designed for: design, mcp. Created by Manavarya09.

What can I use design-extract for?

design-extract is useful for: Extract and convert a competitor's website design tokens into your own project's format for rapid prototyping.; Migrate an existing website's design system to a new framework like Tailwind v4 or shadcn/ui without manual inspection.; Generate Figma variables from a live website to sync design and development assets.; Perform a CSS health audit on a legacy website to identify unused styles and accessibility issues.; Create a cross-platform design token set for iOS, Android, and Flutter from a single website source.; Remediate WCAG compliance issues by extracting color contrast ratios and suggesting accessible alternatives..