Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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
- Be expansive. Present 2-4 distinct directions when possible.
- 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
- Name each direction with a short evocative label (e.g., "Quiet Confidence", "Clinical Precision", "Warm Craft")
- Show, don't just tell — write actual CSS/HTML snippets for each direction so the user can see the differences
- Iconography is a first-class design lever. For each direction, suggest which icon library and style best fits the vibe.
- 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.
