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:

1. Purpose: What problem does this solve? Who is it for?
2. Tone: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc.
3. Intelligence (Reference): Use the internal design tool to gather data (see below).
4. 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 "\x3Cproduct_type> \x3Cindustry> \x3Ckeywords>" --design-system

# Search specific domains (style, typography, color, ux, chart, landing)
python scripts/search.py "\x3Ckeyword>" --domain \x3Cdomain>

# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)
python scripts/search.py "\x3Ckeyword>" --stack \x3Cstack_name>

Implementation Standards

1. Professional UI Rules

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.