designer

UI design validation. Compares a rendered screen against its reference by pixel diff, then reviews the result for spacing, hierarchy and design-system consistency.


Version	`0.10.0`
Marketplace	`magus`
Commands	3
Subagents	2
Skills	6
MCP server	no
Hooks	no

Install

magus

Find designer on the Plugins tab and turn it on. magus registers the magus marketplace if you do not have it, and installs what the plugin needs to actually run — binaries, MCP servers, CLI tools.

For a team, press s to save your plugins as a profile and commit it. Everyone else runs magus install — see Teams and profiles.

Prefer to do it by hand? Installing Magus has the manual path.

When to reach for it

Use when designer agents need browser screenshot capture and claude-in-chrome is unavailable — browser-use-integration
Use when reviewing UI against an established design system — design-references
Use when creating, validating, or parsing project design styles — ui-style-format

Commands

Command	What it does
`/designer:create-style`	\|
`/designer:review`	Judge an implementation against its reference design — pixel diff, external vision model, and the project's review services.
`/designer:ui`	Create a UI design from a brief — artboards per screen and state, tokens, component list — then optionally implement it and judge the result against the design

Subagents

Dispatched with the Agent tool, each in its own context window.

Agent	What it does
`designer:review`	\|
`designer:ui`	\|

Skills

	How you get it
●	Claude can reach for it on its own
○	You invoke it by name

Why a skill lands in one row or another

	Skill	What it covers
●	`designer:browser-use-integration`	Detects the browser-use@magus plugin and captures screenshots of URL-based references. Use when designer agents need browser screenshot capture and claude-in-chrome is unavailable.
●	`designer:design-references`	Provides design system references — Material 3, Apple HIG, Tailwind UI, Ant Design, Shadcn/ui. Use when reviewing UI against an established design system.
●	`designer:review-services`	Judges a screen with an external vision model resolved live via claudish, and detects the project's review services (axe, Lighthouse, Percy, Chromatic, Applitools).
●	`designer:ui-analyse`	Reviews a UI screenshot — usability, WCAG, design-system consistency, design-vs-implementation diff. Prompting patterns, depth tiers and severity guidelines. Analysis only;
●	`designer:ui-style-format`	Specifies the UI design style file format and schema for .claude/design-style.md and .claude/design-references/. Use when creating, validating, or parsing project design styles.
○	`designer:compare`	Provides the compare.ts CLI invocation pattern, semantic comparison prompt template, severity thresholds, and model selection guide for UI design comparison.

Source

plugins/designer/ on GitHub, including its full README.

Install​

When to reach for it​

Commands​

Subagents​

Skills​

Source​