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.5.1`
Marketplace	`magus`
Commands	3
Subagents	2
Skills	5
MCP server	no
Hooks	no

Install

claudeup

Find designer on the Plugins tab and turn it on. claudeup 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 claudeup 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`	Compare a reference design against an implementation. Accepts Figma URL, image file, or browser URL as reference.
`/designer:ui`	UI design review from a screenshot or Figma file, covering usability and accessibility

Subagents

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

Agent	What it does
`designer:design-review`	\|
`designer:ui`	Reviews a screen for usability, WCAG accessibility and design-system consistency, reading the screenshot directly.

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: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​