dembrandt/dembrandt-skills

dembrandt-skills

UX and design-system skills for AI agents. Install once, and your agent knows how to design.

npx skills add dembrandt/dembrandt-skills --all

--all installs every skill at once. They load only when a prompt needs them, so there is no runtime cost to having them all. Want to pick by hand? Drop --all for an interactive picker. Add --global to install across all your projects.

How to use

A skill is just instructions your agent reads. You don't run it. The agent reads each skill's description and loads the matching one when your request fits.

1. Install with the command above, then start a new session. Skills load at session start.
2. Ask in plain words. "What layout fits a list of orders?" or "Does this pass WCAG AA?" loads the right skill on its own.
3. For a full pass, ask broadly ("review this screen", "build a UI from this brand") and the dembrandt skill runs the whole pipeline.

No special syntax. You can name a skill to force it ("use the layout skill"), but you rarely need to. Run npx skills list to see what's installed.

Connect the engine (optional)

Most skills are pure knowledge and work on their own. Two of them, extract-design and generate-ui-from-brand, read real design tokens off a live website. That needs the dembrandt engine. Connect it as an MCP server. There is nothing to install first, npx fetches it on first run:

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

Add this to your agent's MCP config. In Claude Code, this repo already ships a .mcp.json, so it connects automatically when you work in the project. Prefer the CLI? npx -y dembrandt https://stripe.com works without any conf