// tool · 02 / 03
Design-builder
Production-grade UI without the AI slop. Design plugin for Claude Code with 4 commands covering setup, create, improve, and review.
// what is it
A design plugin for Claude Code that produces distinctive, production-grade UI.
Design-builder is a Claude Code plugin that turns Claude into a design partner. Four user-facing commands cover the pipeline end to end: /setup builds the design system from anchored references, /create generates page or screen specs, /improve audits and fixes existing UI, /review runs a strict critique against accessibility, motion, anti-patterns.
Backed by a designlib catalog of 400+ inspiration pages, anti-pattern filters, motion principles from working designers, and the iOS HIG. Web and iOS supported. Open source, MIT-licensed.
// the problem
Generic AI workflows produce generic UI.
Cyan-on-dark gradients, three-column feature card rows, gradient text, side-stripe alert callouts — the AI-tool visual default since 2023, regardless of brand. The agent has been trained on the same Dribbble shots as everyone else.
Design-builder fights this through three layers: a knowledge base (designlib references, HIG, motion principles) that gives the agent specific source material, design filters (direction, dials, anti-patterns, distinctiveness gate) that gate every output, and command scenarios (setup → create → improve → review) that orchestrate the layers.
The result is interfaces that read as deliberate brand choices — not as the AI default.
// how it works
Four commands. One pipeline.
- // 01
/setup — build the design system.
Anchored to inspiration references, palettes, font pairs from designlib. Outputs
tokens.css,style-guide.md,content-library.md, an HTML preview. Direction is committed up front so every later command honors it. - // 02
/design_page or /design_screen — generate the spec.
Spec-first: writes
design/pages/<name>.mdordesign/screens/<name>.mdwith sections, content slots, tokens, animations, edge cases. No code emitted yet — the spec is the contract. - // 03
/build — write the code.
Reads the spec, writes the production code in your stack (Astro, Next, SwiftUI, etc.). Anti-patterns are gated server-side; tokens come from
tokens.css. Code is the output, not the input. - // 04
/improve and /review — keep it production-grade.
/improveaudits and fixes existing UI against the system./reviewruns a strict P0–P3 critique on composition, typography, color, accessibility, motion, AI-slop indicators. Both are gates on the road to ship.
// who it's for
Builders who ship UI, not just demos.
Design-builder is for builders who already use Claude Code (or Cursor/Copilot) for code, and who want the same agentic workflow for design — production-grade, not vibe-coded. Indie founders, senior frontend devs, designers who code.
Best fit: web (Astro, Next, Vite) and iOS (SwiftUI). Worst fit: Figma-only workflows where no code is being generated — the plugin's output is code, not Figma frames.
// compatibility
Compatibility
// get started
Install the plugin, run /setup.
Open source, MIT-licensed. Install via Claude Code's plugin marketplace, or clone the repo and link it locally.
Get notified when Design-builder ships a major update.
// subscribed
Check your inbox for the confirmation link.