design-lab

Generate five UI design variations and implementation plans with feedback collection.

Updated Feb 10, 2026

Search Tags:#feedback #design system #prototyping #implementation plan #ui design #design variations

Ready to run

npx skills add https://github.com/ihj04982/my-cursor-settings --skill design-lab-ihj04982

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-lab
Source: https://github.com/ihj04982/my-cursor-settings/tree/main/skills/design-lab
Command: npx skills add https://github.com/ihj04982/my-cursor-settings --skill design-lab-ihj04982

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 enabling rapid exploration of multiple design variations, gathering targeted feedback, and generating actionable implementation plans.

Core Features & Use Cases

Design Exploration: Generates five distinct UI variations for a component or page.
Interactive Feedback: Provides a Figma-like overlay for users to comment directly on design elements.
Plan Generation: Creates a detailed implementation plan and updates design memory.
Use Case: Redesigning a complex dashboard component to improve usability and visual appeal, allowing stakeholders to compare options and provide specific feedback before development begins.

Quick Start

Use the design-lab skill to explore UI variations 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 UI design variations involves creating five distinct design options for a specific component or page, allowing stakeholders to compare different visual approaches and provide targeted feedback before implementation begins.

Can I collect feedback directly on UI design elements during prototyping?▼

Yes, collecting feedback on UI design elements utilizes an interactive overlay where users can comment directly on specific parts of the design, streamlining the review process and ensuring actionable critique.

Does this UI design workflow support framework detection for Next.js and Vite?▼

Yes, the UI design workflow supports framework detection for Next.js and Vite, automatically inferring the visual language and analyzing styling systems like Tailwind or Material UI to ensure design consistency.

How do I create an implementation plan after finalizing a UI design?▼

Creating an implementation plan after finalizing a UI design involves generating a detailed development roadmap and updating design memory, bridging the gap between visual exploration and code execution.

What is the best way to ensure design system consistency across multiple variations?▼

Ensuring design system consistency across multiple variations requires analyzing the existing styling system, such as Tailwind or Material UI, to infer the visual language and apply it uniformly across all generated options.