Guides creation of distinctive, production-grade web interfaces with high design quality and non-generic aesthetics. Use when building or refining frontend components, pages, layouts, or applications; when the user wants creative UI, memorable visuals, typography, motion, or to avoid cookie-cutter AI-looking designs.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Before coding, understand the context and commit to a bold aesthetic direction:
Critical: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Focus on:
animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.Never lean on generic AI-generated aesthetics: overused font families (Inter, Roboto, Arial, default system stacks), clichéd color schemes (especially purple gradients on white), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. Do not converge on the same trendy choices (for example Space Grotesk) across unrelated work.
Important: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Commit fully to a distinctive vision—do not hold back on creative execution when the task calls for it.
Adapted from Anthropic’s frontend-design skill in the Claude Code repository.