Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/design-systems
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.
---name: design-systems
description: Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.
---# Design Systems Skill
Frameworks for creating distinctive, memorable web designs that avoid generic "AI slop" aesthetics.
## Absolute Rules
- **NO EMOJIS**: Never use emojis anywhere in generated content - not in headings, paragraphs, button text, or any other text.
## Design Thinking Framework
Before designing, understand the context and commit to a BOLD aesthetic direction:
### 1. Purpose
- What problem does this design solve?
- Who uses it?
- What action should users take?
### 2. Tone
Do NOT pick from a fixed list of generic styles. Instead, derive every direction from the site's topic, industry, culture, and audience:
- **Think like a specialist designer** who has been hired for exactly this brief. What visual references would you research? What mood boards would you create? What real-world spaces, objects, materials, or cultural artefacts inform the aesthetic?
- **Ground each direction in the topic**. For a traditional restaurant, directions might explore rustic warmth, refined elegance, or cultural heritage — never brutalist concrete. For a tech startup, directions might explore clean precision, bold disruption, or data-driven minimalism — never cozy farmhouse.
- **Ensure authentic diversity**. The 4 directions should vary meaningfully in color palette, typography, layout approach, and mood — but every one must feel like a plausible, thoughtful design for *this specific type of site*. Diversity comes from exploring different facets of the topic, not from importing unrelated aesthetics.
- **Name each direction specifically**. Titles should reflect the topic-grounded concept (e.g., "Warm Heritage" or "Alpine Elegance" for a Swiss chalet site), not generic labels like "Minimalist" or "Bold".
What makes this UNFORGETTABLE? What's the one thing someone will remember?
## Frontend Aesthetics Guidelines
You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
### Typography
Choose fonts that are beautiful, unique, and interesting.
**AVOID (overused/generic):**
- Inter
- Roboto
- Arial
- System fonts
- Space Grotesk (overused by AI)
**PREFER (distinctive choices):**
- Pair a distinctive display font with a refined body font
- Match font personality to brand (tech: geometric sans; luxury: refined serif; creative: display fonts)
- Unexpected, characterful font choices that elevate the frontend's aesthetics
**Typography scale:**
- Use a consistent scale (1.25 or 1.333 ratio)
- Headings should command attention
- Body text should be comfortable to read (16-18px minimum)
### Color & Theme
Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
**Strategies:**
- **Monochromatic with accent**: Single color family + one pop color
- **Complementary contrast**: Two opposing colors (careful with saturation)
- **Analogous harmony**: Adjacent colors on the wheel
- **Dark mode**: Not just inverted - design specifically for dark
**AVOID:**
- Purple gradients on white backgrounds (cliched AI aesthetic)
- Evenly distributed rainbow palettes
- Low-contrast, washed-out schemes
- Generic blue (#007bff) as primary
- Timid, evenly-distributed palettes
**Color proportions:**
- 60% dominant (backgrounds, large areas)
- 30% secondary (containers, sections)
- 10% accent (CTAs, highlights)
### Motion & Animation
Motion is a design system element like color and typography — it should be intentional, cohesive, and matched to the site's personality. Prioritize CSS-only solutions.
**Technique palette** — choose from these categories to create a rich, dynamic experience:
| Category | Techniques |
|----------|-----------|
| Entrance animations | Fade-up, slide-in, scale-up, clip-path reveals — with staggered delays for groups |
- Use custom-designed SVG icons that align with the theme's aesthetic
- Maintain consistent stroke width and style
- Icons should complement, not compete with content
## Matching Complexity to Vision
**IMPORTANT**: Match implementation complexity to the aesthetic vision.
**Maximalist designs need:**
- Elaborate code with extensive animations
- Multiple visual layers
- Rich interactive effects
- Dense styling
**Minimalist designs need:**
- Restraint and precision
- Careful attention to spacing
- Subtle typography refinements
- Every detail intentional
Elegance comes from executing the vision well, not from adding more features.
## Design Variety and Variation
When generating multiple designs:
### Never Converge
- **NEVER converge** on the same choices across generations
- No design should be the same
- Avoid overused fonts (see AVOID list above) across generations
- Each design should feel genuinely different
### Vary Core Elements
**Color Variation:**
- Mix light and dark themes
- Mix warm and cool palettes
- Mix monochromatic and colorful approaches
**Typography Variation:**
- Use different font combinations each time
- Mix serif and sans-serif headings
- Mix elegant and bold type treatments
- Vary type scale and hierarchy
**Layout Variation:**
- Mix full-width and contained layouts
- Mix asymmetric and symmetric compositions
- Vary density (spacious vs. compact)
**Style Variation:**
- Explore different aesthetic territories
- Each design should feel like it could be the foundation for a distinct, complete website
- Avoid converging on similar solutions
**Ensure significant variation:** The designs should vary meaningfully in color palette, typography, layout approach, and mood — but every one must feel like a plausible, thoughtful design for the specific site context.
Remember: Extraordinary creative work requires committing fully to a distinctive vision. Don't hold back.
