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

•

Design Tools

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.

Key Features

01Anti-convergence logic to ensure unique aesthetics and avoid generic AI-generated design patterns.

02Generation of 5-8 diverse visual proposals using unique layout, color, and typography axes.

03Interactive local web viewer for real-time preview of live components, buttons, and hero sections.

042 GitHub stars

05Automated design DNA analysis of existing web applications via Chrome MCP integration.

06Collaborative refinement loop for hybridizing and perfecting user-selected design directions.

Use Cases

01Refreshing the aesthetic of an existing web application with modern 2025 design trends.

02Establishing a visual system and design tokens when a project lacks clear brand guidelines.

03Exploring multiple UI directions before committing to a full frontend implementation.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config design-exploration

For use in Claude.ai and ChatGPT

Download Skill