Design Plugin

Design and Refine

A Claude Code plugin that helps you make confident UI design decisions through rapid iteration.

What It Does

Design and Refine generates multiple distinct UI variations for any component or page, lets you compare them side-by-side in your browser, collects your feedback on what you like about each, and synthesizes a refined version—repeating until you're confident in the result.

Instead of guessing at the right design or going back-and-forth on revisions, you see real options, pick what works, and iterate quickly.

When to Use It

- Starting a new component or page — explore different approaches before committing
- Redesigning existing UI — see alternatives to what you have today
- Stuck on a design direction — generate options when you're not sure what you want
- Getting stakeholder buy-in — show concrete variations instead of describing ideas
- Learning what works — see how different layouts, densities, and patterns feel in your actual codebase

Why Use It

1. Uses your existing design system — infers colors, typography, spacing from your Tailwind config, CSS variables, or component library
2. Generates real code — not mockups, actual working components in your framework
3. Side-by-side comparison — view all variations at /design_lab in your dev server
4. Iterative refinement — tell it what you like about each, get a synthesized version
5. Clean handoff — outputs DESIGN_PLAN.md with implementation steps when you're done
6. No mess left behind — automatically cleans up all temporary files

Setup

1. Add the marketplace

In Claude Code, run:

2. Install the plugin

That's it. The plugin is now available in any project.

Usage

Start a session

Or with a specific target:

What happens next

1. Preflight — detects your framework (Next.js, Vite,…