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: 5.0k
Skills: 1
License: MIT
Last commit: Nov 5, 2026

install.sh

# every skill in this repo, via the skills CLI

npx skills add Manavarya09/design-extract

# or, for Claude Code, copy one skill folder into

~/.claude/skills/ (all projects)

.claude/skills/ (this project)

View Manavarya09/design-extract on GitHub

Inside this pack

1 skill in design-extract

Each skill is a SKILL.md file your agent loads when a task matches its description.

01
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', 'turn this URL into design tokens', 'make a Tailwind theme from this site', or '/extract-design'. Do not use for building a new UI from scratch unless the user first wants to extract an existing website's design language.
Preview SKILL.md