generate-ui-from-brand

Name: generate-ui-from-brand
Author: dembrandt

274installs5forks

How to install generate-ui-from-brand?

dembrandt/dembrandt-skills/generate-ui-from-brand

$npx -y skills add dembrandt/dembrandt-skills --skill generate-ui-from-brand

Installs into the current project.

Summary

Pipeline skill — turns a URL or DESIGN.md into a concrete UI structure with decisions already made. Extracts live design tokens, normalizes them into a semantic system, applies UX principles, and outputs an actionable UI spec. Use when building UI for an existing brand from scrat

Files · 1

View on GitHub

SKILL.md

1	# generate-ui-from-brand
2
3	Type: Pipeline / Orchestrator
4	Input: URL or existing DESIGN.md
5	Output: Actionable UI spec with decisions made
6
7	---
8
9	## Step 1 — Extract
10
11	If a URL is provided and Dembrandt MCP is available:
12
13	All MCP extraction tools are async — they return a `job_id` immediately. Poll `get_job_status` until `status` is `"completed"`, then read `result`.
14
15	```
16	{ job_id } = get_design_tokens({ url })
17	{ result } = get_job_status({ job_id }) // repeat until status === "completed"
18	```
19
20	Run these in sequence (each extraction launches a browser):
21	```
22	get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing
23	```
24
25	If Dembrandt MCP is not available, run CLI:
26	```bash
27	npx dembrandt <url> --design-md --crawl 3
28	```
29
30	If DESIGN.md already exists: parse it directly — skip extraction.
31
32	---
33
34	## Step 2 — Normalize Tokens
35
36	Do not use raw extracted values directly. Map them to a semantic system first.
37
38	### Colours
39	Identify the role of each extracted colour:
40
41	\| Role \| Token \| How to identify \|
42	\|---\|---\|---\|
43	\| `color-primary` \| Main brand colour \| Used on primary buttons, links, key interactive elements \|
44	\| `color-secondary` \| Supporting brand colour \| Used on secondary actions, accents \|
45	\| `color-surface` \| Background \| Page or card background \|
46	\| `color-surface-raised` \| Elevated surface \| Cards, panels, modals \|
47	\| `color-border` \| Border / divider \| Input borders, separators \|
48	\| `color-text` \| Primary text \| Body copy \|
49	\| `color-text-secondary` \| Secondary text \| Labels, metadata, captions \|
50	\| `color-error` \| Error state \| Red — do not assign to any other role \|
51	\| `color-warning` \| Warning state \| Orange/amber — do not assign to any other role \|
52	\| `color-success` \| Success state \| Green — do not assign to any other role \|
53
54	Decision rule: if the extracted palette has more than 2 brand colours competing for `color-primary`, pick the one with highest usage on interactive elements.
55
56	### Typography
57	Map extracted sizes to a scale. Verify ratio coherence — if sizes do not follow a consistent ratio, round them to the nearest modular scale step (base 16px, ratio 1.25 recommended).
58
59	\| Token \| Min size \| Role \|
60	\|---\|---\|---\|
61	\| `text-base` \| 16px \| Body copy — never below 16px \|
62	\| `text-sm` \| 14px \| Labels, captions — use sparingly \|
63	\| `text-lg` \| 20px \| Lead paragraph \|
64	\| `text-h4` \| 25px \| Section subheading \|
65	\| `text-h3` \| 31px \| Section heading \|
66	\| `text-h2` \| 39px \| Page subheading \|
67	\| `text-h1` \| 49px \| Page heading \|
68	\| `text-display` \| 61px \| Hero / landing only \|
69
70	Decision rule: if extracted body text is below 16px, override to 16px.
71
72	### Spacing
73	Identify the base spacing unit from the most common small margin/padding value. Derive a scale:
74
75	```
76	base = extracted smallest recurring value (usually 4px or 8px)
77	scale = base × 1, 2, 3, 4, 6, 8, 12, 16
78	```
79
80	### Border Radius
81	Extract the most common radius value used on interactive elements (buttons, inputs). This becomes `--radius-button` — applied uniformly to all buttons

