🔗 View on GitHub: anthropics/skills/frontend-design
🚀 Quick Installation
Create distinctive, production-grade frontend interfaces with high design quality.
Claude Code Plugin
/plugin marketplace add anthropics/skills
/plugin install creative-skills@anthropic-agent-skillsWhat It Does
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Use this skill when:
- 🎨 Building web components, pages, or applications
- 🖼️ Creating landing pages, dashboards, or posters
- ✨ Styling/beautifying any web UI
- 🎯 Generating creative, polished code and UI design
Design Philosophy
BOLD Aesthetic Direction
Before coding, commit to a clear conceptual direction:
- Purpose — What problem does this interface solve? Who uses it?
- Tone — Brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
- Differentiation — What makes this UNFORGETTABLE?
Key Focus Areas
Typography
- Choose beautiful, unique, and interesting fonts
- Avoid generic fonts like Arial and Inter
- Pair distinctive display font with refined body font
Color & Theme
- Commit to a cohesive aesthetic with CSS variables
- Dominant colors with sharp accents outperform timid palettes
Motion
- Use CSS-only solutions for HTML
- Use Motion library for React when available
- Focus on high-impact moments: well-orchestrated page loads with staggered reveals
Spatial Composition
- Unexpected layouts, asymmetry, overlap, diagonal flow
- Grid-breaking elements, generous negative space OR controlled density
Backgrounds & Visual Details
- Gradient meshes, noise textures, geometric patterns
- Layered transparencies, dramatic shadows, decorative borders
- Custom cursors, grain overlays
What to Avoid
- ❌ Generic font families (Inter, Roboto, Arial, system fonts)
- ❌ Cliched color schemes (purple gradients on white backgrounds)
- ❌ Predictable layouts and component patterns
- ❌ Cookie-cutter design lacking context-specific character
Example Usage
"Create a landing page for my startup"
"Build a dashboard with a dark theme"
"Design a portfolio website"
"Create a poster for my event"