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
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.