Attribution: This skill is published by Anthropic in the official skills repo. The full canonical version, including reference materials and CSS/animation libraries, lives there. This page summarizes the skill so you can browse and install it from the Cendis library; for production use, follow the upstream repo for updates.
What it does
Guides Claude Code to produce frontend code with intentional aesthetic direction rather than the generic “AI default” look — Inter font, purple gradients, evenly-distributed neutral palette, predictable card grids. The skill pushes the agent to commit to a specific tone (brutalist, editorial, retro-futuristic, refined minimal, etc.) and execute it with precision.
When to use it
- Building landing pages, dashboards, or marketing sites where aesthetic matters
- Generating React/HTML/CSS components that will be seen by real users
- When you want the agent to make distinctive choices instead of safe defaults
- Pitching design directions for client work or internal tools
How it works
The skill instructs the agent to do design thinking before writing code:
- Purpose — what problem does this interface solve? Who uses it?
- Tone — pick an extreme aesthetic direction (no fence-sitting)
- Constraints — framework, performance, accessibility requirements
- Differentiation — what’s the one thing someone will remember?
Then it implements with attention to:
- Typography — distinctive display + body pairings, never Arial/Inter defaults
- Color — committed palettes with sharp accents, not timid neutrals
- Motion — high-impact moments (one orchestrated page-load reveal beats scattered micro-interactions)
- Spatial composition — asymmetry, overlap, intentional negative space
- Backgrounds and texture — gradient meshes, noise, grain, layered transparencies
Anti-patterns it explicitly bans
- Inter, Roboto, Arial, system-ui as the headline font
- Purple gradients on white backgrounds
- Cookie-cutter card grids with evenly-spaced shadows
- Converging on the same “Space Grotesk + dark gray” look across every project
Example invocation
“Build me a landing page for a developer-tool startup. Tone: editorial — think New Yorker meets a typographic poster. Single hero, generous serif display type, restrained palette.”
The agent will pick a distinctive serif, commit to a 2-color palette, design an asymmetric hero, and avoid every default React landing-page tic.
Why it matters
Most agent-generated UIs look the same because the agent is biased toward “safe” patterns it has seen most often in training data. Without a deliberate aesthetic instruction, you end up with a portfolio of interchangeable purple gradients. This skill counteracts that bias by forcing the agent to make a creative choice and execute it with conviction.
License
Published by Anthropic under their official skills repo. See LICENSE.txt for redistribution terms. Cendis hosts this entry as a discovery and install convenience; the upstream repo is the source of truth.