Skip to content
/frontend-designOfficial

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.

FrontendDesignUICSSReactWeb· 2 min read

Quick import: Download the .md file and save it to .claude/commands/ (Claude Code), .cursorrules (Cursor), or paste as a system prompt in ChatGPT, Gemini, or any LLM API.

#What it does

The Frontend Design skill creates distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It implements real working code with exceptional attention to aesthetic details, creative typography, bold color choices, and memorable visual identity.

#How to use

Activate when building web components, pages, artifacts, applications, dashboards, landing pages, or when styling any web UI.

Build a landing page for a developer tools product

Create a dashboard with a brutalist design aesthetic

#Skill instructions

#Design Thinking (Before Code)

Every interface starts with four questions:

  1. Purpose: What problem does this interface solve? Who uses it?
  2. Tone: Pick a bold aesthetic direction -- brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful, editorial, brutalist, art deco, industrial, etc.
  3. Constraints: Framework, performance, accessibility requirements
  4. Differentiation: What makes this unforgettable?

#Aesthetics Guidelines

  • Typography: Choose distinctive, characterful fonts. Avoid generic choices like Arial and Inter. Pair a display font with a refined body font.
  • Color and Theme: Commit to a cohesive aesthetic with CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • Motion: Focus on high-impact moments -- one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
  • Spatial Composition: Unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space or controlled density.
  • Backgrounds and Visual Details: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.

#What to Avoid

  • Overused fonts (Inter, Roboto, Arial, system fonts)
  • Cliched purple gradients on white backgrounds
  • Predictable layouts and cookie-cutter component patterns
  • Converging on the same choices across different generations

#Implementation

Match complexity to the vision. Maximalist designs need elaborate animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing and typography.

This skill is from the Anthropic Skills Repository.

Anthropic·
View all skills