Which frameworks are supported?

It includes built-in detection for Next.js (App and Pages router), Vite, Remix, Nuxt, and Astro, and will adapt the design lab route to your specific framework.

Can I use it for single components?

Yes, during the interview phase, you can specify whether you are designing a single reusable component or a full-page layout.

How does Design Lab match my existing project's style?

The skill performs a preflight check to scan your Tailwind configuration, CSS variables, and existing components to extract your specific color palette, typography, and spacing scales.

Will this skill leave temporary files in my codebase?

No. Design Lab has a critical cleanup behavior that deletes the .claude-design/ directory and temporary routes as soon as a design is finalized or the process is aborted.

Design Lab

Name: Design Lab
Author: phrazzld

byphrazzld

•

Design Tools

Conducts design interviews and generates five distinct UI variations directly within your project environment for rapid prototyping.

Design Lab implements a comprehensive design exploration workflow by conducting stakeholder-style interviews, automatically inferring your project's existing visual language, and generating five distinct UI variations in a temporary sandbox. It allows developers to compare different layout models, information hierarchies, and interaction patterns while maintaining strict consistency with existing Tailwind configs, CSS variables, or component libraries. Once a design is selected, the skill generates a technical implementation plan and ensures a zero-footprint cleanup by removing all temporary artifacts.

Key Features

01Strict cleanup behavior that removes all temporary files and routes after use.

02Automated framework and styling detection for Next.js, Vite, Tailwind, and more.

03Guided interview process to define scope, pain points, and brand direction.

042 GitHub stars

05Visual style inference that extracts tokens from existing codebases for consistency.

06Parallel generation of five unique design variants exploring different UX axes.

Use Cases

01Redesigning existing components to improve information hierarchy and user flow.

02Rapidly prototyping UI variations that adhere to an established design system.

03Generating multiple layout options for new landing pages or dashboards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config design-lab

For use in Claude.ai and ChatGPT

Download Skill