Anthropic Frontend Design

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It integrates structured design intelligence (accessibility, UX rules, stack guidelines) with a bold, intentional aesthetic philosophy.

Core Philosophy: Anti-AI Slop

Claude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns.

AVOID: Inter, Roboto, Arial, system fonts, purple-on-white gradients, cookie-cutter SaaS layouts, emojis as icons.
MANDATE: Unique typography, context-specific color schemes, intentional motion, unexpected spatial composition, and production-grade functional code.

Design Thinking Process

Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this solve? Who is it for?
Tone: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc.
Intelligence (Reference): Use the internal design tool to gather data (see below).
Differentiation: What makes this UNFORGETTABLE?

Design Intelligence Tool

Use the internal search tool to gather palettes, font pairings, and UX guidelines. CRITICAL: You MUST filter the results through the Anti-AI Slop lens. If the tool suggests "Inter" or "Roboto", you are REQUIRED to ignore it and pick a distinctive alternative.

# Generate a complete design system
python scripts/search.py "<product_type> <industry> <keywords>" --design-system
Search specific domains (style, typography, color, ux, chart, landing)
python scripts/search.py "<keyword>" --domain <domain>
Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)
python scripts/search.py "<keyword>" --stack <stack_name>

Implementation Standards

1. Professional UI Rules

Rule	Do	Don't
Icons	Use SVG (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Typography	Beautiful, unique Google/Custom fonts	Inter, Roboto, Arial, System fonts
Hover	Stable transitions (color/opacity/shadow)	Scale transforms that shift layout
Cursor	Add `cursor-pointer` to all interactive items	Leave default cursor on buttons/cards
Contrast	Minimum 4.5:1 for accessibility	Low-contrast "vibes" that are unreadable

2. Motion & Animation

Prioritize CSS-only solutions where possible.
Focus on high-impact moments (staggered reveals on page load).
Use duration 150-300ms for micro-interactions.

3. Spatial Composition

Use asymmetry, overlap, or diagonal flow to break standard grids.
Balance generous negative space OR intentional density.

Pre-Delivery Checklist

Before delivering code, verify every item:

Visual Quality

No emojis used as icons (SVG only).
Typography is characterful and NOT "AI standard".
Color scheme is unique to the context (no generic gradients).
Hover states provide clear, stable visual feedback.

UX & Accessibility

All interactive elements have
```
cursor-pointer
```
.
Form inputs have labels; images have alt text.
Text contrast meets 4.5:1 minimum (test Light/Dark modes).
Responsive at all breakpoints (375px, 768px, 1024px, 1440px).
No horizontal scroll on mobile.

Aesthetic Directions (Reference)

Brutally Minimal: Monochrome, extreme white space, sparse typography.
Maximalist Chaos: Overlapping elements, dense information, pattern mixing.
Retro-Futuristic: Chrome effects, neon accents, 80s-inspired.
Luxury/Refined: Gold/Dark accents, serif fonts, generous spacing.
Playful/Toy-like: Rounded corners, bright pastels, bouncy animations.
Editorial/Magazine: Grid-based, bold headlines, clean hierarchy.
Brutalist/Raw: Monospace fonts, harsh contrasts, industrial.
Art Deco: Sharp angles, metallic accents, ornate borders.

Commit to ONE direction and execute it fully—no half measures.

Anthropic Frontend Design

AI Skill Market Insights

Be Part of the 0+ Developer Community