{"id":"2d58df5e-b628-4d66-b7fc-d98faf28a860","shortId":"dBDyxw","kind":"skill","title":"extract-design","tagline":"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 whe","description":"# Extract Design Language\n\nExtract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.\n\n## Prerequisites\n\nEnsure `designlang` is available. Install if needed:\n\n```bash\nnpm install -g designlang\n```\n\nOr use npx (no install required):\n\n```bash\nnpx designlang <url>\n```\n\n## Process\n\n1. **Run the extraction** on the provided URL:\n\n```bash\nnpx designlang <url> --screenshots\n```\n\nFor multi-page crawling: `npx designlang <url> --depth 3 --screenshots`\nFor dark mode: `npx designlang <url> --dark --screenshots`\n\n2. **Read the generated markdown file** to understand the design:\n\n```bash\ncat design-extract-output/*-design-language.md\n```\n\n3. **Present key findings** to the user:\n   - Primary color palette with hex codes\n   - Font families in use\n   - Spacing system (base unit if detected)\n   - WCAG accessibility score\n   - Component patterns found\n   - Notable design decisions (shadows, radii, etc.)\n\n4. **Offer next steps:**\n   - Copy `*-tailwind.config.js` into their project\n   - Import `*-variables.css` into their stylesheet\n   - Paste `*-shadcn-theme.css` into globals.css for shadcn/ui users\n   - Import `*-theme.js` for React/CSS-in-JS projects\n   - Import `*-figma-variables.json` into Figma for designer handoff\n   - Open `*-preview.html` in a browser for a visual overview\n   - Use the markdown file as context for AI-assisted development\n\n## Output Files (8)\n\n| File | Purpose |\n|------|---------|\n| `*-design-language.md` | AI-optimized markdown — the full design system for LLMs |\n| `*-preview.html` | Visual HTML report with swatches, type scale, shadows, a11y |\n| `*-design-tokens.json` | W3C Design Tokens format |\n| `*-tailwind.config.js` | Ready-to-use Tailwind CSS theme |\n| `*-variables.css` | CSS custom properties |\n| `*-figma-variables.json` | Figma Variables import format |\n| `*-theme.js` | React/CSS-in-JS theme object |\n| `*-shadcn-theme.css` | shadcn/ui theme CSS variables |\n\n## Additional Commands\n\n- **Compare two sites:** `npx designlang diff <urlA> <urlB>`\n- **View history:** `npx designlang history <url>`\n\n## Options\n\n| Flag | Description |\n|------|-------------|\n| `--out <dir>` | Output directory (default: `./design-extract-output`) |\n| `--dark` | Also extract dark mode color scheme |\n| `--depth <n>` | Crawl N internal pages for site-wide extraction |\n| `--screenshots` | Capture component screenshots (buttons, cards, nav) |\n| `--wait <ms>` | Wait time after page load for SPAs |\n| `--framework <type>` | Generate only specific theme (`react` or `shadcn`) |","tags":["extract","design","manavarya09","agent-skill","agent-skills","claude-code-plugin","cli","colors","css","design-system","design-tokens","npx"],"capabilities":["skill","source-manavarya09","skill-extract-design","topic-agent-skill","topic-agent-skills","topic-claude-code-plugin","topic-cli","topic-colors","topic-css","topic-design-system","topic-design-tokens","topic-npx","topic-playwright","topic-skills-sh","topic-tailwind"],"categories":["design-extract"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Manavarya09/design-extract/extract-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Manavarya09/design-extract","source_repo":"https://github.com/Manavarya09/design-extract","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 984 github stars · SKILL.md body (2,628 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-18T21:56:20.625Z","embedding":null,"createdAt":"2026-04-18T21:56:20.625Z","updatedAt":"2026-04-18T21:56:20.625Z","lastSeenAt":"2026-04-18T21:56:20.625Z","tsv":"'/design-extract-output':306 '1':95 '2':124 '3':115,141 '4':176 '8':14,59,231 'a11y':254 'access':42,71,165 'addit':286 'ai':19,226,236 'ai-assist':225 'ai-optim':18,235 'also':39,308 'anim':69 'assist':227 'avail':76 'base':160 'bash':80,91,103,134 'breakpoint':68 'browser':213 'button':328 'captur':325 'card':329 'cat':135 'code':153 'color':63,149,312 'command':287 'compar':288 'complet':51 'compon':67,167,326 'config':26 'context':223 'copi':180 'cover':62 'crawl':111,315 'css':37,266,269,284 'custom':270 'dark':118,122,307,310 'decis':172 'default':305 'depth':114,314 'descript':301 'design':3,7,34,47,52,133,137,171,207,241,257 'design-extract-output':136 'design-language.md':140,234 'design-tokens.json':255 'designlang':74,84,93,105,113,121,292,297 'detect':163 'develop':228 'diff':293 'directori':304 'ensur':73 'etc':175 'extract':2,4,46,49,98,138,309,323 'extract-design':1 'famili':155 'figma':31,205,273 'figma-variables.json':203,272 'file':16,61,129,221,230,232 'find':144 'flag':300 'font':154 'format':259,276 'found':169 'framework':339 'full':6,240 'g':83 'generat':58,127,340 'globals.css':193 'handoff':208 'hex':152 'histori':295,298 'html':23,247 'import':185,197,202,275 'includ':17 'instal':77,82,89 'intern':317 'key':143 'languag':8,48,53 'llms':244 'load':336 'markdown':21,128,220,238 'mode':119,311 'multi':109 'multi-pag':108 'n':316 'nav':330 'need':79 'next':178 'notabl':170 'npm':81 'npx':87,92,104,112,120,291,296 'object':280 'offer':177 'open':209 'optim':20,237 'option':299 'output':15,60,139,229,303 'overview':217 'page':110,318,335 'palett':150 'past':190 'pattern':168 'prerequisit':72 'present':142 'preview':24 'preview.html':210,245 'primari':148 'process':94 'produc':13 'project':184,201 'properti':271 'provid':101 'purpos':233 'radii':174 'react':27,344 'react/css-in-js':200,278 'read':125 'readi':262 'ready-to-us':261 'report':248 'requir':90 'run':40,96 'scale':252 'scheme':313 'score':43,166 'screenshot':106,116,123,324,327 'shadcn':346 'shadcn-theme.css':191,281 'shadcn/ui':29,195,282 'shadow':66,173,253 'site':290,321 'site-wid':320 'skill' 'skill-extract-design' 'source-manavarya09' 'space':65,158 'spas':338 'specif':342 'step':179 'stylesheet':189 'swatch':250 'system':159,242 'tailwind':25,265 'tailwind.config.js':181,260 'theme':28,30,267,279,283,343 'theme.js':198,277 'time':333 'token':35,258 'topic-agent-skill' 'topic-agent-skills' 'topic-claude-code-plugin' 'topic-cli' 'topic-colors' 'topic-css' 'topic-design-system' 'topic-design-tokens' 'topic-npx' 'topic-playwright' 'topic-skills-sh' 'topic-tailwind' 'two':289 'type':251 'typographi':64 'understand':131 'unit':161 'url':12,57,102 'use':44,86,157,218,264 'user':147,196 'variabl':32,38,274,285 'variables.css':186,268 'view':294 'visual':22,216,246 'w3c':33,256 'wait':331,332 'wcag':41,164 'websit':11,56 'whe':45 'wide':322","prices":[{"id":"6c688b1a-618d-463d-a85a-41167b1f49f2","listingId":"2d58df5e-b628-4d66-b7fc-d98faf28a860","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Manavarya09","category":"design-extract","install_from":"skills.sh"},"createdAt":"2026-04-18T21:56:20.625Z"}],"sources":[{"listingId":"2d58df5e-b628-4d66-b7fc-d98faf28a860","source":"github","sourceId":"Manavarya09/design-extract/extract-design","sourceUrl":"https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design","isPrimary":false,"firstSeenAt":"2026-04-18T21:56:20.625Z","lastSeenAt":"2026-04-18T21:56:20.625Z"}],"details":{"listingId":"2d58df5e-b628-4d66-b7fc-d98faf28a860","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Manavarya09","slug":"extract-design","github":{"repo":"Manavarya09/design-extract","stars":984,"topics":["agent-skill","agent-skills","ai","claude-code-plugin","cli","colors","css","design-system","design-tokens","npx","playwright","skills-sh","tailwind","typography","web-scraping"],"license":"mit","html_url":"https://github.com/Manavarya09/design-extract","pushed_at":"2026-04-18T13:11:18Z","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. npx CLI + Claude Code plugin.","skill_md_sha":"8c4fc1df7711bdd17681ef137e6744586e000fdf","skill_md_path":"skills/extract-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design"},"source":"github","category":"design-extract","frontmatter":{"name":"extract-design","description":"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', or '/extract-design'."},"skills_sh_url":"https://skills.sh/Manavarya09/design-extract/extract-design"},"updatedAt":"2026-04-18T21:56:20.625Z"}}