People who liked this also viewed

6 picks

Type

generate-ui-from-brand

274installs5forks

View on GitHub

How to install generate-ui-from-brand?

dembrandt/dembrandt-skills/generate-ui-from-brand

$npx -y skills add dembrandt/dembrandt-skills --skill generate-ui-from-brand

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# generate-ui-from-brand
2
3	Type: Pipeline / Orchestrator
4	Input: URL or existing DESIGN.md
5	Output: Actionable UI spec with decisions made
6
7	---
8
9	## Step 1 — Extract
10
11	If a URL is provided and Dembrandt MCP is available:
12
13	All MCP extraction tools are async — they return a `job_id` immediately. Poll `get_job_status` until `status` is `"completed"`, then read `result`.
14
15	```
16	{ job_id } = get_design_tokens({ url })
17	{ result } = get_job_status({ job_id }) // repeat until status === "completed"
18	```
19
20	Run these in sequence (each extraction launches a browser):
21	```
22	get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing
23	```
24
25	If Dembrandt MCP is not available, run CLI:
26	```bash
27	npx dembrandt <url> --design-md --crawl 3
28	```
29
30	If DESIGN.md already exists: parse it directly — skip extraction.
31
32	---
33
34	## Step 2 — Normalize Tokens
35
36	Do not use raw extracted values directly. Map them to a semantic system first.
37
38	### Colours
39	Identify the role of each extracted colour:
40
41	\| Role \| Token \| How to identify \|
42	\|---\|---\|---\|
43	\| `color-primary` \| Main brand colour \| Used on primary buttons, links, key interactive elements \|
44	\| `color-secondary` \| Supporting brand colour \| Used on secondary actions, accents \|
45	\| `color-surface` \| Background \| Page or card background \|
46	\| `color-surface-raised` \| Elevated surface \| Cards, panels, modals \|
47	\| `color-border` \| Border / divider \| Input borders, separators \|
48	\| `color-text` \| Primary text \| Body copy \|
49	\| `color-text-secondary` \| Secondary text \| Labels, metadata, captions \|
50	\| `color-error` \| Error state \| Red — do not assign to any other role \|
51	\| `color-warning` \| Warning state \| Orange/amber — do not assign to any other role \|
52	\| `color-success` \| Success state \| Green — do not assign to any other role \|
53
54	Decision rule: if the extracted palette has more than 2 brand colours competing for `color-primary`, pick the one with highest usage on interactive elements.
55
56	### Typography
57	Map extracted sizes to a scale. Verify ratio coherence — if sizes do not follow a consistent ratio, round them to the nearest modular scale step (base 16px, ratio 1.25 recommended).
58
59	\| Token \| Min size \| Role \|
60	\|---\|---\|---\|
61	\| `text-base` \| 16px \| Body copy — never below 16px \|
62	\| `text-sm` \| 14px \| Labels, captions — use sparingly \|
63	\| `text-lg` \| 20px \| Lead paragraph \|
64	\| `text-h4` \| 25px \| Section subheading \|
65	\| `text-h3` \| 31px \| Section heading \|
66	\| `text-h2` \| 39px \| Page subheading \|
67	\| `text-h1` \| 49px \| Page heading \|
68	\| `text-display` \| 61px \| Hero / landing only \|
69
70	Decision rule: if extracted body text is below 16px, override to 16px.
71
72	### Spacing
73	Identify the base spacing unit from the most common small margin/padding value. Derive a scale:
74
75	```
76	base = extracted smallest recurring value (usually 4px or 8px)
77	scale = base × 1, 2, 3, 4, 6, 8, 12, 16
78	```
79
80	### Border Radius
81	Extract the most common radius value used on interactive elements (buttons, inputs). This becomes `--radius-button` — applied uniformly to all buttons

People who liked this also viewed

6 picks

Type