// 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.
Extract comprehensive site specifications from simple descriptions. Use when analyzing a user's theme request to determine site type, audience, tone, layout requirements, and typography.
Extract comprehensive site specifications from simple descriptions. Use when analyzing a user's theme request to determine site type, audience, tone, layout requirements, and typography.
WordPress Full Site Editing (FSE) theme architecture. Use when generating theme.json, block templates, template parts, patterns, and functions.php for WordPress block themes.
| 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. |
Frameworks for creating distinctive, memorable web designs that avoid generic "AI slop" aesthetics.
Before designing, understand the context and commit to a BOLD aesthetic direction:
Do NOT pick from a fixed list of generic styles. Instead, derive every direction from the site's topic, industry, culture, and audience:
What makes this UNFORGETTABLE? What's the one thing someone will remember?
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.
Choose fonts that are beautiful, unique, and interesting.
AVOID (overused/generic):
PREFER (distinctive choices):
Typography scale:
Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Strategies:
AVOID:
Color proportions:
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 |
| Hover/focus transitions | Card lifts, button transforms, underline grows, color shifts, shadow deepens |
| Continuous subtle motion | Floating elements, pulsing accents, slow-rotating decorative shapes, gradient shifts |
| Scroll-triggered reveals | Sections/elements animate as they enter the viewport |
| Background animation | Gradient color cycling, pattern movement, ambient drift |
| Text effects | Letter-spacing transitions, weight shifts, color wipes on headings |
CSS animation patterns:
/* Staggered fade-up entrance */
.fade-up {
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.6s ease forwards;
}
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
/* Slide-in from side */
.slide-in-left {
opacity: 0;
transform: translateX(-40px);
animation: slideInLeft 0.7s ease forwards;
}
@keyframes slideInLeft {
to { opacity: 1; transform: translateX(0); }
}
/* Scale reveal */
.scale-up {
opacity: 0;
transform: scale(0.9);
animation: scaleUp 0.5s ease forwards;
}
@keyframes scaleUp {
to { opacity: 1; transform: scale(1); }
}
/* Continuous float — decorative elements */
.float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Gradient background animation */
.gradient-shift {
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Hover transitions */
.hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
/* Accessibility: always include */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Orchestration guidance:
Break out of predictable layouts. Use unexpected layouts and avoid generic patterns:
Interpret creatively and make unexpected choices that feel genuinely designed for the context.
Create atmosphere and depth rather than defaulting to solid colors:
| Technique | Use Case |
|---|---|
| Gradient meshes | Modern, dynamic feel |
| Noise textures | Warmth, tactile quality |
| Geometric patterns | Tech, precision |
| Layered transparencies | Depth, sophistication |
| Dramatic shadows | Premium, elevated |
| Decorative borders | Editorial, structured |
| Grain overlays | Vintage, analog feel |
IMPORTANT: Match implementation complexity to the aesthetic vision.
Maximalist designs need:
Minimalist designs need:
Elegance comes from executing the vision well, not from adding more features.
When generating multiple designs:
Color Variation:
Typography Variation:
Layout Variation:
Style Variation:
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.