asimsayed/claude-skills

diverge

Enter diverging design mode — broad exploration of vibes, colors, typography, iconography, layout.

Voir la source

Mode d’emploi

  1. Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
  2. Consultez le document original pour les outils, identifiants et environnements requis.
  3. Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/asimsayed/claude-skills --skill diverge

Avant de commencer

  • L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
  • Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original

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

  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
  1. Name each direction with a short evocative label (e.g., "Quiet Confidence", "Clinical Precision", "Warm Craft")
  2. Show, don't just tell — write actual CSS/HTML snippets for each direction so the user can see the differences
  3. Iconography is a first-class design lever. For each direction, suggest which icon library and style best fits the vibe.
  4. 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.

Tâches connexes

du même dépôt

Autres Skills

Tous les Skills