design-lab

Generate UI design variants and collect interactive feedback for implementation plans.

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/seangjr/design-lab --skill design-lab-seangjr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-lab
Source: https://github.com/seangjr/design-lab/tree/main/skills/design-lab
Command: npx skills add https://github.com/seangjr/design-lab --skill design-lab-seangjr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires motion, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the UI design process by automatically generating multiple design variations, collecting user feedback interactively, and producing actionable implementation plans.

Core Features & Use Cases

  • Automated Design Generation: Creates 5 distinct UI variations based on project context and user input.
  • Interactive Feedback: Allows users to provide granular feedback directly on design variants via an overlay.
  • Iterative Refinement: Facilitates multiple rounds of feedback and synthesis to achieve the perfect design.
  • Implementation Planning: Outputs a DESIGN_PLAN.md for easy implementation.
  • Use Case: Redesign a complex dashboard component by exploring different layouts, hierarchies, and interaction models, ensuring the final design meets user needs and project goals.

Quick Start

Use the design-lab skill to start a design session for the CheckoutSummary component.

Frequently Asked Questions about design-lab

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate multiple UI variants for a component and get feedback?

You can generate multiple UI variants and get feedback by initiating a design session that creates five distinct variations based on project context, then collecting interactive user input via an overlay for iterative refinement. The process outputs a final implementation plan.

Can I use shadcn/ui and Tailwind CSS for automated UI design generation?

Yes, automated UI design generation supports multiple styling systems and frameworks, explicitly prioritizing shadcn/ui and Tailwind CSS for component design. It also integrates animation libraries like Motion to handle interactions within the generated variants.

What's the best way to turn design feedback into an implementation plan?

The best way to turn design feedback into an implementation plan is to run an iterative refinement loop that synthesizes user input on generated UI variants, culminating in a structured DESIGN_PLAN.md file ready for development.

Does the UI design exploration workflow support multiple rounds of feedback?

Yes, the UI design exploration workflow supports multiple rounds of interactive feedback and synthesis. Users provide granular feedback directly on design variants through an overlay, allowing iterative refinement until the desired design is achieved.

How do I redesign a complex dashboard component by exploring different layouts?

Redesigning a complex dashboard component involves starting a design session that generates multiple variations exploring different layouts, hierarchies, and interaction models. You then interactively review these variants to ensure the final design meets user needs and project goals.

Do I need Motion installed to run a UI design session?

Yes, Motion is a required dependency for running this UI design session. It provides the robust animation library integration needed to generate interactive variants and accurately model interaction behaviors during the feedback process.