ihj04982/design-lab

Design Lab Skill

This skill implements a complete design exploration workflow: interview, generate variations, collect feedback, refine, preview, and finalize.

CRITICAL: Cleanup Behavior

All temporary files MUST be deleted when the process ends, whether by:

• User confirms final design → cleanup, then generate plan
• User aborts/cancels → cleanup immediately, no plan generated

Never leave .claude-design/ or __design_lab routes behind. If the user says "cancel", "abort", "stop", or "nevermind" at any point, confirm and then delete all temporary artifacts.

Workflow Summary

| Phase | Action | |-------|--------| | 0 | Preflight: detect package manager, framework, styling, Design Memory; infer visual style from project | | 1 | Interview: scope, pain points, inspiration, brand, persona, constraints (use AskUserQuestion) | | 2 | Generate Design Brief JSON → .claude-design/design-brief.json; show summary | | 3 | Generate Design Lab: .claude-design/lab/ with 5 variants, FeedbackOverlay in route dir, data-variant on containers | | 4 | Present URL to user (do not start dev server); output instructions and proceed to Phase 5 | | 5 | Collect feedback: interactive overlay (preferred) or AskUserQuestion; parse Overall Direction and comments | | 6 | If user likes parts of different variants: synthesize Variant F, replace lab, ask again | | 7 | Final preview at /__design_preview; ask for confirmation | | 8 | On confirm: cleanup temp files, write DESIGN_PLAN.md, create/update DESIGN_MEMORY.md |

Abort: If user cancels at any time, confirm then delete .claude-design/ and route files; do not generate plan.

Additional Resources

For full details (preflight detection tables, interview question options, directory structure, FeedbackOverlay setup, variant guidelines, feedback parsing, finalize templates, error handling, configuration), see reference.md.