Design and Refine

Make confident UI design decisions through rapid iteration. Generate multiple distinct UI variations, compare side-by-side, collect feedback, and synthesize a refined version.

When to Use

• 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

Setup

/plugin marketplace add 0xdesign/design-plugin
/plugin install design-and-refine@design-plugins

Usage

Start a Session

/design-and-refine:start

Or with a specific target:

/design-and-refine:start ProfileCard

What Happens

1. Preflight — detects framework (Next.js, Vite, etc.) and styling (Tailwind, MUI, etc.)
2. Style inference — reads existing design tokens from Tailwind config, CSS variables, or theme files
3. Interview — asks about what you're designing, pain points, inspiration, target user
4. Generation — creates 5 distinct variations exploring:
   • Information hierarchy
   • Layout models (cards, lists, tables, split-pane)
   • Density (compact vs spacious)
   • Interaction patterns (modal, inline, drawer)
   • Visual expression
5. Review — open http://localhost:3000/__design_lab to see all variations side-by-side
6. Feedback — select one, or describe what you like about each for synthesis
7. Iterate — repeat until confident
8. Finalize — temp files deleted, DESIGN_PLAN.md generated

Clean Up Manually

/design-and-refine:cleanup

Supported Frameworks

Next.js, Vite, Remix, Astro, Create React App

Supported Styling

Tailwind CSS, CSS Modules, Material UI, Chakra UI, Ant Design, styled-components, Emotion

Tips

• Be specific in the interview — more context = better variations
• Reference products you admire: "Like Linear's density" or "Stripe's clarity"
• Don't settle on round one — synthesis is where it gets good
• Keep your dev server running in another terminal

Output Files

• DESIGN_PLAN.md — implementation steps, component API, accessibility checklist
• DESIGN_MEMORY.md — captured style decisions (speeds up future sessions)