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.
npx claudepluginhub automattic/wordpress-agent-skills --plugin create-wp-siteThis skill uses the workspace's default tool permissions.
Frameworks for creating distinctive, memorable web designs that avoid generic "AI slop" aesthetics.
Verifies tests pass on completed feature branch, presents options to merge locally, create GitHub PR, keep as-is or discard; executes choice and cleans up worktree.
Guides root cause investigation for bugs, test failures, unexpected behavior, performance issues, and build failures before proposing fixes.
Writes implementation plans from specs for multi-step tasks, mapping files and breaking into TDD bite-sized steps before coding.
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.