/dembrandt

name: dembrandt
description: Orchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for multi-concern work such as a design review, UI build or interface audit.
metadata:
  priority: 10
  authors:
    - name: VictorGjn
      url: https://github.com/VictorGjn
      note: original concept and pipeline design
  docs:
    - "https://dembrandt.com"
    - "https://www.npmjs.com/package/dembrandt"
  promptSignals:
    phrases:
      - "design review"
      - "build ui"
      - "audit interface"
      - "from brand to ui"
      - "full ux review"
      - "ui audit"
      - "review my ui"
      - "review this interface"
      - "design audit"
      - "ux audit"
retrieval:
  aliases:
    - dembrandt pipeline
    - full ux pipeline
    - ui design orchestrator
    - end-to-end design review
  intents:
    - run a full UX review across multiple design concerns
    - orchestrate brand-to-UI design pipeline
    - audit an interface end to end
    - run all design checks in order
  examples:
    - review my checkout flow
    - audit this interface
    - do a full design review
    - build a UI from scratch following best practices
    - run the dembrandt pipeline on this product

dembrandt — UX Pipeline Orchestrator

> Concept by [@VictorGjn](https://github.com/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
• Reproducing an existing page rather than designing one → use `clone-website` instead
• Reading the tokens off a live site and nothing more → use `extract-design` 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
• `surface-separation` — one means per surface: border, elevation or fill; opacity is for state
• `button-states` — six states: rest, hover, active, focus, disabled, loading
• `component-family-consistency` — buttons, inputs, pills: shared radius, colour, height
• `sizing-units` — px vs rem vs relative: which values move when the user enlarges text
• `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):

• `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 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
• `marketing-vs-product-system` — site and product differ in density, share one token layer
• `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
• `tab-navigation` — tab types, overflow, keyboard nav, ARIA, state persistence
• `modal-and-overlay-patterns` — tooltip/popover/drawer/modal hierarchy, focus management, destructive confirm
• `form-design` — helper text, placeholder, validation, submit state
• `data-display-and-selection` — grid/list/table, large hit areas, mass actions
• `repeated-component-alignment` — repeated components as slot models: equal size, pinned anchors, clamp + recover overflowing text
• `operational-expert-tool-ui` — dense, workflow-driven UIs for trained daily B2B users
• `coordinated-data-views` — keep a table and a visual view (map, diagram, chart) synchronized
• `domain-expert-configuration` — expose solver/algorithm settings in domain language
• `authentic-product-representation` — real content and real output over staged mockups and marketing chrome
• `app-shell` — top bar, app launcher, tenant and environment cue, status bar: one shell across an estate
• `global-toolbar-controls` — currency, language, region and unit selectors
• `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

-