# Design And Refine

> Start a design exploration session - generate 5 distinct UI variations, compare side-by-side, collect feedback, and iterate to a final design. Use when exploring UI options, redesigning components, or creating new interfaces.

- Skill: `cdeistopened/design-and-refine` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cdeistopened/design-and-refine`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cdeistopened/design-and-refine/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: cdeistopened (https://skillmd.com/u/cdeistopened)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cdeistopened/design-and-refine

---


# Design and Refine

Generate multiple UI variations, compare them side-by-side, and iterate based on feedback until you reach the perfect design.

## When to Use

- Starting a new component or page - explore approaches before committing
- Redesigning existing UI - see alternatives to what you have
- Stuck on a design direction - generate options
- Getting stakeholder buy-in - show concrete variations

## How It Works

1. **Preflight** - Detect framework, styling system, and infer existing design tokens
2. **Interview** - Ask about scope, pain points, inspiration, brand direction, constraints
3. **Generate** - Create 5 distinct variations exploring different design axes
4. **Preview** - User views at `/__design_lab` route (or web preview for Expo)
5. **Feedback** - Pick a winner or synthesize elements from multiple variants
6. **Iterate** - Refine until confident
7. **Finalize** - Clean up temp files, generate DESIGN_PLAN.md

## Full Workflow

See the complete skill definition at:
`.claude/skills/design-plugin/design-and-refine/skills/design-lab/SKILL.md`

When invoked, follow that workflow exactly. Key phases:

### Phase 0: Preflight Detection
- Detect package manager (pnpm/yarn/npm/bun)
- Detect framework (Next.js, Vite, Expo, etc.)
- Detect styling (Tailwind, CSS modules, styled-components)
- Infer visual styles from existing configs and components

### Phase 1-2: Interview & Brief
Use AskUserQuestion tool to gather:
- Scope (component vs page, new vs redesign)
- Pain points and inspiration
- Brand direction and density preference
- Target user and key tasks
- Constraints

Generate design-brief.json from responses.

### Phase 3-4: Generate Design Lab
Create 5 meaningfully distinct variants:
- A: Information hierarchy focus
- B: Layout model exploration
- C: Density variation
- D: Interaction model
- E: Expressive direction

For Expo/React Native:
- Create variants as components in `.claude-design/lab/variants/`
- Use `expo export --platform web` for preview
- Or generate screenshots using simulator

### Phase 5-7: Feedback & Refinement
- Ask if user found a winner or wants to synthesize
- If synthesizing, combine best elements into Variant F
- Iterate until user confirms

### Phase 8: Finalize
- Delete all `.claude-design/` temp files
- Delete temp routes
- Generate DESIGN_PLAN.md with implementation steps
- Update DESIGN_MEMORY.md with learned preferences

## Expo/React Native Adaptation

Since this project is Expo (not web), adapt the workflow:
- Skip web route creation
- Generate component variations in `.claude-design/`
- Preview options:
  1. Run `expo export --platform web` and view at localhost
  2. Use simulator screenshots
  3. Hot reload in Expo Go

## Abort Handling

If user says cancel/abort/stop at any point:
1. Confirm the abort
2. Delete `.claude-design/` entirely
3. Do NOT generate any plan