{"id":"6e3de605-77be-4ac1-bedb-c9f49c9a5b5e","shortId":"CFhk4g","kind":"skill","title":"generate-ui-from-brand","tagline":"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","description":"# generate-ui-from-brand\n\n**Type:** Pipeline / Orchestrator  \n**Input:** URL or existing DESIGN.md  \n**Output:** Actionable UI spec with decisions made\n\n---\n\n## Step 1 — Extract\n\n**If a URL is provided and Dembrandt MCP is available:**\n```\nget_design_tokens(url)\nget_color_palette(url)\nget_typography(url)\nget_component_styles(url)\nget_spacing(url)\n```\n\n**If Dembrandt MCP is not available, run CLI:**\n```bash\nnpx dembrandt <url> --design-md --pages 3\n```\n\n**If DESIGN.md already exists:** parse it directly — skip extraction.\n\n---\n\n## Step 2 — Normalize Tokens\n\nDo not use raw extracted values directly. Map them to a semantic system first.\n\n### Colours\nIdentify the role of each extracted colour:\n\n| Role | Token | How to identify |\n|---|---|---|\n| `color-primary` | Main brand colour | Used on primary buttons, links, key interactive elements |\n| `color-secondary` | Supporting brand colour | Used on secondary actions, accents |\n| `color-surface` | Background | Page or card background |\n| `color-surface-raised` | Elevated surface | Cards, panels, modals |\n| `color-border` | Border / divider | Input borders, separators |\n| `color-text` | Primary text | Body copy |\n| `color-text-secondary` | Secondary text | Labels, metadata, captions |\n| `color-error` | Error state | Red — do not assign to any other role |\n| `color-warning` | Warning state | Orange/amber — do not assign to any other role |\n| `color-success` | Success state | Green — do not assign to any other role |\n\n**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.\n\n### Typography\nMap 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).\n\n| Token | Min size | Role |\n|---|---|---|\n| `text-base` | 16px | Body copy — never below 16px |\n| `text-sm` | 14px | Labels, captions — use sparingly |\n| `text-lg` | 20px | Lead paragraph |\n| `text-h4` | 25px | Section subheading |\n| `text-h3` | 31px | Section heading |\n| `text-h2` | 39px | Page subheading |\n| `text-h1` | 49px | Page heading |\n| `text-display` | 61px | Hero / landing only |\n\n**Decision rule:** if extracted body text is below 16px, override to 16px.\n\n### Spacing\nIdentify the base spacing unit from the most common small margin/padding value. Derive a scale:\n\n```\nbase = extracted smallest recurring value (usually 4px or 8px)\nscale = base × 1, 2, 3, 4, 6, 8, 12, 16\n```\n\n### Border Radius\nExtract the most common radius value used on interactive elements (buttons, inputs). This becomes `--radius-button` — applied uniformly to all buttons regardless of variant.\n\n---\n\n## Step 3 — Apply UX Decisions\n\nWith normalized tokens, make the following decisions explicitly. Do not leave these open:\n\n### Visual Hierarchy\n- Identify the single primary action for the UI being built\n- Assign `color-primary` to that action only\n- All other actions use neutral or outlined styles\n- Apply `cursor: pointer` to all interactive elements\n\n### Gestalt Grouping\n- Define spacing between related elements (tight: `space-2`) and between groups (loose: `space-6` or `space-8`)\n- Confirm that related controls will be co-located in the layout\n\n### Accessibility (WCAG 2.2 AA)\nRun contrast check on normalized tokens:\n- `color-text` on `color-surface`: must be ≥ 4.5:1\n- `color-text-secondary` on `color-surface`: must be ≥ 4.5:1\n- `color-primary` on white/surface (button label): must be ≥ 4.5:1\n\nIf any fail, darken or lighten the token to meet the threshold. Document the adjustment.\n\n### Error / Status Colours\n- Confirm `color-error` is red and used only for errors\n- Confirm `color-warning` is orange/amber and used only for warnings\n- If the brand uses orange as a primary colour, it cannot double as a warning — a distinct amber must be defined for warning states\n\n---\n\n## Step 4 — Output UI Spec\n\nProduce a concrete, copy-pasteable output. Choose the format that fits the request:\n\n### Design Token File (CSS)\n```css\n:root {\n  /* Colours */\n  --color-primary:          <value>;\n  --color-secondary:        <value>;\n  --color-surface:          <value>;\n  --color-surface-raised:   <value>;\n  --color-border:           <value>;\n  --color-text:             <value>;\n  --color-text-secondary:   <value>;\n  --color-error:            <value>;\n  --color-warning:          <value>;\n  --color-success:          <value>;\n\n  /* Typography */\n  --font-sans:    <extracted font family>;\n  --text-base:    1rem;\n  --text-sm:      0.875rem;\n  --text-lg:      1.25rem;\n  --text-h4:      1.563rem;\n  --text-h3:      1.938rem;\n  --text-h2:      2.438rem;\n  --text-h1:      3.063rem;\n\n  /* Spacing */\n  --space-1:  <base>px;\n  --space-2:  <base×2>px;\n  --space-4:  <base×4>px;\n  --space-6:  <base×6>px;\n  --space-8:  <base×8>px;\n\n  /* Borders */\n  --radius-button:  <extracted>px;\n  --radius-card:    <extracted or radius-button + 2>px;\n\n  /* Elevation */\n  --shadow-card:   0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);\n  --shadow-modal:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);\n}\n```\n\n### UX Audit (if auditing an existing UI)\n```\nCONTRAST ISSUES\n  - color-text-secondary on color-surface: X.X:1 (required 4.5:1) → fix: darken to #...\n\nHIERARCHY ISSUES\n  - 3 primary buttons on same screen → reduce to 1 primary, 2 secondary\n\nCONSISTENCY ISSUES\n  - Button radius varies (4px, 8px, 12px) → standardize to --radius-button: 8px\n\nMISSING STATES\n  - No disabled state defined for inputs\n  - No error state for form fields\n\nFONT SIZE VIOLATIONS\n  - Caption text at 12px → minimum 14px\n```\n\n### Component Structure (if generating a layout)\n```\nPage layout:\n  Header (fixed, 56px)\n    Logo | Nav | [Global controls: small type]\n  \n  Main\n    Hero section\n      H1 (display scale) + lead text + primary CTA (color-primary, full)\n    \n    Feature grid (3-col)\n      Card (shadow-card, radius-card) × 3\n        Icon + H4 + body text\n    \n  Footer\n    Links (text-sm, color-text-secondary)\n    Language/currency selector (text-sm)\n\nPrimary action: CTA button in hero\nSecondary actions: nav links, card CTAs (outlined)\nError states: inline, adjacent to field, red text + icon\n```\n\n---\n\n## Audit Checklist Before Handoff\n\n- [ ] All tokens named semantically, not by value (`color-primary` not `color-blue-600`)\n- [ ] Body text ≥ 16px everywhere\n- [ ] Contrast ratios verified for all text/background combinations\n- [ ] One primary button per view\n- [ ] All buttons share `--radius-button`\n- [ ] `cursor: pointer` on all interactive elements\n- [ ] Error colour reserved exclusively for errors\n- [ ] Warning colour (orange) reserved exclusively for warnings\n- [ ] Spacing derived from a single base unit","tags":["generate","from","brand","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens"],"capabilities":["skill","source-dembrandt","skill-generate-ui-from-brand","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/generate-ui-from-brand","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 (6,744 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:27.005Z","embedding":null,"createdAt":"2026-05-18T13:14:01.620Z","updatedAt":"2026-05-18T19:08:27.005Z","lastSeenAt":"2026-05-18T19:08:27.005Z","tsv":"'-1':742 '-2':514,745 '-4':750 '-6':520,755 '-8':523,760 '0':783,787,788,789,791,795,796,797,802,806,807,808,810,814,815,816 '0.875':713 '05':817 '06':798 '08':809 '1':72,417,556,568,579,836,839,853 '1.25':318,718 '1.563':723 '1.938':728 '10':790 '10px':803 '12':423 '12px':864,891 '14px':336,893 '15px':804 '16':424 '16px':316,327,332,386,389,998 '1px':784,792 '1rem':709 '2':128,272,418,747,777,855 '2.2':538 '2.438':733 '20px':344 '25px':350 '2px':793 '3':117,419,453,845,927,936 '3.063':738 '31px':356 '39px':362 '3px':785 '4':420,645,752 '4.5':555,567,578,838 '49px':368 '4px':412,811,862 '56px':904 '6':421,757 '600':995 '61px':374 '6px':812 '8':422,762 '8px':414,863,870 'aa':539 'accent':182 'access':536 'action':38,65,181,476,488,492,956,962 'adjac':971 'adjust':594 'alreadi':20,120 'amber':637 'appli':32,444,454,498 'assign':232,245,258,482 'audit':819,821,977 'avail':83,107 'background':186,190 'base':315,326,393,406,416,708,746,751,756,761,1042 'bash':110 'becom':440 'blue':994 'bodi':213,328,382,939,996 'border':202,203,206,425,685,764 'brand':5,48,55,162,176,273,622 'build':43 'built':481 'button':167,437,443,448,574,767,776,847,859,869,958,1009,1013,1017 'cannot':630 'caption':223,338,888 'card':189,197,771,782,929,932,935,965 'check':542 'checklist':978 'choos':656 'cli':109 'co':531 'co-loc':530 'coher':298 'col':928 'color':89,159,173,184,192,201,209,216,225,238,251,278,484,547,551,558,563,570,600,611,671,674,677,680,684,687,690,694,697,700,828,833,922,947,989,993 'color-blu':992 'color-bord':200,683 'color-error':224,599,693 'color-primari':158,277,483,569,670,921,988 'color-secondari':172,673 'color-success':250,699 'color-surfac':183,550,562,676,832 'color-surface-rais':191,679 'color-text':208,546,686 'color-text-secondari':215,557,689,827,946 'color-warn':237,610,696 'colour':145,152,163,177,274,597,628,669,1025,1031 'combin':1006 'common':399,430 'compet':275 'compon':96,894 'concret':15,651 'confirm':524,598,609 'consist':305,857 'contrast':541,825,1000 'control':527,908 'copi':214,329,653 'copy-past':652 'css':666,667 'cta':920,957 'ctas':966 'cursor':499,1018 'darken':583,841 'decis':19,69,263,378,456,463 'defin':507,640,876 'dembrandt':80,103,112 'deriv':403,1038 'design':24,85,114,663 'design-md':113 'design.md':12,63,119 'direct':124,137 'disabl':874 'display':373,915 'distinct':636 'divid':204 'document':592 'doubl':631 'element':171,288,436,504,511,1023 'elev':195,779 'error':226,227,595,601,608,695,880,968,1024,1029 'everywher':999 'exclus':1027,1034 'exist':47,62,121,823 'explicit':464 'extract':22,73,126,135,151,267,291,381,407,427,772 'fail':582 'featur':925 'field':884,973 'file':665 'first':144 'fit':660 'fix':840,903 'follow':303,462 'font':704,885 'font-san':703 'footer':941 'form':883 'format':658 'full':924 'generat':2,52,897 'generate-ui-from-brand':1,51 'gestalt':505 'get':84,88,92,95,99 'global':907 'green':255 'grid':926 'group':506,517 'h1':367,737,914 'h2':361,732 'h3':355,727 'h4':349,722,938 'handoff':980 'head':358,370 'header':902 'hero':375,912,960 'hierarchi':471,843 'highest':284 'icon':937,976 'identifi':146,157,391,472 'inlin':970 'input':59,205,438,878 'interact':170,287,435,503,1022 'issu':826,844,858 'key':169 'label':221,337,575 'land':376 'language/currency':950 'layout':535,899,901 'lead':345,917 'leav':467 'lg':343,717 'lighten':585 'link':168,942,964 'live':23 'locat':532 'logo':905 'loos':518 'made':21,70 'main':161,911 'make':460 'map':138,290 'margin/padding':401 'mcp':81,104 'md':115 'meet':589 'metadata':222 'min':321 'minimum':892 'miss':871 'modal':199,801 'modular':312 'must':553,565,576,638 'name':983 'nav':906,963 'nearest':311 'neutral':494 'never':330 'normal':26,129,458,544 'npx':111 'one':282,1007 'open':469 'orang':624,1032 'orange/amber':242,614 'orchestr':58 'outlin':496,967 'output':36,64,646,655 'overrid':387 'page':116,187,363,369,900 'palett':90,268 'panel':198 'paragraph':346 'pars':122 'pasteabl':654 'per':1010 'pick':280 'pipelin':6,57 'pointer':500,1019 'primari':160,166,211,279,475,485,571,627,672,846,854,919,923,955,990,1008 'principl':34 'produc':649 'provid':78 'px':743,748,753,758,763,768,778 'radius':426,431,442,766,770,775,860,868,934,1016 'radius-button':441,765,774,867,1015 'radius-card':769,933 'rais':194,682 'ratio':297,306,317,1001 'raw':134 'recommend':319 'recur':409 'red':229,603,974 'reduc':851 'regardless':449 'relat':510,526 'rem':714,719,724,729,734,739 'request':662 'requir':837 'reserv':1026,1033 'rgba':786,794,805,813 'role':148,153,236,249,262,323 'root':668 'round':307 'rule':264,379 'run':108,540 'san':705 'scale':295,313,405,415,916 'scrat':50 'screen':850 'secondari':174,180,218,219,560,675,692,830,856,949,961 'section':351,357,913 'selector':951 'semant':30,142,984 'separ':207 'shadow':781,800,931 'shadow-card':780,930 'shadow-mod':799 'share':1014 'singl':474,1041 'size':292,300,322,886 'skill':7 'skill-generate-ui-from-brand' 'skip':125 'sm':335,712,945,954 'small':400,909 'smallest':408 'source-dembrandt' 'space':100,390,394,508,513,519,522,740,741,744,749,754,759,1037 'spare':340 'spec':40,67,648 'standard':865 'state':228,241,254,643,872,875,881,969 'status':596 'step':71,127,314,452,644 'structur':17,895 'style':97,497 'subhead':352,364 'success':252,253,701 'support':175 'surfac':185,193,196,552,564,678,681,834 'system':31,143 'text':210,212,217,220,325,334,342,348,354,360,366,372,383,548,559,688,691,707,711,716,721,726,731,736,829,889,918,940,944,948,953,975,997 'text-bas':324,706 'text-display':371 'text-h1':365,735 'text-h2':359,730 'text-h3':353,725 'text-h4':347,720 'text-lg':341,715 'text-sm':333,710,943,952 'text/background':1005 'threshold':591 'tight':512 'token':25,86,130,154,320,459,545,587,664,982 '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' 'turn':8 'type':56,910 'typographi':93,289,702 'ui':3,16,39,44,53,66,479,647,824 'uniform':445 'unit':395,1043 'url':10,60,76,87,91,94,98,101 'usag':285 'use':41,133,164,178,339,433,493,605,616,623 'usual':411 'ux':33,455,818 'valu':136,402,410,432,987 'vari':861 'variant':451 'verifi':296,1002 'view':1011 'violat':887 'visual':470 'warn':239,240,612,619,634,642,698,1030,1036 'wcag':537 'white/surface':573 'x.x':835","prices":[{"id":"7c45b974-e67a-48a2-a9d9-f0e3a0827dd4","listingId":"6e3de605-77be-4ac1-bedb-c9f49c9a5b5e","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.620Z"}],"sources":[{"listingId":"6e3de605-77be-4ac1-bedb-c9f49c9a5b5e","source":"github","sourceId":"dembrandt/dembrandt-skills/generate-ui-from-brand","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/generate-ui-from-brand","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:01.620Z","lastSeenAt":"2026-05-18T19:08:27.005Z"}],"details":{"listingId":"6e3de605-77be-4ac1-bedb-c9f49c9a5b5e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"generate-ui-from-brand","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":"b63c96dedc09fe965eeebb5ced939fdc56f6115a","skill_md_path":"skills/generate-ui-from-brand/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/generate-ui-from-brand"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"generate-ui-from-brand","description":"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 scratch, auditing a design system, or refactoring visual inconsistency."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/generate-ui-from-brand"},"updatedAt":"2026-05-18T19:08:27.005Z"}}