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
UX & Accessibility
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.
1---2name: anthropic-frontend-design3description: Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Combines the design intelligence of UI/UX Pro Max with Anthropic's anti-slop philosophy. Use for building UI components, pages, applications, or interfaces with exceptional attention to detail and bold creative choices.4---5
6# Anthropic Frontend Design
7
8This 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.
9
10## Core Philosophy: Anti-AI Slop
11
12Claude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns.
13
14- **AVOID**: Inter, Roboto, Arial, system fonts, purple-on-white gradients, cookie-cutter SaaS layouts, emojis as icons.
15- **MANDATE**: Unique typography, context-specific color schemes, intentional motion, unexpected spatial composition, and production-grade functional code.
16
17---
18
19## Design Thinking Process
20
21Before coding, understand the context and commit to a BOLD aesthetic direction:
22
231. **Purpose**: What problem does this solve? Who is it for?
242. **Tone**: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc.
253. **Intelligence (Reference)**: Use the internal design tool to gather data (see below).
264. **Differentiation**: What makes this UNFORGETTABLE?
27
28---
29
30## Design Intelligence Tool
31
32Use 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.
33
34```bash
35# Generate a complete design system
36python scripts/search.py "<product_type> <industry> <keywords>" --design-system
37
38# Search specific domains (style, typography, color, ux, chart, landing)
39python scripts/search.py "<keyword>" --domain <domain>
40
41# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)
42python scripts/search.py "<keyword>" --stack <stack_name>
43```
44
45---
46
47## Implementation Standards
48
49### 1. Professional UI Rules
50
51| Rule | Do | Don't |
52|------|----|----- |
53| **Icons** | Use SVG (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
54| **Typography** | Beautiful, unique Google/Custom fonts | Inter, Roboto, Arial, System fonts |
55| **Hover** | Stable transitions (color/opacity/shadow) | Scale transforms that shift layout |
56| **Cursor** | Add `cursor-pointer` to all interactive items | Leave default cursor on buttons/cards |
57| **Contrast** | Minimum 4.5:1 for accessibility | Low-contrast "vibes" that are unreadable |
58
59### 2. Motion & Animation
60- Prioritize CSS-only solutions where possible.
61- Focus on high-impact moments (staggered reveals on page load).
62- Use duration 150-300ms for micro-interactions.
63
64### 3. Spatial Composition
65- Use asymmetry, overlap, or diagonal flow to break standard grids.
66- Balance generous negative space OR intentional density.
67
68---
69
70## Pre-Delivery Checklist
71
72Before delivering code, verify every item:
73
74### Visual Quality
75- [ ] No emojis used as icons (SVG only).
76- [ ] Typography is characterful and NOT "AI standard".
77- [ ] Color scheme is unique to the context (no generic gradients).
78- [ ] Hover states provide clear, stable visual feedback.
79
80### UX & Accessibility
81- [ ] All interactive elements have `cursor-pointer`.
82- [ ] Form inputs have labels; images have alt text.
83- [ ] Text contrast meets 4.5:1 minimum (test Light/Dark modes).
84- [ ] Responsive at all breakpoints (375px, 768px, 1024px, 1440px).
85- [ ] No horizontal scroll on mobile.
86
87---
88
89## Aesthetic Directions (Reference)
90
91- **Brutally Minimal**: Monochrome, extreme white space, sparse typography.
92- **Maximalist Chaos**: Overlapping elements, dense information, pattern mixing.
93- **Retro-Futuristic**: Chrome effects, neon accents, 80s-inspired.
94- **Luxury/Refined**: Gold/Dark accents, serif fonts, generous spacing.
95- **Playful/Toy-like**: Rounded corners, bright pastels, bouncy animations.
96- **Editorial/Magazine**: Grid-based, bold headlines, clean hierarchy.
97- **Brutalist/Raw**: Monospace fonts, harsh contrasts, industrial.
98- **Art Deco**: Sharp angles, metallic accents, ornate borders.
99
100*Commit to ONE direction and execute it fully—no half measures.*
johnalbertini14-glitch