What is the extract-design skill?
extract-design is a skill in the dembrandt-skills collection. It tells an agent how to run Dembrandt, a headless Chromium extractor, through its CLI or MCP server. A site's computed CSS becomes colors with confidence scores, type styles, spacing, shadows, component states and W3C design tokens.
The extract-design skill points your agent at Dembrandt, which runs headless Chromium against a URL, walks up to thousands of DOM elements and reads computed CSS. The result is a structured design system with colors scored for confidence.
It is a front end for a separate engine. The skill holds the instructions and declares dembrandt 0.38.0 or newer in its metadata, so the Dembrandt CLI or MCP server has to be available before any real tokens come back.
CLI flags and MCP tools
- Zero install:
npx -y dembrandt <url>fetches the package on first run. Add--json-onlyfor JSON,--dtcgfor W3C tokens,--design-mdfor a brand document and--crawl 5to follow internal links. - Variants:
--dark-modeand--mobilecapture those modes,--tailwindwrites a Tailwind v4 theme block and--htmlwrites a self-contained report. - Drift gate:
--comparechecks a site against a saved baseline and exits 1 when it has drifted.
Over MCP every extraction tool returns a job_id at once, and you poll get_job_status until it reads completed. Pass sync true to block instead. Extraction tools include get_design_tokens, get_color_palette, get_typography, get_spacing and get_motion.
What the extraction returns
- A deduplicated color palette with high, medium or low confidence, each entry carrying hex, LCH and OKLCH values.
- Typography styles per context with element counts, plus font source detection and fluid size ramps built from clamp.
- Spacing values and a scale verdict of 4px, 8px or custom, then border radius, borders and shadows.
- Button, input, link and badge variants with hover and focus states, plus breakpoints, detected frameworks and icon system.
Who extract-design is for
Best for
- Seeding a new design system from an existing product, or reading a competitor's real colors, fonts and spacing from its URL.
- Generating a Tailwind v4 theme or a shadcn theme from observed values. A related skill for Tailwind work is tailwind-design-system.
- Teams that want a pull request gate that fails when a live site drifts away from saved tokens.
Not for
- Running without the engine. The skill carries instructions, not an extractor, so with no Dembrandt CLI or MCP server nothing gets extracted.
- Judging whether a palette is good. It reports what a site does, not what it should do. For that, try better-colors.
- Docker and most CI containers, unless you set noSandbox. Without it the browser launch fails.
Use it with UiChemy
The tokens this skill reads describe a look, not a WordPress theme. Use them as the brief for an AI build, then import that build with UiChemy AI to WordPress and refine it in Composer. Click Get Started on uichemy.com.
How to install Extract Design Skill: Real Tokens From Any Live Site
git clone https://github.com/dembrandt/dembrandt-skills.gitdembrandt --version.Clone the repository
Run
git clone https://github.com/dembrandt/dembrandt-skills.git. The skill lives in the skills/extract-design folder, next to many other skills.Copy the skill folder
Copy skills/extract-design into the folder your agent loads skills from. The README says the collection works with any agent that reads the Open Agent Skills format.
Add the Dembrandt engine
Add an mcpServers entry named dembrandt with command npx and args -y, --package, dembrandt, dembrandt-mcp. Or skip MCP and let the agent run
npx -y dembrandt <url>.Ask for a site
Try extract the design system from a URL, what colors and fonts does a site use, or get the tailwind config for this site.
Check that it loaded
Ask for the design system of any public URL. The agent should run Dembrandt and report a palette with confidence levels, type styles and a spacing scale. Over MCP, expect a job_id first.
Key features
- Tokens from a live URLDembrandt reads computed CSS from the rendered page, so you get the values a site actually ships and not a guess from a screenshot.
- Confidence scored colorsPalette entries are scored high, medium or low and carry derived roles. A separate detected list keeps every color that passed the alpha gate, near duplicates included.
- W3C DTCG exportThe --dtcg flag and the export_dtcg tool write design tokens in the W3C format, and validate_dtcg checks a document against the 2025.10 spec.
- Tailwind and shadcn outputA Tailwind v4 theme block with observed values only, and a shadcn theme where slots stay at shadcn defaults if the page supplied nothing.
- Multi page crawlExtract up to 20 pages and merge them into one token set, from DOM links or sitemap.xml. A page that fails to load is dropped without failing the crawl.
- Dark mode and mobileCapture dark mode colors and a mobile viewport. The MCP tools also accept a cookie string for authenticated pages and a custom header.
- Drift detectioncompute_drift scores two extractions from 0 to 100, and the CLI compare flag turns a saved baseline into a gate that exits 1 on drift.
- Design system lintget_findings checks an extraction for contrast, consistency and duplication problems before you adopt the tokens.
- Brand guide and reportgenerate_design_md writes a DESIGN.md brand document and render_report builds a self-contained HTML report you can open offline or attach in CI.
- Robots awarenesscheck_robots asks whether robots.txt allows a URL before a browser run. The check is advisory by default and can be made to skip disallowed targets.
Frequently asked questions
What is the extract-design skill?
It is one skill in the dembrandt-skills repository. It tells an agent to run Dembrandt against a live website and return the site's colors, typography, spacing, components and W3C design tokens. Use it when you need a real site's tokens or want to seed a design system from one.
How do I install extract-design?
Clone dembrandt/dembrandt-skills and copy skills/extract-design into your agent's skills folder. Then give the agent the Dembrandt engine, either as an MCP server entry using npx or by letting it run the CLI. The skill alone does not extract anything.
Does it need the Dembrandt engine?
Yes. The README says the skill needs the engine, which is a separate open source project at dembrandt.com. The SKILL.md metadata asks for dembrandt 0.38.0 or newer, and a missing engine means no tokens, only instructions.
What does an agent need to run it?
An agent that can load skills and either run shell commands or call MCP tools. The CLI route needs npx to fetch the package, and the MCP route needs the server entry in the agent's config. Both drive a headless Chromium browser.
Can it produce Tailwind or shadcn themes?
Yes. The CLI writes a Tailwind v4 theme block from observed values, and the MCP server has export_tailwind and export_shadcn tools. For a skill built around component libraries, see shadcn-improve.
Is it safe to run against any website?
The engine can check robots.txt before a run through the check_robots tool. By default the check only warns, and setting DEMBRANDT_ENFORCE_ROBOTS to 1 makes it skip disallowed targets with exit code 4. You are still responsible for how you use another site's design. A related tokens tool is stylekit-mcp.
What license does extract-design use?
The dembrandt-skills repository is MIT licensed, and the Dembrandt engine is described in the README as free and open source. The skill's SKILL.md also lists priority and path patterns that help your agent decide when to load it.