dembrandt

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 tone
• algorithmic-color-palette — derive states and brand-tinted greys from brand colours
• color-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 usage
• elevation-and-depth — shadow scale, border-radius, card and modal patterns
• button-states — six states: rest, hover, active, focus, disabled, loading
• component-family-consistency — buttons, inputs, pills: shared radius, colour, height
• status-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 region
• visual-emphasis-and-hierarchy — one CTA per view, colour and size as emphasis
• information-architecture — naming, mental models, data UI, confirm dialogs
• ui-context-and-scope — hierarchy, breadcrumbs, colour regions, scope communication
• responsive-paradigms — mobile/tablet/desktop: nav, sections, sticky behaviour
• ui-density — match density to platform and user type
• sticky-and-fixed-elements — headers, bottom toolbars, z-index tokens
• scroll-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 how
• form-design — helper text, placeholder, validation, submit state
• data-display-and-selection — grid/list/table, large hit areas, mass actions
• global-toolbar-controls — currency, language, locale: placement and typography
• notifications-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 checklists
• user-flows-and-guided-paths — wizards, purchase flows, onboarding sequences
• micro-interactions — animated icons, toggles, reveals, celebrations
• loading-states-and-perceived-performance — spinners, skeleton screens, staggered entry
• motion-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, ARIA
• semantic-html-and-seo — HTML5, alt texts, Open Graph, progressive enhancement
• performance-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.