design-lab_skill

Overview

This skill runs a temporary design lab to explore UI options, collect feedback, and produce actionable implementation plans. It conducts a focused interview, infers the project’s visual language, generates five distinct UI variants, gathers interactive feedback, and outputs a final plan. All temporary artifacts are deleted when the session ends or the user cancels.

How this skill works

The skill auto-detects package manager, framework, and styling system, then scans the codebase for design tokens and common component patterns to infer colors, spacing, typography, and radii. It runs an interview to assemble a structured Design Brief, saves that brief, and scaffolds a temporary lab that renders five meaningfully different variants with an interactive FeedbackOverlay. When the user confirms a final design, the lab cleans up all temporary files and produces an implementation plan; if the user aborts, the lab removes all artifacts immediately.

When to use it

• Explore multiple directions before committing to a single UI approach
• Redesign an existing component or page and compare meaningful alternatives
• Create a new component or page with clear tradeoff demonstrations
• Validate interaction models and accessibility states with stakeholders
• Collect lightweight, in-context user feedback during design exploration

Best practices

• Always run the interview to produce a precise Design Brief before generating variants
• Infer visual tokens from the codebase (Tailwind config, CSS variables, theme files) rather than using preset styles
• Make each of the five variants explore a distinct design axis (hierarchy, layout, density, interaction, expressive)
• Include a reliable FeedbackOverlay in the route directory so users can annotate and submit feedback
• Ensure cleanup triggers on both confirm and cancel to never leave .claude-design or __design_lab behind

Example use cases

• Redesign a checkout card and compare dense vs spacious layouts with clear tradeoffs
• Prototype alternative interaction models for an inline edit flow vs modal edit flow
• Create five landing page hero variants to test hierarchy and CTAs with stakeholders
• Assess accessibility and motion choices across variants before implementation
• Generate a final implementation plan with file-level guidance after stakeholder selection