Stats
Actions
Tags
From create-a-wp-site
Provides bold aesthetic guidance for web design decisions on typography, color, motion, spatial composition, and visual style to avoid generic aesthetics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/create-a-wp-site:design-systemsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Frameworks for creating distinctive, memorable web designs that 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.
npx claudepluginhub automattic/wordpress-agent-skills --plugin create-wp-siteGenerates distinctive frontend designs with extreme aesthetics like brutalist or maximalist, bold typography, committed color palettes, CSS motion, and asymmetric layouts when no brand system exists.
Generates distinctive production-grade frontend UIs for web components, pages, and apps with bold creative designs avoiding generic AI aesthetics.
Creates distinctive visual identities for new UIs like landing pages, marketing sites, prototypes, or greenfield frontend projects without design systems. Builds on frontend-design with unique typography, color palettes, and memorable elements.