🎯

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.

extract-design

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

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

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

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

787Installs

-

AddedApr 15, 2026