Does this skill work with any tech stack?

Yes, while it generates previews in HTML/CSS, the outputted design specifications and tokens can be applied to any frontend framework or styling system you are using.

Can I iterate on the generated design proposals?

Yes, the skill facilitates a collaborative refinement loop where you can select favorite directions, request hybrids, and tweak specific elements before final implementation.

How do I view the design options Claude generates?

The skill hosts a local Python server and provides a URL. It then uses Chrome MCP to navigate to that URL so you can view the 'working' webpage of design options.

How does the skill analyze my existing project design?

It uses Chrome MCP to screenshot and inspect your current application, then utilizes Gemini to infer the existing design DNA, including typography, layout, and color hierarchy.

What is a visual design catalogue in Claude Code?

A visual design catalogue is a collection of 5-8 live-coded web proposals generated by the skill, featuring real components, typography, and color palettes that you can preview in a browser.

Design Exploration

Name: Design Exploration
Author: phrazzld

byphrazzld

•

디자인 도구

Generates interactive visual catalogues and diverse UI proposals to guide aesthetic direction before implementation.

소개

Design Exploration is a specialized Claude Code skill that bridges the gap between conceptual ideas and front-end implementation by generating high-fidelity visual catalogues. Instead of relying on text descriptions, it creates actual styled components and live color palettes in a local web environment, allowing users to choose from 5-8 distinct 'DNA' variations. It is an essential tool for developers starting a redesign, polishing existing interfaces, or exploring new aesthetic directions when a clear brand guide is not yet established.

주요 기능

Anti-convergence logic to ensure unique aesthetics and avoid generic AI-generated design patterns.
Generation of 5-8 diverse visual proposals using unique layout, color, and typography axes.
Interactive local web viewer for real-time preview of live components, buttons, and hero sections.
2 GitHub stars
Automated design DNA analysis of existing web applications via Chrome MCP integration.
Collaborative refinement loop for hybridizing and perfecting user-selected design directions.

사용 사례

Refreshing the aesthetic of an existing web application with modern 2025 design trends.
Establishing a visual system and design tokens when a project lacks clear brand guidelines.
Exploring multiple UI directions before committing to a full frontend implementation.

소개

주요 기능

Anti-convergence logic to ensure unique aesthetics and avoid generic AI-generated design patterns.
Generation of 5-8 diverse visual proposals using unique layout, color, and typography axes.
Interactive local web viewer for real-time preview of live components, buttons, and hero sections.
2 GitHub stars
Automated design DNA analysis of existing web applications via Chrome MCP integration.
Collaborative refinement loop for hybridizing and perfecting user-selected design directions.

사용 사례

Refreshing the aesthetic of an existing web application with modern 2025 design trends.
Establishing a visual system and design tokens when a project lacks clear brand guidelines.
Exploring multiple UI directions before committing to a full frontend implementation.