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-brandinstead - Reproducing an existing page rather than designing one → use
clone-websiteinstead
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, heightsizing-units— px vs rem vs relative: which values move when the user enlarges textstatus-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):
layout-paradigms-and-consistency— choose the layout paradigm that fits the content; reuse the same page skeleton across screens (macro-scale consistency)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 howtab-navigation— tab types, overflow, keyboard nav, ARIA, state persistencemodal-and-overlay-patterns— tooltip/popover/drawer/modal hierarchy, focus management, destructive confirmform-design— helper text, placeholder, validation, submit statedata-display-and-selection— grid/list/table, large hit areas, mass actionsrepeated-component-alignment— repeated components as slot models: equal size, pinned anchors, clamp + recover overflowing textoperational-expert-tool-ui— dense, workflow-driven UIs for trained daily B2B userscoordinated-data-views— keep a table and a visual view (map, diagram, chart) synchronizeddomain-expert-configuration— expose solver/algorithm settings in domain languageauthentic-product-representation— real content and real output over staged mockups and marketing chromeapp-shell— top bar, app launcher, tenant and environment cue, status bar: one shell across an estateglobal-toolbar-controls— currency, language, region and unit selectorsnotifications-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.
Output
Produce one structured review, not a stream of loose comments. Group findings by severity, most blocking first:
- Blockers — fails a hard gate: WCAG 2.2 AA, a broken flow, a dead end. Must fix before ship.
- Major — breaks consistency, hierarchy, or a core UX principle. Fix this iteration.
- Minor — polish, micro-interactions, perceived-performance refinements. Backlog.
For each finding give the stage it came from, the specific element, what is wrong, and the concrete fix.
Run only the stages the task needs. An existing product with settled brand and tokens starts at Stage 3; a pure accessibility pass runs Stage 6 alone. State which stages you ran and which you skipped, and why.
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.
