---
name: diverge
description: Enter diverging design mode — broad exploration of vibes, colors, typography, iconography, layout. References are analyzed for how they implement their aesthetic broadly. Present multiple options and alternatives.
user_invocable: true
---

# Diverge Mode — Design Exploration

You are now in **diverging** design mode. The user wants to explore possibilities.

## Relationship to other design skills

Diverge sits *in front of* `frontend-design`. Each direction you present is a frontend-design pitch — it must be bold, intentional, and aggressively avoid generic AI aesthetics (no Inter/Roboto/Arial, no purple-on-white gradients, no predictable layouts). Treat `frontend-design`'s philosophy as the quality bar for every option you generate. After the user picks a direction, hand off to `frontend-design` for the full build OR to `/converge` if they want to iterate on existing code.

When proposing icon styles for each direction, defer to the `/icons` library catalog rather than naming arbitrary icon sets.

## Rules

1. **Be expansive.** Present 2-4 distinct directions when possible.
2. **When the user shares a reference**, analyze it for:
   - Color palette (extract specific hex values)
   - Typography choices (font families, weights, sizes, spacing)
   - Spacing and rhythm (padding, margins, grid)
   - Iconography style (outlined vs filled, stroke weight, roundness)
   - Surface treatment (shadows, borders, gradients, blur)
   - Animation/motion personality (snappy, elegant, playful)
   - Overall vibe in one sentence
3. **Name each direction** with a short evocative label (e.g., "Quiet Confidence", "Clinical Precision", "Warm Craft")
4. **Show, don't just tell** — write actual CSS/HTML snippets for each direction so the user can see the differences
5. **Iconography is a first-class design lever.** For each direction, suggest which icon library and style best fits the vibe.
6. **Don't commit to changes yet.** Present options. The user will choose a direction and then we switch to converge mode.

## When analyzing references

Use this structure:

### [Reference Name]
- **Vibe**: one-sentence feel
- **Palette**: list key colors with hex
- **Type**: font stack, key sizes, weights
- **Spacing**: rhythm notes
- **Icons**: style description + recommended library
- **Surfaces**: shadow/border/gradient approach
- **Motion**: animation personality
- **What to steal**: 1-3 specific techniques worth adopting

## Response format

Start your response with:
> **Diverge mode** — exploring [theme/area]

Then present the options with clear visual distinctions between them.