dembrandt — UX Pipeline Orchestrator
Concept by @VictorGjn.
Routes multi-concern UI/UX tasks through six ordered stages. Each stage loads sub-skills on demand — only what the task actually needs.
When to use this skill vs a sub-skill directly:
- Multi-concern task ("design review", "audit interface", "build UI") → use this orchestrator
- Single-concern task ("check my colour palette", "review button states") → go directly to the sub-skill
- Brand-to-token-to-spec pipeline with a URL or DESIGN.md → use
generate-ui-from-brand instead
Pipeline
Stage 1 — Brand Foundation
Establish the visual language before making any token decisions.
Sub-skills (load as needed):
brand-visual-language — shape language, icon style, typography tonealgorithmic-color-palette — derive states and brand-tinted greys from brand colourscolor-mode-and-theme — light vs dark vs combined, when to offer a theme selector
Gate: Brand tone and colour system agreed before proceeding.
Stage 2 — Design Tokens & Scales
Pin the numeric system so all components share a common foundation.
Sub-skills (load as needed):
modular-scale-typography — ratio-based type scales, minimum sizes, context-aware usageelevation-and-depth — shadow scale, border-radius, card and modal patternsbutton-states — six states: rest, hover, active, focus, disabled, loadingcomponent-family-consistency — buttons, inputs, pills: shared radius, colour, heightstatus-colors-and-errors — minimal semantic colours, error recovery, prevention
Gate: Tokens defined and consistent across component family.
Stage 3 — Layout & Structure
Apply layout decisions to the specific product context.
Sub-skills (load as needed):
gestalt-ui-organisation — group related controls: proximity, similarity, common regionvisual-emphasis-and-hierarchy — one CTA per view, colour and size as emphasisinformation-architecture — naming, mental models, data UI, confirm dialogsui-context-and-scope — hierarchy, breadcrumbs, colour regions, scope communicationresponsive-paradigms — mobile/tablet/desktop: nav, sections, sticky behaviourui-density — match density to platform and user typesticky-and-fixed-elements — headers, bottom toolbars, z-index tokensscroll-areas — avoid inner scroll, one axis only, user-controlled
Gate: Layout is coherent across breakpoints and user contexts.
Stage 4 — Components & Interaction
Review component patterns and interactive states.
Sub-skills (load as needed):
real-world-metaphors — cards, carousels, drawers: when to use and howform-design — helper text, placeholder, validation, submit statedata-display-and-selection — grid/list/table, large hit areas, mass actionsglobal-toolbar-controls — currency, language, locale: placement and typographynotifications-and-recovery — toasts, banners, retry, undo — always a path forward
Gate: All interactive states handled; no dead ends.
Stage 5 — UX Polish
Apply UX principles and motion to sharpen perceived quality.
Sub-skills (load as needed):
nielsen-usability-heuristics — 10 usability principles with review checklistsuser-flows-and-guided-paths — wizards, purchase flows, onboarding sequencesmicro-interactions — animated icons, toggles, reveals, celebrationsloading-states-and-perceived-performance — spinners, skeleton screens, staggered entrymotion-and-storytelling — Disney principles and cinematic language in UI
Gate: Flow is legible end-to-end; perceived performance is acceptable.
Stage 6 — Accessibility & Technical Gate
Hard ship gate. Do not skip or defer.
Sub-skills (load as needed):
wcag-accessibility — WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIAsemantic-html-and-seo — HTML5, alt texts, Open Graph, progressive enhancementperformance-and-web-vitals — Lighthouse audit, LCP, CLS, INP, images, fonts, JS loading
Gate: Passes WCAG 2.2 AA. Required by EU Accessibility Act (EAA) for products launched after June 2025.
Relationship to generate-ui-from-brand
generate-ui-from-brand is a token-extraction pipeline: URL or DESIGN.md → tokens → UI spec. It overlaps stages 1–2 of this orchestrator. Use it when you have a brand source and need a concrete spec. Use this orchestrator when you are reviewing or building across the full stack of UX concerns without a specific brand-extraction starting point.
1---2name: dembrandt3description: Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout → components → UX polish → accessibility gate — loading the right sub-skill at each stage. Use when the task spans multiple design concerns: "design review", "build UI", "audit interface", "from brand to UI". For single-concern tasks (e.g. "review my colour palette") go directly to the relevant sub-skill instead.4---5
6# dembrandt — UX Pipeline Orchestrator
7
8> Concept by [@VictorGjn](https://github.com/VictorGjn).
9
10Routes multi-concern UI/UX tasks through six ordered stages. Each stage loads sub-skills on demand — only what the task actually needs.
11
12**When to use this skill vs a sub-skill directly:**
13
14- Multi-concern task ("design review", "audit interface", "build UI") → use this orchestrator
15- Single-concern task ("check my colour palette", "review button states") → go directly to the sub-skill
16- Brand-to-token-to-spec pipeline with a URL or DESIGN.md → use `generate-ui-from-brand` instead
17
18---
19
20## Pipeline
21
22### Stage 1 — Brand Foundation
23
24Establish the visual language before making any token decisions.
25
26Sub-skills (load as needed):
27- `brand-visual-language` — shape language, icon style, typography tone
28- `algorithmic-color-palette` — derive states and brand-tinted greys from brand colours
29- `color-mode-and-theme` — light vs dark vs combined, when to offer a theme selector
30
31**Gate:** Brand tone and colour system agreed before proceeding.
32
33---
34
35### Stage 2 — Design Tokens & Scales
36
37Pin the numeric system so all components share a common foundation.
38
39Sub-skills (load as needed):
40- `modular-scale-typography` — ratio-based type scales, minimum sizes, context-aware usage
41- `elevation-and-depth` — shadow scale, border-radius, card and modal patterns
42- `button-states` — six states: rest, hover, active, focus, disabled, loading
43- `component-family-consistency` — buttons, inputs, pills: shared radius, colour, height
44- `status-colors-and-errors` — minimal semantic colours, error recovery, prevention
45
46**Gate:** Tokens defined and consistent across component family.
47
48---
49
50### Stage 3 — Layout & Structure
51
52Apply layout decisions to the specific product context.
53
54Sub-skills (load as needed):
55- `gestalt-ui-organisation` — group related controls: proximity, similarity, common region
56- `visual-emphasis-and-hierarchy` — one CTA per view, colour and size as emphasis
57- `information-architecture` — naming, mental models, data UI, confirm dialogs
58- `ui-context-and-scope` — hierarchy, breadcrumbs, colour regions, scope communication
59- `responsive-paradigms` — mobile/tablet/desktop: nav, sections, sticky behaviour
60- `ui-density` — match density to platform and user type
61- `sticky-and-fixed-elements` — headers, bottom toolbars, z-index tokens
62- `scroll-areas` — avoid inner scroll, one axis only, user-controlled
63
64**Gate:** Layout is coherent across breakpoints and user contexts.
65
66---
67
68### Stage 4 — Components & Interaction
69
70Review component patterns and interactive states.
71
72Sub-skills (load as needed):
73- `real-world-metaphors` — cards, carousels, drawers: when to use and how
74- `form-design` — helper text, placeholder, validation, submit state
75- `data-display-and-selection` — grid/list/table, large hit areas, mass actions
76- `global-toolbar-controls` — currency, language, locale: placement and typography
77- `notifications-and-recovery` — toasts, banners, retry, undo — always a path forward
78
79**Gate:** All interactive states handled; no dead ends.
80
81---
82
83### Stage 5 — UX Polish
84
85Apply UX principles and motion to sharpen perceived quality.
86
87Sub-skills (load as needed):
88- `nielsen-usability-heuristics` — 10 usability principles with review checklists
89- `user-flows-and-guided-paths` — wizards, purchase flows, onboarding sequences
90- `micro-interactions` — animated icons, toggles, reveals, celebrations
91- `loading-states-and-perceived-performance` — spinners, skeleton screens, staggered entry
92- `motion-and-storytelling` — Disney principles and cinematic language in UI
93
94**Gate:** Flow is legible end-to-end; perceived performance is acceptable.
95
96---
97
98### Stage 6 — Accessibility & Technical Gate
99
100Hard ship gate. Do not skip or defer.
101
102Sub-skills (load as needed):
103- `wcag-accessibility` — WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIA
104- `semantic-html-and-seo` — HTML5, alt texts, Open Graph, progressive enhancement
105- `performance-and-web-vitals` — Lighthouse audit, LCP, CLS, INP, images, fonts, JS loading
106
107**Gate:** Passes WCAG 2.2 AA. Required by EU Accessibility Act (EAA) for products launched after June 2025.
108
109---
110
111## Relationship to `generate-ui-from-brand`
112
113`generate-ui-from-brand` is a token-extraction pipeline: URL or DESIGN.md → tokens → UI spec. It overlaps stages 1–2 of this orchestrator. Use it when you have a brand source and need a concrete spec. Use this orchestrator when you are reviewing or building across the full stack of UX concerns without a specific brand-extraction starting point.
majiayu000