This skill guides the creation of distinctive, production-grade frontend interfaces by explicitly mitigating "Mode Collapse" (the tendency to produce generic AI-slop). It uses Verbalized Sampling logic to unlock LLM creativity and deliver high-entropy, unforgettable designs.
Phase 0: Context Discovery (do this first)
Before any design analysis, gather deep context from the user — every later phase depends on it. Use the AskUserQuestion tool to probe the following dimensions:
Discovery Dimensions
- Emotional Tone: What feeling or atmosphere should the design evoke? (e.g., "trustworthy", "edgy", "playful", "luxurious")
- Target Audience: Who will see this? What are their expectations and technical sophistication?
- Reference Points / Anti-References: What does the user want to emulate? What do they explicitly want to avoid?
- Business Context: What problem does this UI solve? What's the usage scenario?
Context Signals
- Analyze existing code if present—extract style patterns, color schemes, component conventions
- Parse user prompt for implicit context keywords (landing page, dashboard, portfolio, SaaS, etc.)
- Ask follow-up questions even if the initial prompt seems simple—surface the full vision in the user's mind
Do not proceed to Phase 1 until you have sufficient context. A vague prompt calls for more questions, not assumptions — guessing here produces exactly the generic output this skill exists to avoid.
Phase 1: Identify the Mode (The Generic Baseline)
- Verbalize the most predictable, high-probability (P ≈ 0.95) design for this request.
- Identify "AI-slop" markers based on the context. Common examples include:
- Inter/Roboto/System fonts
- Rounded blue/purple buttons
- Standard F-pattern layouts
- White backgrounds with gradient accents
- Generic hero sections with stock-style imagery
- Do not choose this baseline — it is the exact output this skill exists to avoid.
Phase 2: Sample the Long-Tail (Probability Mapping)
Generate three distinct aesthetic directions and assign a "Typicality Score" (T-Score) from 0 to 1.0 (where 1.0 is most generic):
- Direction A (T ≈ 0.7): Modern/Clean but safe.
- Direction B (T ≈ 0.4): Distinctive/Characterful (Specific niche style).
- Direction C (T < 0.2): Experimental/Bold (High-entropy, unexpected).
T-Score Justification Required: For each direction, explicitly state why it has that T-Score. What makes it more or less typical? Reference specific design choices.
Phase 3: Commit to Low-Typicality
Select the direction with the lowest T-Score that still meets:
- Functional requirements from Phase 0
- All Quality Guardrails (see below)
Commit to this bold aesthetic with intentionality. The choice must be deliberate, not accidental — a half-committed direction reads as noise rather than character.
Quality Guardrails (always required)
These principles must hold regardless of how experimental the design becomes — they are what separate a distinctive design from a broken one. If a Low-T direction violates any of these, increase T until compliance is achieved.
| Guardrail | Description | |-----------|-------------| | Visual Hierarchy | Clear priority ordering—the user's eye must know where to go first, second, third | | Contrast & Legibility | Text must be readable against its background (WCAG AA minimum) | | Internal Consistency | The design must follow its own logic—a coherent system, not random choices | | Functional Clarity | Interactive elements must be recognizable as such; affordances must be clear |
Anti-Patterns (explicit failures)
If your design exhibits these patterns, it has missed the skill's intent:
1. Accidental Design
- Making things "different" without intentionality
- Randomness masquerading as creativity
- Unable to articulate why a choice was made
- Test: If asked "why this color/font/layout?", you must have a coherent answer
2. Frankenstein Style
- Mixing incompatible aesthetics without synthesis
- No unifying design language
- Elements that feel like they belong to different projects
- Test: Could you describe this design's "personality" in one sentence?
Frontend Aesthetics Guidelines (VS-Enhanced)
Apply the "Inversion Principle": If a choice feels "obvious," it has too much probability mass. Consider the lower-probability, higher-impact alternative—but only if it serves the context.
Typography (Context-Aware Selection)
- AI-slop examples: Inter, Roboto, Arial, System fonts, Space Grotesk in default usage
- Low-T approach: High-character display faces paired with refined, unexpected body typefaces. Variable fonts, unusual weights.
- Keep in mind that the "right" font depends on context. A brutalist portfolio may use industrial sans-serifs; a luxury brand may use refined serifs.
Color & Theme (Chromatic Divergence)
- Avoid even distributions. Commit to a cohesive but "dissonant-yet-beautiful" palette.
- Use CSS variables for systematic theming.
- Prefer sophisticated textures, noise, and lighting over flat fills—when appropriate to context.
Spatial Composition (Anti-Grid Logic)
- If a standard grid is P=0.9, consider P=0.1 layouts: Asymmetry, overlapping elements, diagonal flows, or editorial-style whitespace.
- Caveat: Data-heavy interfaces (dashboards, tables) may require conventional grids for usability.
Motion (High-Impact Entropy)
- Focus on "Micro-delights": staggered reveals, scroll-bound transformations, custom eased transitions.
- Avoid motion for motion's sake—every animation should have purpose.
Strategic Frameworks (Context-Dependent)
When the user's goal involves persuasion or conversion (landing pages, marketing sites, product showcases), apply the AIDA Framework to structure the visual narrative:
AIDA Framework
| Stage | Goal | Design Application | |-------|------|-------------------| | Attention | Stop the scroll, create immediate visual impact | Hero section with bold typography, unexpected imagery, or striking color contrast | | Interest | Build curiosity, encourage exploration | Reveal information progressively, use visual storytelling, highlight unique value | | Desire | Create emotional connection, make them want it | Social proof, benefits visualization, aspirational imagery, micro-interactions | | Action | Drive conversion with clear next steps | High-contrast CTAs, reduced friction, urgency cues (when appropriate) |
When to Apply AIDA:
- Landing pages and marketing sites
- Product launch pages
- Portfolio pieces meant to attract clients
- Any UI where the primary goal is persuasion/conversion
When not to Apply AIDA:
- Dashboards and data-heavy interfaces (prioritize usability)
- Documentation or content-focused sites (prioritize readability)
- Internal tools (prioritize efficiency)
VS + AIDA Integration: Apply Low-T aesthetics to each stage of AIDA. A generic hero section fails at Attention; a predictable CTA fails at Action. The AIDA structure provides the "what," VS provides the "how."
Implementation Standards
- Production-Grade: Code must be functional, accessible (A11y), and performant.
- Complexity-Typicality Balance: As the design becomes more "Low-Probability," implementation complexity must increase proportionally to maintain quality.
- No Refusal on Complexity: Claude is capable of extraordinary creative work. Do not simplify the vision for brevity.
Execution Process Summary
[Phase 0] Context Discovery
↓ (AskUserQuestion tool - gather all dimensions)
[Phase 1] Identify the Mode
↓ (verbalize the generic baseline)
[Phase 2] Sample the Long-Tail
↓ (three directions with justified T-Scores)
[Phase 3] Commit to Low-Typicality
↓ (select lowest T that passes Guardrails)
[Phase 4] Execute Code
↓ (implement with meticulous attention)
[Phase 5] Surprise Check
↓ (does this look like typical AI output? if yes, refactor)
Final Validation
Before delivering, ask yourself:
- Intentionality: Can I justify every major design decision?
- Consistency: Does the design follow its own internal logic?
- Guardrails: Are hierarchy, legibility, consistency, and clarity preserved?
- Surprise: Would this stand out in a lineup of AI-generated designs?
The goal is to maximize "Surprise Score" while maintaining "Production Quality." Break the mold—deliberately.