How does the feedback system work?

The skill injects a self-contained FeedbackOverlay into a temporary route. This allows you to interact with the five variants and provide specific notes that Claude uses to refine the final implementation plan.

Does this skill leave temporary files in my repository?

No, the skill features a strict cleanup protocol. All files under the .claude-design/ directory and temporary routes are automatically deleted once you finalize a design or cancel the process.

Can it match my existing project's design system?

Yes, it performs a 'Preflight Detection' to scan your Tailwind config, CSS variables, and existing components, ensuring all generated variations follow your project's specific visual language.

Which frameworks are compatible with UI Design Lab?

It currently supports Next.js (App and Pages router), Vite, Remix, Nuxt, and Astro, and can detect styling systems like Tailwind, Material UI, and Chakra UI.

What happens if I cancel the design process midway?

If you use keywords like 'cancel' or 'stop', the skill immediately triggers its cleanup behavior, deleting all temporary artifacts and routes without making any permanent changes to your codebase.

UI Design Lab

Name: UI Design Lab
Author: ulasalyesil

byulasalyesil

0•

设计工具

Conducts interactive design interviews and generates multiple UI variations with a built-in feedback system for rapid frontend exploration.

UI Design Lab implements a complete design exploration workflow directly within your development environment. By conducting a detailed interview and analyzing your project's existing styling system—including Tailwind configurations, CSS variables, and UI libraries—the skill generates five distinct UI variations in a temporary, interactive lab. Users can provide granular feedback through a dedicated overlay, allowing for rapid iteration and refinement. Once a design is chosen, the skill produces a detailed implementation plan and automatically cleans up all temporary files and routes, ensuring your repository remains clutter-free.

主要功能

01Automated framework and styling detection for zero-config project integration.

02Interactive FeedbackOverlay system for pinpointing specific improvements within the lab environment.

03Strict cleanup behavior that removes all temporary artifacts and routes upon completion or cancellation.

04Visual style inference that extracts design tokens and patterns from existing code.

05Generates five distinct UI variations to compare different aesthetic and functional approaches.

060 GitHub stars

使用场景

01Redesigning existing components to improve UX, accessibility, or visual appeal.

02Bridging the gap between high-level design requirements and production-ready implementation plans.

03Prototyping new page layouts with multiple design directions before committing to code.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ulasalyesil/personal-website-v2 design-lab

For use in Claude.ai and ChatGPT

主要功能

01Automated framework and styling detection for zero-config project integration.

02Interactive FeedbackOverlay system for pinpointing specific improvements within the lab environment.

03Strict cleanup behavior that removes all temporary artifacts and routes upon completion or cancellation.

04Visual style inference that extracts design tokens and patterns from existing code.

05Generates five distinct UI variations to compare different aesthetic and functional approaches.

060 GitHub stars

使用场景

01Redesigning existing components to improve UX, accessibility, or visual appeal.

02Bridging the gap between high-level design requirements and production-ready implementation plans.

03Prototyping new page layouts with multiple design directions before committing to code.