Design Lenses
Build fast, then refine through specialized lenses.
What It Does
Design Lenses is a Claude Code plugin that orchestrates multi-persona design reviews. It spawns 8 specialist agents across 4 structured iterations (DIAGNOSE, FOUNDATIONS, ENHANCE, SHIP). Hand it any functional UI file and it takes it from "working" to "production-grade" -- critique, typography, layout, motion, accessibility, resilience, and polish in a single run.
Good design is not one big decision. It is 15 small ones made through different lenses.
Install
claude plugin marketplace add andrejkanuch/design-lenses
claude plugin install design-lenses@design-lenses
Or test locally:
claude --plugin-dir /path/to/design-lenses
Quick Start
/design-lenses:design-loop src/dashboard.tsx --domain=finance
Here is what happens when you run it:
-
Context gathering -- the plugin asks you about platform (mobile/web), theme (dark/light/both), scope (component/page), and usage context (data-heavy, outdoor, etc.). These shape every agent prompt so advice is specific, not generic.
-
Iteration 1: DIAGNOSE -- a Design Critic and a Domain Expert agent spawn in parallel. The critic evaluates visual hierarchy, contrast, states, and accessibility. The domain expert reviews through the lens of a real user in your domain (e.g., a day trader for finance). Both report findings without editing files.
-
Synthesis -- the orchestrator reads both reports, categorizes findings by consensus and severity, and applies fixes to your file using the Edit tool. Progress is logged to design-review-progress.md.
-
Iterations 2-4 repeat the pattern with different specialist pairs (design system + copy, motion + resilience, polish + boldness), each building on the previous iteration's improvements.
-
Final summary -- total fixes applied, grouped by category, with the top 5 most impactful improvements highlighted.
A full loop typically takes 5-10 minutes depending on file size and complexity.
Commands
/design-lenses:design-loop <file|dir> [flags]
The full loop. 8 agents, 4 iterations, auto-applied fixes between each round.
| Iteration | Name | Agents | What They Cover |
|---|
| 1 | DIAGNOSE | Design Critic + Domain Expert | Visual hierarchy, accessibility audit, contrast ratios, domain-specific usability, competitor comparison |
| 2 | FOUNDATIONS | Design System + Copy & Clarity | Spacing grid, type scale, color tokens, layout rhythm, label clarity, empty states, error messages, tone |
| 3 | ENHANCE | Motion & Delight + Resilience | Purposeful animations, celebration moments, color safety, text overflow, edge cases, responsive adaptation |
| 4 | SHIP | Polish & Extract + Bolder/Overdrive | Pixel alignment, performance optimization, design token extraction, bold amplification, signature effects |
Flags:
| Flag | Description |
|---|
--domain=X | Sets the domain expert persona (see Domain Presets) |
--iterations=N | Run only the first N iterations (1-4). --iterations=1 runs DIAGNOSE only. |
--resume | Continue a previous run from where it left off. Reads the progress file and skips completed iterations. |
--no-apply | Run all agents but output findings as a report instead of editing the file. Review before committing. |
--dry-run | Gather context and output the plan without executing any agents. |
Accepts: single file, multiple files (space-separated), or a directory (globs for supported types).
Supported file types: .html, .jsx, .tsx, .vue, .svelte
Multi-file mode: When given multiple files or a directory, runs the loop on each file sequentially with shared context and cross-file design token consistency.
/design-lenses:design-brainstorm <file> [--domain=X]
Quick 3-agent brainstorm without the full loop. Spawns a Design Critic, Domain Expert, and a generalist UX reviewer in parallel. No file editing -- returns prioritized findings for you to act on manually. Use this for early-stage feedback before committing to a full loop.
/design-lenses:design-status
Check progress of a running design loop. Reads the design-review-progress.md file created by design-loop and reports which iterations have completed, which agents have run, and what fixes have been applied so far.
How It Works
The 4 Iterations
