Skills (carson2222)

---
name: design-exploration
description: Generates multiple distinct design variants of a component or page, each with a completely different visual direction, then implements the chosen one. Use when the user asks to redesign, restyle, explore design options, create multiple visual directions, or compare design approaches for any UI element -- components, pages, sections, dashboards, landing pages, or full layouts.
license: Apache-2.0
---

# Design Exploration

Generate N distinct design variants for a given component, page, or section. Each variant takes a fundamentally different visual direction. Present all for comparison, then fully implement the chosen one.

## When to Trigger

### 1. New project
The user is bootstrapping a frontend from scratch. No existing design system -- the variants define it.

### 2. Existing app
The user has an established design language and wants multiple approaches for a new or existing component, section, or page. Every variant must stay consistent with the app's existing patterns and tokens.

### Bypass: Detailed design spec provided
If the user provides exact fonts, colors, hex values, border radii, and specific styling instructions -- skip Phase 2 entirely. This is an implementation request, not an exploration request. Do not suggest alternatives or inject creative direction. Read each target file, preserve all logic, apply exactly the specified changes. Go directly to Phase 3.

## Phase 1: Research

Before designing anything:

1. **Read the existing code** -- understand every component, import, animation, and logic in the target files.
2. **Study the design language** -- globals.css, tailwind config, component library, existing patterns (spacing, colors, typography, card styles).
3. **Identify constraints** -- what must NOT change: data, logic, API calls, routing, state management.
4. **Understand the content model** -- what data is displayed, edge cases (long text, many items, empty states).
5. **Check assets** -- verify images, icons, and assets exist with correct formats (transparency, resolution, aspect ratio). If assets need preprocessing (background removal, format conversion), handle that before building variants on top of them.
6. **Look beyond the brief** -- find data values available in the codebase but not currently displayed, existing assets that could be repurposed, values that could be visualized differently (charts, progress bars, indicators instead of plain text), opportunities for grouping or layering information.

## Phase 2: Generate Variants

Create exactly the number requested (default: 5). Determine mode automatically based on project state -- do not ask.

### Mode A: New Project

No existing design system to follow.

1. **Research broadly** -- search for design approaches across disciplines: product design, editorial, print, architecture, fashion branding, game UI, packaging. Do not rely on memorized style lists.
2. **Analyze context** -- product purpose, audience, intended mood. A trading app has different needs than a portfolio.
3. **If context is insufficient, ask** -- what is the product, who is it for, what feeling should it evoke. Exception: if the user explicitly wants broad exploration, skip this.
4. **Select styles optimal for this project** -- each must be a plausible direction for this exact product, not a showcase of range. Respect explicit style exclusions as hard constraints. Do NOT fall into deterministic patterns of always picking the same style families.
5. **Maximize diversity** -- every variant must differ in spatial thinking, typographic voice, and emotional register. Not "same layout, different colors."