OpenSkillIndex← back to search
claude-code

Pause 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.

install
source · Clone the upstream repo
git clone https://github.com/cdeistopened/Pause
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/cdeistopened/Pause "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/design-and-refine" ~/.claude/skills/cdeistopened-pause-design-and-refine && rm -rf "$T"
manifest: .claude/skills/design-and-refine/SKILL.md
source content

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