🎯

extract-design

🎯Skill

from manavarya09/design-extract

What it does

**DESIGNLANG** skill that reverse-engineers any website's complete design system in one command — crawls with a headless browser, extracts computed styles from the live DOM, and generates 8 output files including AI-optimized markdown, Tailwind config, shadcn/ui theme, Figma variables, W3C design tokens, plus layout patterns, responsive behavior across 4 breakpoints, and WCAG accessibility scoring.

📦

Same repository

manavarya09/design-extract(2 items)

extract-design

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add manavarya09/design-extract --skill extract-design

skills.sh Install⚠ Installs to .agents/skills/

npx skills add manavarya09/design-extract --skill extract-design

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/extract-design/SKILL.md

SKILL.md

2,458Installs

AddedApr 15, 2026

View on GitHub Back to Skills

More from this repository1

🏪

Manavarya09/design-extract🏪Marketplace

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