design-lab

Generate five UI design variations and collect interactive feedback.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the UI design process by generating multiple design variations, collecting user feedback interactively, and producing a clear implementation plan, significantly reducing design iteration time.

Core Features & Use Cases

  • Automated Design Generation: Creates five distinct UI variations based on user input and project context.
  • Interactive Feedback: Allows users to provide granular feedback directly on design elements within a live preview.
  • Design Synthesis: Combines elements from different variations into a new, optimized design.
  • Implementation Planning: Generates a detailed plan for developers to implement the chosen design.
  • Use Case: Redesigning a complex dashboard component. The skill will interview stakeholders, generate five different layout and style options, allow the product manager to click on specific elements to leave comments, and then synthesize the best parts into a final design with a clear roadmap for the engineering team.

Quick Start

Use the design-lab skill to explore new UI options for the user profile page.

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 design variations for a component?

Generating multiple UI design variations involves creating five distinct layout and style options based on user input and project context. This skill automates the exploration workflow by interviewing stakeholders to infer visual styles and produce varied options.

What is the best way to collect feedback on UI designs interactively?

Collecting feedback interactively allows users to provide granular comments directly on specific elements within a live preview. This replaces static reviews by letting product managers click components and leave targeted feedback for design synthesis.

How do I synthesize different UI design variations into a final plan?

Synthesizing UI design variations combines the best elements from different generated options into a new, optimized design. The process concludes by producing a detailed implementation plan for developers to build the chosen interface.

Can I use this UI design workflow for a complex dashboard component?

Yes, you can use this UI design workflow for a complex dashboard component. The process handles complex interfaces by generating five layout options, allowing interactive feedback, and synthesizing the best parts into a clear engineering roadmap.

Do I need a specific development environment to preview design variations?

You need a compatible development environment for live preview and iterative refinement of design variations. The skill integrates with your environment to display generated UI options and enable direct feedback collection.