Dembrandt UX Skills

What does this agent do, and when should you use it?

This repository packages Open Agent Skills for brand identity, design tokens, layout, components, UX principles, and technical foundations. An agent loads matching skills in response to a prompt; a broad interface-review request can invoke the full UX workflow described by the dembrandt skill. Of the 45 listed skills, 43 work after installation alone, while live-site features such as extract-design and generate-ui-from-brand require the Dembrandt engine. Install the skills with npx skills, or use the plugin marketplace in Claude Code; the README also names Cursor, Codex, and GitHub Copilot. The deliverable is a set of skills and an optional MCP interface for other agents, not a standalone hosted application.

The agent matches prompts to skills: nielsen-usability-heuristics provides a usability review, wcag-accessibility covers WCAG 2.2 AA checks, and algorithmic-color-palette derives a palette from a brand color. Other skills cover type scales, responsive layouts, forms, tab navigation, modals, loading states, and web performance. The dembrandt skill describes a six-stage UX orchestration workflow; extract-design extracts design tokens from a live site through the Dembrandt CLI or MCP, and generate-ui-from-brand turns a URL or DESIGN.md into tokens, decisions, and a UI spec. clone-website rebuilds a page from a capture and computed styles for Figma, Penpot, or code.

1. A B2B SaaS design-system team wants consistent buttons, inputs, and badges across its product.
2. A frontend developer wants to review contrast, keyboard access, and ARIA usage before shipping an interface.
3. A product designer has a brand color and needs a complete UI palette derived from it.
4. A product team is designing guided onboarding or a multi-step purchase flow.
5. A design engineer needs tokens extracted from a live site such as Stripe and can install the Dembrandt engine.

How do you install or deploy this agent?

Install all skills from a terminal:

npx skills add dembrandt/dembrandt-skills --all

Use --global to install for every project. Claude Code users can instead add the marketplace and install its plugin inside Claude Code:

/plugin marketplace add dembrandt/dembrandt-skills
/plugin install dembrandt@dembrandt

For live-site features, install Node.js 18 or newer and add the Dembrandt MCP configuration:

{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": ["-y", "dembrandt", "mcp"]
    }
  }
}

Before the first extraction, install the browser:

npx dembrandt install-browser

How do you use this agent?

Open a UI file and ask your agent for a task in your own words, for example:

Review this interface for usability issues.

For a specific check, ask “Does this pass WCAG 2.2 AA?” To extract a live site's design system, request extraction for that site; this requires the Dembrandt CLI or MCP to be configured and the browser to be installed.

What are this agent's strengths and limitations?

How does this agent compare with similar options?

Key facts side by side with the most closely related agents.

How does FollowAgents rate this agent?

FAQ