Frontend Design Skill
Purpose: Create production-grade, distinctive UI that stands out from generic AI-generated designs
Quick Start
When to Use
- Building web UI components, pages, or applications
- Creating dashboard interfaces, landing pages, or marketing sites
- Styling React components, HTML/CSS layouts, or design systems
Quick Reference
| Category |
Key Principle |
Action |
| Fonts |
Avoid defaults |
Never use Inter as default |
| Colors |
Avoid gradients |
No purple-to-blue gradients |
| Layout |
Embrace asymmetry |
Break from rigid grids |
| Details |
Add texture |
Use noise, patterns, borders |
Core Principles
1. Choose an Aesthetic Direction
| Direction |
Characteristics |
Examples |
| Minimalist |
Clean, sparse, purposeful |
Stripe, Linear |
| Maximalist |
Bold, expressive, layered |
Brutalist sites |
| Warm/Human |
Organic textures, soft edges |
Notion, Gumroad |
| Technical/Precise |
Sharp edges, monospace |
Vercel, GitHub |
| Playful |
Bright colors, rounded |
Discord, Slack |
Action: Start with "I'll use a [direction] aesthetic for this."
2. Make Every Detail Intentional
- Default fonts → Never accept Inter as the default
- Gradients → Purple-to-blue is the most overused gradient
- Center alignment → Explore asymmetry and interesting layouts
- Flat colors → Add texture, noise, patterns, or subtle borders
3. Be Specific, Not Generic
Bad: "Use a nice color scheme" | Good: "Use a warm palette with coral (#FF6B6B) as primary, cream (#FFF8F0) background"
Typography & Color
Font Selection
⚠️ NEVER use Inter as the default font
| Category |
Font Families |
When to Use |
| Serif |
GT Super, Charter, Georgia |
Editorial, premium |
| Sans-Serif |
Geist, Satoshi, System UI |
Clean, modern (not Inter!) |
| Monospace |
Geist Mono, JetBrains Mono |
Technical, code |
| Display |
Clash Display, Syne |
Headlines, personality |
Typography Hierarchy: Headlines: 40-72px, tight tracking (-1% to -3%) | Body: 16-18px, loose tracking (0% to +2%)
Color Strategy
⚠️ Anti-Pattern: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); (purple-to-blue is everywhere)
Moods: Warm (coral, peach, cream) | Cool (teal, sage, slate) | Bold (red, yellow, black) | Muted (olive, rust, navy)
Palette example:
:root {
--primary: #FF6B6B; /* Coral */
--background: #FFF8F0; /* Cream */
--text: #2D3436;
--border: #E8E8E8;
}
Usage rules:
- Backgrounds: Off-white, cream, or dark (never pure #FFF)
- Borders: Subtle (opacity 0.1-0.2) or sharp black/white
- Gradients: Subtle, same-hue shifts (no purple-to-blue!)
Motion & Layout
Animation Principles
- Duration: 200-300ms for micro-interactions
- Easing:
ease-out for entry, ease-in for exit
- Spring physics:
cubic-bezier(0.34, 1.56, 0.64, 1)
- Examples: Hover: Scale up (1.02) | Click: Scale down (0.98) | Entry: Fade in + slide up (20px)
⚠️ Anti-Pattern: Over-Animation
Avoid: Spinning loaders, bounce effects, slow fade-ins (>500ms)
Layout Strategy
- Explore asymmetric layouts
- Use grid systems creatively
- Generous padding = premium feel
Component Spacing: Section (80-120px) | Component (24-32px) | Element (8-16px)
Anti-Patterns: The "AI Slop" Checklist
Implementation Tips
Tailwind CSS
/* Good: Specific values */
className="text-[17px] leading-[1.6] text-[#2D3436]"
/* Bad: Generic defaults */
className="text-base leading-normal text-gray-900"
React Components
const theme = { colors: { primary: '#FF6B6B' } };
<button style={{ backgroundColor: theme.colors.primary }} />
Further Reading
Internal: @.claude/skills/frontend-design/REFERENCE.md - Detailed examples, patterns, case studies
External: Refactoring UI
1---2name: frontend-design-253description: Production-grade frontend design skill for distinctive, non-generic UI development. Avoids "AI slop" aesthetics through specific aesthetic direction guidelines.4license: MIT5---6
7# Frontend Design Skill
8
9> **Purpose**: Create production-grade, distinctive UI that stands out from generic AI-generated designs
10
11---
12
13## Quick Start
14
15### When to Use
16
17- Building web UI components, pages, or applications
18- Creating dashboard interfaces, landing pages, or marketing sites
19- Styling React components, HTML/CSS layouts, or design systems
20
21### Quick Reference
22
23| Category | Key Principle | Action |
24|----------|---------------|--------|
25| **Fonts** | Avoid defaults | Never use Inter as default |
26| **Colors** | Avoid gradients | No purple-to-blue gradients |
27| **Layout** | Embrace asymmetry | Break from rigid grids |
28| **Details** | Add texture | Use noise, patterns, borders |
29
30## Core Principles
31
32### 1. Choose an Aesthetic Direction
33
34| Direction | Characteristics | Examples |
35|-----------|----------------|----------|
36| **Minimalist** | Clean, sparse, purposeful | Stripe, Linear |
37| **Maximalist** | Bold, expressive, layered | Brutalist sites |
38| **Warm/Human** | Organic textures, soft edges | Notion, Gumroad |
39| **Technical/Precise** | Sharp edges, monospace | Vercel, GitHub |
40| **Playful** | Bright colors, rounded | Discord, Slack |
41
42**Action**: Start with "I'll use a **[direction]** aesthetic for this."
43
44### 2. Make Every Detail Intentional
45
46- **Default fonts** → Never accept Inter as the default
47- **Gradients** → Purple-to-blue is the most overused gradient
48- **Center alignment** → Explore asymmetry and interesting layouts
49- **Flat colors** → Add texture, noise, patterns, or subtle borders
50
51### 3. Be Specific, Not Generic
52
53**Bad**: "Use a nice color scheme" | **Good**: "Use a warm palette with coral (#FF6B6B) as primary, cream (#FFF8F0) background"
54
55## Typography & Color
56
57### Font Selection
58
59**⚠️ NEVER use Inter as the default font**
60
61| Category | Font Families | When to Use |
62|----------|---------------|-------------|
63| **Serif** | GT Super, Charter, Georgia | Editorial, premium |
64| **Sans-Serif** | Geist, Satoshi, System UI | Clean, modern (not Inter!) |
65| **Monospace** | Geist Mono, JetBrains Mono | Technical, code |
66| **Display** | Clash Display, Syne | Headlines, personality |
67
68**Typography Hierarchy**: Headlines: 40-72px, tight tracking (-1% to -3%) | Body: 16-18px, loose tracking (0% to +2%)
69
70### Color Strategy
71
72**⚠️ Anti-Pattern**: `background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);` (purple-to-blue is everywhere)
73
74**Moods**: Warm (coral, peach, cream) | Cool (teal, sage, slate) | Bold (red, yellow, black) | Muted (olive, rust, navy)
75
76**Palette example**:
77```css
78:root {
79 --primary: #FF6B6B; /* Coral */
80 --background: #FFF8F0; /* Cream */
81 --text: #2D3436;
82 --border: #E8E8E8;
83}
84```
85
86**Usage rules**:
87- Backgrounds: Off-white, cream, or dark (never pure #FFF)
88- Borders: Subtle (opacity 0.1-0.2) or sharp black/white
89- Gradients: Subtle, same-hue shifts (no purple-to-blue!)
90
91## Motion & Layout
92
93### Animation Principles
94
95- **Duration**: 200-300ms for micro-interactions
96- **Easing**: `ease-out` for entry, `ease-in` for exit
97- **Spring physics**: `cubic-bezier(0.34, 1.56, 0.64, 1)`
98- **Examples**: Hover: Scale up (1.02) | Click: Scale down (0.98) | Entry: Fade in + slide up (20px)
99
100### ⚠️ Anti-Pattern: Over-Animation
101
102**Avoid**: Spinning loaders, bounce effects, slow fade-ins (>500ms)
103
104### Layout Strategy
105
106- Explore asymmetric layouts
107- Use grid systems creatively
108- Generous padding = premium feel
109
110**Component Spacing**: Section (80-120px) | Component (24-32px) | Element (8-16px)
111
112## Anti-Patterns: The "AI Slop" Checklist
113
114- [ ] **Inter font** default → Change
115- [ ] **Purple-to-blue gradient** → Different scheme
116- [ ] **Perfectly centered** → Explore asymmetry
117- [ ] **Pure white (#FFF)** → Add texture
118- [ ] **Generic shadows** → Use subtle
119- [ ] **No borders** → Add separation
120- [ ] **Rounded-xl everywhere** → Vary radius
121- [ ] **No texture/noise** → Add interest
122
123## Implementation Tips
124
125### Tailwind CSS
126
127```jsx
128/* Good: Specific values */
129className="text-[17px] leading-[1.6] text-[#2D3436]"
130
131/* Bad: Generic defaults */
132className="text-base leading-normal text-gray-900"
133```
134
135### React Components
136
137```jsx
138const theme = { colors: { primary: '#FF6B6B' } };
139<button style={{ backgroundColor: theme.colors.primary }} />
140```
141
142## Further Reading
143
144**Internal**: @.claude/skills/frontend-design/REFERENCE.md - Detailed examples, patterns, case studies
145
146**External**: [Refactoring UI](https://www.refactoringui.com/)
majiayu000