Instantly eliminates "AI slop" and forces Claude to output truly creative, distinctive, production-grade frontend designs. Loads the exact blog XML + bonus sub-skills. Use for any UI, landing page, dashboard, component, or artifact.
Generated by skill-creator • Based directly on Claude official blog (Nov 12, 2025)
<frontend_aesthetics> 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.
Focus on:
Avoid generic AI-generated aesthetics:
Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box! </frontend_aesthetics>
<use_interesting_fonts> Typography instantly signals quality. Avoid using boring, generic fonts.
Never use: Inter, Roboto, Open Sans, Lato, default system fonts
Impact choices: JetBrains Mono, Fira Code, Space Grotesk, Playfair Display, Crimson Pro, Clash Display, Satoshi, Bricolage Grotesque, Obviously...
Pairing principle: High contrast. Use extremes in weight and size. State your font choice before coding and load from Google Fonts. </use_interesting_fonts>
<always_use_rpg_theme> <!-- or swap with solarpunk etc. --> Always design with RPG aesthetic: Fantasy-inspired rich tones, ornate borders, parchment textures, epic atmosphere, medieval-inspired serif headers. </always_use_rpg_theme>
Before final response, check: ✅ No Inter / purple gradient ✅ At least one unexpected choice ✅ Font declared + CSS variable used ✅ Motion or depth present