extract-design

Name: extract-design
Author: dembrandt

27stars5forks

How to install extract-design?

dembrandt/dembrandt-skills/extract-design

$npx -y skills add dembrandt/dembrandt-skills --skill extract-design

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Extract Design — Dembrandt
2
3	Dembrandt 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.
4
5	## How to Run
6
7	```bash
8	# Zero-install — npx fetches the package on first run (lowest friction)
9	npx -y dembrandt https://stripe.com
10
11	# Or install once (global), then call `dembrandt` directly
12	npm i -g dembrandt
13
14	# Basic extraction — outputs to terminal
15	dembrandt https://stripe.com
16
17	# JSON output — pipe into files or other tools
18	dembrandt https://stripe.com --json-only > stripe-tokens.json
19
20	# W3C DTCG format (design-tokens.org standard)
21	dembrandt https://stripe.com --dtcg --save-output
22
23	# Generate DESIGN.md (human + AI readable brand doc)
24	dembrandt https://stripe.com --design-md
25
26	# Multi-page crawl (follows internal links)
27	dembrandt https://stripe.com --crawl 5
28
29	# Dark mode colors
30	dembrandt https://stripe.com --dark-mode
31
32	# Mobile viewport
33	dembrandt https://stripe.com --mobile
34
35	# Everything saved to output/
36	dembrandt https://stripe.com --save-output
37
38	# Self-contained HTML report — open offline or attach as a CI artifact [dembrandt 0.19+]
39	dembrandt https://stripe.com --html report.html
40
41	# Drift gate — compare against a saved baseline; exits 1 on drift [dembrandt 0.19+]
42	dembrandt https://app.example.com --compare baseline.json --html report.html
43	```
44
45	## MCP Usage (async by default)
46
47	To expose Dembrandt as MCP tools, add this server to the agent's MCP config (no install — `npx` fetches it on first run):
48
49	```json
50	{ "mcpServers": { "dembrandt": { "command": "npx", "args": ["-y", "--package", "dembrandt", "dembrandt-mcp"] } } }
51	```
52
53	When using the Dembrandt MCP server, all extraction tools return a `job_id` immediately rather than blocking. Poll `get_job_status` until `status` is `"completed"`:
54
55	```
56	1. get_design_tokens({ url: "stripe.com" })
57	→ { job_id: "job_123_abc", status: "queued" }
58
59	2. get_job_status({ job_id: "job_123_abc" })
60	→ { status: "running" } // poll again
61
62	3. get_job_status({ job_id: "job_123_abc" })
63	→ { status: "completed", result: { ... } }
64	```
65
66	Pass `sync: true` to any extraction tool to block and return the result directly (useful on fast networks, risks timeout on slow sites).
67
68	Extraction tools: `get_design_tokens` (everything), `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`. All accept `slow`, `mobile` (mobile viewport), and `cookie` (cookie string for authenticated pages); `get_design_tokens` and `get_color_palette` also accept `darkMode` and `wcag` (contrast analysis). [dembrandt 0.23.1+ for mobile/cookie/wcag]
69
70	Pure tools (no browser, synchronous, take an extraction object): `compute_drift` (0-100 drift score between two extractions), `get_findings` (design-system lint: contrast, consistency, duplication), `export_dtcg` (W3C Design Tokens format), `generate_design_md` (DESIGN.md brand guide), `render_report` (self-contained HTML report). Job control: `get_job_status`

People who liked this also viewed

6 picks

Type

extract-design

27stars5forks

View on GitHub

How to install extract-design?

dembrandt/dembrandt-skills/extract-design

$npx -y skills add dembrandt/dembrandt-skills --skill extract-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Extract Design — Dembrandt
2
3	Dembrandt 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.
4
5	## How to Run
6
7	```bash
8	# Zero-install — npx fetches the package on first run (lowest friction)
9	npx -y dembrandt https://stripe.com
10
11	# Or install once (global), then call `dembrandt` directly
12	npm i -g dembrandt
13
14	# Basic extraction — outputs to terminal
15	dembrandt https://stripe.com
16
17	# JSON output — pipe into files or other tools
18	dembrandt https://stripe.com --json-only > stripe-tokens.json
19
20	# W3C DTCG format (design-tokens.org standard)
21	dembrandt https://stripe.com --dtcg --save-output
22
23	# Generate DESIGN.md (human + AI readable brand doc)
24	dembrandt https://stripe.com --design-md
25
26	# Multi-page crawl (follows internal links)
27	dembrandt https://stripe.com --crawl 5
28
29	# Dark mode colors
30	dembrandt https://stripe.com --dark-mode
31
32	# Mobile viewport
33	dembrandt https://stripe.com --mobile
34
35	# Everything saved to output/
36	dembrandt https://stripe.com --save-output
37
38	# Self-contained HTML report — open offline or attach as a CI artifact [dembrandt 0.19+]
39	dembrandt https://stripe.com --html report.html
40
41	# Drift gate — compare against a saved baseline; exits 1 on drift [dembrandt 0.19+]
42	dembrandt https://app.example.com --compare baseline.json --html report.html
43	```
44
45	## MCP Usage (async by default)
46
47	To expose Dembrandt as MCP tools, add this server to the agent's MCP config (no install — `npx` fetches it on first run):
48
49	```json
50	{ "mcpServers": { "dembrandt": { "command": "npx", "args": ["-y", "--package", "dembrandt", "dembrandt-mcp"] } } }
51	```
52
53	When using the Dembrandt MCP server, all extraction tools return a `job_id` immediately rather than blocking. Poll `get_job_status` until `status` is `"completed"`:
54
55	```
56	1. get_design_tokens({ url: "stripe.com" })
57	→ { job_id: "job_123_abc", status: "queued" }
58
59	2. get_job_status({ job_id: "job_123_abc" })
60	→ { status: "running" } // poll again
61
62	3. get_job_status({ job_id: "job_123_abc" })
63	→ { status: "completed", result: { ... } }
64	```
65
66	Pass `sync: true` to any extraction tool to block and return the result directly (useful on fast networks, risks timeout on slow sites).
67
68	Extraction tools: `get_design_tokens` (everything), `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`. All accept `slow`, `mobile` (mobile viewport), and `cookie` (cookie string for authenticated pages); `get_design_tokens` and `get_color_palette` also accept `darkMode` and `wcag` (contrast analysis). [dembrandt 0.23.1+ for mobile/cookie/wcag]
69
70	Pure tools (no browser, synchronous, take an extraction object): `compute_drift` (0-100 drift score between two extractions), `get_findings` (design-system lint: contrast, consistency, duplication), `export_dtcg` (W3C Design Tokens format), `generate_design_md` (DESIGN.md brand guide), `render_report` (self-contained HTML report). Job control: `get_job_status`

People who liked this also viewed

6 picks

Type