design-and-refine

Runs the 0x Designer "Design & Refine" workflow: multiple real UI variations, side-by-side comparison at /__design_lab, feedback-driven synthesis, then DESIGN_PLAN.md + DESIGN_MEMORY.md. Use when designing or redesigning a component/page, exploring layout/density options, unblocking direction, or when the user says design lab, UI variations, 0x designer, design-and-refine, or kylezantos/0x-designer-plugin. Prefer a quick mock or single-shot tweak when they only need one small change. Requires a running dev server and a supported web stack (see reference.md).

Design & Refine (0x Designer workflow)

Source: kylezantos/0x-designer-plugin (Claude Code plugin; originates from 0xdesign “Design and Refine”).

What you get: Several distinct UI implementations in code (not static mockups), a comparison route at /__design_lab, iterative merge from user feedback, then persistent DESIGN_PLAN.md and DESIGN_MEMORY.md. Temp dirs/routes are removed after finalize.

Choose path

A) Claude Code — official plugin (full automation)

User must use Claude Code with the marketplace plugin (not Cursor-only):

/plugin marketplace add 0xdesign/design-plugin — if that fails, use the repo they actually track: see reference.md.
/plugin install design-and-refine@design-plugins
Start: /design-and-refine:start or /design-and-refine:start $ARGUMENTS
Cleanup if stuck: /design-and-refine:cleanup

Point the user here when they have Claude Code; do not pretend Cursor runs those slash commands.

B) Cursor / other IDEs — manual playbook (this session)

When the user is in Cursor (or no plugin), emulate the workflow:

Preflight — Detect framework (Next, Vite, Remix, Astro, CRA, etc.) and styling (Tailwind, CSS modules, MUI, Chakra, Ant Design, styled-components, Emotion) from the repo. Read tokens from tailwind.config.*, theme files, CSS variables.
Brief — Short interview: new vs redesign, component vs page, pain points, inspiration (e.g. “Linear density”, “Stripe clarity”), primary user tasks.
Generate — Create ~5 meaningfully different variants (hierarchy, layout model, density, interaction pattern, visual weight). Use their design system; no random one-off palette unless the project does.
Design Lab route — Add a dev route so all variants render side by side (same pattern as plugin: app/__design_lab or pages/__design_lab depending on router). Document the URL (port from their dev server, often localhost:3000/__design_lab).
User review — User keeps dev server running; they compare in browser. Collect feedback: per-variant likes, or element-level notes if they paste structured feedback.
Synthesize — Produce one refined direction combining what worked; iterate rounds until they say stop.
Finalize — Write DESIGN_PLAN.md (implementation steps, a11y checks, testing notes) and DESIGN_MEMORY.md (style decisions for future sessions). Remove temporary paths (see reference.md).

Invariants

Never leave the repo full of orphaned lab routes and .claude-design junk after the user says they are done — clean temp artifacts as part of finalize (match plugin behavior).
Do not start the dev server in a blocking way unless the user asks; assume they run it.
Variations must be runnable code in their stack, not screenshots-only.

Handoffs

Tiny change (one button, copy tweak) → skip full lab; edit inline.
No web UI (CLI-only, native app) → say this workflow is for web frontends; offer a lighter design doc instead.

Full framework list, temp paths, tips, and upstream links: reference.md.