{"id":"7b095368-e582-4be3-bf99-0ee50b3acdb7","shortId":"FY2eTu","kind":"skill","title":"extract-design","tagline":"Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt. Runs a headless browser against the URL and returns real computed values from the DOM. Use when you need a site's actual design toke","description":"# Extract Design — Dembrandt\n\nDembrandt runs a headless Chromium browser against any URL, walks up to thousands of DOM elements, reads computed CSS, and returns a structured design system: colors with confidence scoring, typography styles, spacing scale, border radius, borders, shadows, and interactive component styles.\n\n## How to Run\n\n```bash\n# Install once (global)\nnpm i -g dembrandt\n\n# Basic extraction — outputs to terminal\ndembrandt https://stripe.com\n\n# JSON output — pipe into files or other tools\ndembrandt https://stripe.com --json-only > stripe-tokens.json\n\n# W3C DTCG format (design-tokens.org standard)\ndembrandt https://stripe.com --dtcg --save-output\n\n# Generate DESIGN.md (human + AI readable brand doc)\ndembrandt https://stripe.com --design-md\n\n# Multi-page crawl (follows internal links)\ndembrandt https://stripe.com --pages 5\n\n# Dark mode colors\ndembrandt https://stripe.com --dark-mode\n\n# Mobile viewport\ndembrandt https://stripe.com --mobile\n\n# Everything saved to output/\ndembrandt https://stripe.com --save-output\n```\n\n## Output Structure\n\nDembrandt returns a structured object. The key sections:\n\n```\ncolors.palette        — Deduplicated colors with confidence (high/medium/low)\ncolors.semantic       — Primary, secondary color detection\ncolors.cssVariables   — Named CSS custom properties with LCH + OKLCH values\ntypography.styles     — Font family, size, weight, line-height per context\ntypography.sources    — Google Fonts, Adobe Fonts, variable font detection\nspacing.commonValues  — Margin/padding scale with rem equivalents\nspacing.scaleType     — 4px, 8px, or custom grid\nborderRadius.values   — Border radius tokens with element context\nborders.combinations  — Width + style + color combinations\nshadows               — Box shadow elevation system\ncomponents.buttons    — Button variants with hover/active/focus states\ncomponents.inputs     — Input styles with focus states\ncomponents.links      — Link colors and hover states\ncomponents.badges     — Badge/tag/chip variants\nbreakpoints           — Responsive breakpoints from CSS media queries\nframeworks            — Detected CSS framework (Tailwind, shadcn, MUI, etc.)\niconSystem            — Detected icon library (Heroicons, FA, Material, etc.)\n```\n\n## Working with Extracted Tokens\n\n### Seeding a Tailwind config\n\nAfter extraction, map the output to `tailwind.config.js`:\n\n```js\n// tailwind.config.js\nexport default {\n  theme: {\n    colors: {\n      primary: '#hex-from-colors.palette[0]',\n      // ...\n    },\n    fontFamily: {\n      sans: ['Family from typography.styles', 'system-ui'],\n    },\n    spacing: {\n      // Map spacing.commonValues px → rem\n    },\n    borderRadius: {\n      // Map borderRadius.values\n    },\n    boxShadow: {\n      // Map shadows\n    },\n  }\n}\n```\n\n### Seeding a shadcn/ui theme\n\nMap semantic colors to shadcn CSS variables in HSL:\n\n```css\n:root {\n  --background: /* from colors.palette — lightest neutral */;\n  --foreground: /* from colors.palette — darkest neutral */;\n  --primary: /* from colors.semantic.primary */;\n  --primary-foreground: /* contrasting color */;\n  --muted: /* mid-tone neutral */;\n  --border: /* from borders.combinations[0].color */;\n  --radius: /* from borderRadius.values[0].value */;\n}\n```\n\n### Reading confidence levels\n\nDembrandt scores every color by semantic context:\n\n| Confidence | Meaning |\n|---|---|\n| **high** | Appears on semantically labeled elements (buttons, CTAs, headers with brand classes). Almost certainly a brand color. |\n| **medium** | Moderate frequency or moderate context. Likely a brand color. |\n| **low** | Rare, low semantic context. May be a one-off or component-specific color. |\n\nStart with `high` confidence colors when building a palette. Include `medium` for full coverage. Treat `low` as reference only.\n\n## Flags Reference\n\n| Flag | What it does |\n|---|---|\n| `--json-only` | Clean JSON to stdout — pipe into files or tools |\n| `--save-output` | Save JSON to `output/<domain>/<timestamp>.json` |\n| `--dtcg` | W3C Design Tokens Community Group format |\n| `--design-md` | Generate `DESIGN.md` — prose-first brand doc |\n| `--brand-guide` | Generate a PDF brand guide |\n| `--dark-mode` | Extract dark color scheme and merge into palette |\n| `--mobile` | Extract at 390px mobile viewport |\n| `--pages <n>` | Crawl up to N pages and merge tokens |\n| `--sitemap` | Discover pages from sitemap.xml |\n| `--slow` | 3× timeouts — use on slow-loading or JS-heavy sites |\n| `--screenshot <path>` | Save a full-page screenshot |\n| `--raw-colors` | Include pre-filter raw colors in JSON output |\n| `--browser firefox` | Use Firefox instead of Chromium |\n\n## Anti-Bot and SPA Handling\n\nDembrandt handles common extraction challenges automatically:\n\n- **SPA hydration** — waits 8s for React/Vue/Svelte to render before extracting\n- **Bot detection** — spoofs hardware concurrency, device memory, removes webdriver traces\n- **Lazy content** — scrolls the full page to trigger lazy-loaded components\n- **Cloudflare / bot walls** — auto-retries with a visible browser if headless is blocked\n- **Slow sites** — use `--slow` for 3× timeouts on heavy JS bundles\n\n## Checklist After Extraction\n\n- [ ] Identify the 3–5 high-confidence colors — these are the core brand palette\n- [ ] Check `colors.semantic.primary` — is it correct?\n- [ ] Look at `typography.styles` — what are the heading and body fonts?\n- [ ] Check `spacing.scaleType` — 4px or 8px grid?\n- [ ] Review `components.buttons` — how many variants exist?\n- [ ] Check `frameworks` — is Tailwind, shadcn, or MUI detected? This shapes how you apply the tokens.\n- [ ] Use `--dark-mode` if the site has a dark theme\n- [ ] Use `--pages 3` if the site has a multi-section design system spread across routes","tags":["extract","design","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux"],"capabilities":["skill","source-dembrandt","skill-extract-design","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/extract-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (5,713 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-05-18T19:08:26.806Z","embedding":null,"createdAt":"2026-05-18T13:14:01.240Z","updatedAt":"2026-05-18T19:08:26.806Z","lastSeenAt":"2026-05-18T19:08:26.806Z","tsv":"'0':325,386,391 '3':550,651,662,729 '390px':532 '4px':236,691 '5':158,663 '8px':237,693 '8s':603 'across':741 'actual':46 'adob':224 'ai':139 'almost':417 'anti':589 'anti-bot':588 'appear':406 'appli':713 'auto':636 'auto-retri':635 'automat':599 'background':360 'badge/tag/chip':277 'bash':96 'basic':104 'block':645 'bodi':687 'border':85,87,242,383 'borderradius':339 'borderradius.values':241,341,390 'borders.combinations':248,385 'bot':590,610,633 'box':254 'boxshadow':342 'brand':141,415,420,430,508,511,516,672 'brand-guid':510 'breakpoint':279,281 'browser':27,57,581,641 'build':454 'bundl':656 'button':259,411 'certain':418 'challeng':598 'check':674,689,701 'checklist':657 'chromium':56,587 'class':416 'clean':476 'cloudflar':632 'color':9,77,161,193,200,251,272,322,351,377,387,399,421,431,447,452,523,571,577,667 'colors.cssvariables':202 'colors.palette':191,362,367 'colors.semantic':197 'colors.semantic.primary':372,675 'combin':252 'common':596 'communiti':497 'complet':6 'compon':12,91,445,631 'component-specif':444 'components.badges':276 'components.buttons':258,696 'components.inputs':264 'components.links':270 'comput':34,69 'concurr':614 'confid':79,195,394,403,451,666 'config':309 'content':621 'context':220,247,402,427,436 'contrast':376 'core':671 'correct':678 'coverag':461 'crawl':151,536 'css':70,204,283,288,354,358 'ctas':412 'custom':205,239 'dark':159,165,519,522,718,725 'dark-mod':164,518,717 'darkest':368 'dedupl':192 'default':320 'dembrandt':23,51,52,103,109,119,130,143,155,162,169,176,183,396,594 'design':3,7,16,47,50,75,146,495,501,738 'design-md':145,500 'design-tokens.org':128 'design.md':137,504 'detect':201,228,287,295,611,708 'devic':615 'discov':545 'doc':142,509 'dom':38,66 'dtcg':126,132,493 'element':67,246,410 'elev':256 'equival':234 'etc':293,301 'everi':398 'everyth':172 'exist':700 'export':319 'extract':2,4,49,105,304,311,521,530,597,609,659 'extract-design':1 'fa':299 'famili':213,328 'file':115,482 'filter':575 'firefox':582,584 'first':507 'flag':467,469 'focus':268 'follow':152 'font':212,223,225,227,688 'fontfamili':326 'foreground':365,375 'format':127,499 'framework':286,289,702 'frequenc':424 'full':460,566,624 'full-pag':565 'g':102 'generat':136,503,513 'global':99 'googl':222 'grid':240,694 'group':498 'guid':512,517 'handl':593,595 'hardwar':613 'head':685 'header':413 'headless':26,55,643 'heavi':560,654 'height':218 'heroicon':298 'hex-from-colors.palette':324 'high':405,450,665 'high-confid':664 'high/medium/low':196 'hover':274 'hover/active/focus':262 'hsl':357 'human':138 'hydrat':601 'icon':296 'iconsystem':294 'identifi':660 'includ':457,572 'input':265 'instal':97 'instead':585 'interact':90 'intern':153 'js':317,559,655 'js-heavi':558 'json':111,122,474,477,489,492,579 'json-on':121,473 'key':189 'label':409 'lazi':620,629 'lazy-load':628 'lch':208 'level':395 'librari':297 'lightest':363 'like':428 'line':217 'line-height':216 'link':154,271 'live':20 'load':556,630 'look':679 'low':432,434,463 'mani':698 'map':312,335,340,343,349 'margin/padding':230 'materi':300 'may':437 'md':147,502 'mean':404 'media':284 'medium':422,458 'memori':616 'merg':526,542 'mid':380 'mid-ton':379 'mobil':167,171,529,533 'mode':160,166,520,719 'moder':423,426 'mui':292,707 'multi':149,736 'multi-pag':148 'multi-sect':735 'mute':378 'n':539 'name':203 'need':42 'neutral':364,369,382 'npm':100 'object':187 'oklch':209 'one':441 'one-off':440 'output':106,112,135,175,180,181,314,487,491,580 'page':150,157,535,540,546,567,625,728 'palett':456,528,673 'pdf':515 'per':219 'pipe':113,480 'pre':574 'pre-filt':573 'primari':198,323,370,374 'primary-foreground':373 'properti':206 'prose':506 'prose-first':505 'px':337 'queri':285 'radius':86,243,388 'rare':433 'raw':570,576 'raw-color':569 'react/vue/svelte':605 'read':68,393 'readabl':140 'real':33 'refer':465,468 'rem':233,338 'remov':617 'render':607 'respons':280 'retri':637 'return':32,72,184 'review':695 'root':359 'rout':742 'run':24,53,95 'san':327 'save':134,173,179,486,488,563 'save-output':133,178,485 'scale':84,231 'scheme':524 'score':80,397 'screenshot':562,568 'scroll':622 'secondari':199 'section':190,737 'seed':306,345 'semant':350,401,408,435 'shadcn':291,353,705 'shadcn/ui':347 'shadow':13,88,253,255,344 'shape':710 'site':44,561,647,722,732 'sitemap':544 'sitemap.xml':548 'size':214 'skill' 'skill-extract-design' 'slow':549,555,646,649 'slow-load':554 'source-dembrandt' 'spa':592,600 'space':11,83,334 'spacing.commonvalues':229,336 'spacing.scaletype':235,690 'specif':446 'spoof':612 'spread':740 'standard':129 'start':448 'state':263,269,275 'stdout':479 'stripe-tokens.json':124 'stripe.com':110,120,131,144,156,163,170,177 'structur':74,182,186 'style':82,92,250,266 'system':8,76,257,332,739 'system-ui':331 'tailwind':290,308,704 'tailwind.config.js':316,318 'termin':108 'theme':321,348,726 'thousand':64 'timeout':551,652 'toke':48 'token':17,244,305,496,543,715 'tone':381 'tool':118,484 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'trace':619 'treat':462 'trigger':627 'typographi':10,81 'typography.sources':221 'typography.styles':211,330,681 'ui':333 'url':30,60 'use':22,39,552,583,648,716,727 'valu':35,210,392 'variabl':226,355 'variant':260,278,699 'viewport':168,534 'visibl':640 'w3c':15,125,494 'wait':602 'walk':61 'wall':634 'webdriv':618 'websit':21 'weight':215 'width':249 'work':302","prices":[{"id":"963c0942-14d9-42be-bb08-0976b6a8f59f","listingId":"7b095368-e582-4be3-bf99-0ee50b3acdb7","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:01.240Z"}],"sources":[{"listingId":"7b095368-e582-4be3-bf99-0ee50b3acdb7","source":"github","sourceId":"dembrandt/dembrandt-skills/extract-design","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/extract-design","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:01.240Z","lastSeenAt":"2026-05-18T19:08:26.806Z"}],"details":{"listingId":"7b095368-e582-4be3-bf99-0ee50b3acdb7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"extract-design","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"b25e7333d6210275d3ffc2e5bfbc4dc8dbcf3181","skill_md_path":"skills/extract-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/extract-design"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"extract-design","description":"Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt. Runs a headless browser against the URL and returns real computed values from the DOM. Use when you need a site's actual design tokens, want to reverse-engineer a visual design, or need to seed a design system from an existing product."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/extract-design"},"updatedAt":"2026-05-18T19:08:26.806Z"}}