design-variations

Category: Content & Multimedia | Uploader: B1u3B01t | Downloads: 0 | Version: v1.0（Latest）

Generates multiple distinct visual variations of a component or page, exploring divergent styles, layouts, and aesthetic directions. Use when the user wants to explore design alternatives, iterate on a UI with variety, compare visual approaches, or generate multiple versions of a component or page.

Changelog: Source: GitHub https://github.com/B1u3B01t/design-playground

Directory Structure

Current level: tree/master/skills/design-variations/

📄 SKILL.md 5.2 KB

SKILL.md

---
name: design-variations
description: Generates multiple distinct visual variations of a component or page, exploring divergent styles, layouts, and aesthetic directions. Use when the user wants to explore design alternatives, iterate on a UI with variety, compare visual approaches, or generate multiple versions of a component or page.
---

# Design Variations

Generate a set of variations for a component or page that are **meaningfully different from each other**. Each iteration must take a distinct creative direction—different layout strategy, different visual mood, different typographic personality, different spatial philosophy. Never converge toward a single "safe" middle ground.

## Core Principle

**Diverge first, converge later.** The goal is to expand the design space, not to find the "best" version. Treat each variation as a committed exploration of one specific direction, executed with full conviction.

## Generating Variations

### 1. Choose Divergent Axes

Before generating, pick **different axes of variation** across iterations. Rotate through these dimensions so no two variations share the same combination:

| Axis | Example Poles |
|------|---------------|
| **Layout** | Centered single-column ↔ Asymmetric split ↔ Grid mosaic ↔ Full-bleed edge-to-edge ↔ Overlapping layers ↔ Stacked cards ↔ Sidebar-dominant ↔ Z-pattern flow |
| **Density** | Spacious with breathing room ↔ Compact and information-dense |
| **Mood** | Warm and approachable ↔ Cold and clinical ↔ Bold and confrontational ↔ Quiet and meditative ↔ Playful and irreverent ↔ Luxurious and refined |
| **Typography** | Large editorial display type ↔ Monospaced utilitarian ↔ Serif-forward classic ↔ Handwritten/organic ↔ Condensed geometric sans ↔ Mixed-weight contrast |
| **Color strategy** | Monochromatic ↔ High-contrast duotone ↔ Rich polychromatic ↔ Muted earth tones ↔ Neon/saturated ↔ Black-and-white with one accent ↔ Pastel gradients |
| **Visual language** | Flat and minimal ↔ Skeuomorphic/textured ↔ Glassmorphic ↔ Brutalist ↔ Neumorphic ↔ Retro/vintage ↔ Futuristic/sci-fi ↔ Editorial/magazine |
| **Motion philosophy** | Static and confident ↔ Subtle micro-interactions ↔ Dramatic entrance choreography ↔ Continuous ambient motion |
| **Hierarchy** | Hero-image dominant ↔ Typography-led ↔ Data/content-first ↔ Illustration-driven ↔ Navigation-forward |

### 2. Commit to a Direction Per Variation

Each variation must:

- **Pick a clear stance** on at least 3–4 axes above and push it far
- **Not hedge**—if a variation is "minimalist," it should be aggressively minimal, not "sort of clean"
- **Feel like a different designer made it**—different taste, different influences, different priorities
- **Be production-quality**—opinionated does not mean rough; every variation should be polished and intentional

### 3. Avoid Sameness Traps

Common failure modes to actively avoid:

- Variations that only differ in color palette but share identical layout and typography
- "Safe" defaults creeping into every variation (rounded corners, card grids, centered hero)
- All variations converging to the same visual weight and density
- Repeating the same font family across variations
- Using the same component patterns (e.g., every variation has a card grid or the same button style)

### 4. Sequencing Strategy

When generating multiple variations in sequence:

- **Variation 1**: Start with whatever direction feels most natural for the brief—but commit fully
- **Variation 2**: Deliberately invert at least 2 major axes from Variation 1 (e.g., if V1 was spacious and dark, V2 should be dense and light)
- **Variation 3+**: Survey what you've already generated and fill gaps in the design space. What mood hasn't been explored? What layout structure hasn't been tried?
- **Never repeat** a layout skeleton. If you used a centered hero + grid below, that structure is spent

## When the User Specifies a Theme

If the user provides constraints (e.g., "dark mode," "corporate," "playful"), treat them as **boundaries, not destinations**:

- The constraint narrows the space—explore within it aggressively
- "Corporate" could mean Swiss-style grid precision, or mahogany-and-brass executive gravitas, or sleek SaaS dashboard, or bold startup energy
- Find the unexpected corners within the user's constraint
- Each variation should still feel distinctly different from the others while respecting the boundary

## What Makes a Good Variation Set

A strong set of variations should:

- Make the user say "I hadn't thought of that" at least once
- Include at least one direction that feels surprising or uncomfortable
- Cover meaningfully different layout structures
- Show range in visual density and spatial rhythm
- Demonstrate different typographic personalities
- Feel like a design studio presented their best competing concepts

## Implementation Quality

Every variation must be:

- Fully functional with working interactions
- Responsive and well-structured
- Visually polished—no placeholder styling or half-committed aesthetics
- Self-consistent—each variation should feel like a complete, intentional design, not a fragment

Execute each direction with full conviction. Half-measures produce mediocre variations that don't help anyone make decisions.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

design-variations

Directory Structure

SKILL.md

Report

Notice