| name | anthropic-frontend-design |
| version | 1.0.0 |
| description | Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Use when building bold, memorable UI components, pages, or applications. Guides design thinking before coding — establish aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.), typography, color theming, motion, spatial composition, and textural details. Generates working functional code (HTML/CSS/JS, React, Next.js, Vue) that matches implementation complexity to aesthetic vision. Explicitly avoids generic patterns — overused fonts, cliched color schemes, predictable layouts. |
| source | https://github.com/anthropics/skills (395.5K installs, |
| changelog | Initial install from Anthropic official skills repository |
Anthropic Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Design Thinking — Before Coding
Understand the context and commit to a BOLD aesthetic direction:
Purpose
What problem does this interface solve? Who uses it? What is the emotional response we want?
Tone
Pick an extreme and commit fully:
- Brutally minimal — Clean, quiet, every element earned
- Maximalist chaos — Abundant, rich, layered depth, visual drama
- Retro-futuristic — Nostalgia meets tomorrow
- Organic/natural — Living, breathing, fluid, tactile warmth
- Luxury/refined — Understated power, precision details
- Playful/toy-like — Joyful surprise, charming imperfection
- Editorial/magazine — Narrative flow, staggered hierarchy
- Brutalist/raw — Honest, utilitarian, anti-design design
- Art deco/geometric — Precision geometry, golden ratio
- Soft/pastel — Gentle, approachable, warm
- Industrial/utilitarian — Functional beauty, exposed structure
- Cyber/futuristic — Tomorrow aesthetic, light + motion
Differentiation
What makes this UNFORGETTABLE? What is the ONE thing someone will remember?
CRITICAL: Bold maximalism and refined minimalism both work — intentionality, not intensity.
Implementation Guidelines
Generate working code (HTML/CSS/JS, React, Vue, Next.js) that is:
- Production-grade and fully functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
Frontend Aesthetics Pillars
Typography
Choose fonts that are beautiful, unique, and characterful. Avoid generic fonts (Arial, Inter, Roboto, system-ui). Pair a distinctive display font with a refined body font. Each project should feel different — never converge on the same choices.
Color and Theme
Commit to a cohesive aesthetic using CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. One unexpected accent color creates more impact than 7 balanced colors.
Motion
Use animations for effects and micro-interactions. Prioritize CSS-only for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. Each layout should tell a story.
Backgrounds and Visual Details
Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
NEVER Use Generic AI Aesthetics
Explicitly avoid:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cliched color schemes (purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character
Complexity Matching
Match implementation complexity to the aesthetic vision:
- Maximalist designs need elaborate code with extensive animations and effects
- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details
Elegance comes from executing the vision well, not from adding more.
Integration
This skill integrates with:
- ui-ux-pro-max — Design system tokens and data assets complement this framework
- extraordinary-web-design — Psychology-first design architecture provides the strategic layer
- gsap-animations — Animation engineering for scroll-driven and timeline choreography
- fullstack-dev — Next.js implementation of designs
- grill-me — Adversarial review of aesthetic choices before shipping
- humanizer — Content and microcopy humanization
Activation Triggers
- User mentions: "frontend design", "UI component", "build a page", "landing page"
- User asks for: distinctive interfaces, bold aesthetics, creative web design
- User needs: production-grade frontend code with exceptional visual quality
