Frontend Excellence
Create distinctive, memorable frontend interfaces that avoid "AI slop" aesthetics. Every interface should feel genuinely designed for its context.
Design Thinking Process
Before coding, commit to a BOLD aesthetic direction:
| Question |
Purpose |
| Purpose |
What problem does this interface solve? Who uses it? |
| Tone |
Pick an extreme: brutalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, art deco, soft pastel, industrial |
| Constraints |
Framework requirements, performance, accessibility |
| Differentiation |
What's the ONE thing someone will remember? |
Key insight: Bold maximalism and refined minimalism both work. The key is intentionality, not intensity.
Anti-Patterns (AI Slop)
❌ Never Use
Typography:
- Inter, Roboto, Arial, system fonts
- Space Grotesk (overused "good" choice)
- Default font stacks without character
Color:
- Purple gradients on white backgrounds
- Evenly-distributed, timid palettes
- Default framework colors
Layout:
- Excessive centered elements
- Predictable symmetric layouts
- Cookie-cutter component patterns
- Uniform rounded corners everywhere
What to Do Instead
Typography
| Technique |
Description |
| Extreme contrast |
72pt headlines vs 11pt body |
| All-caps headers |
With wide letter spacing |
| Monospace for data |
Technical content, stats, code |
| Display + body pairing |
Distinctive display font with refined body font |
| Outlined text |
For emphasis on bold backgrounds |
Color & Theme
Choose from or adapt these palettes:
Professional:
Classic Blue: #1C2833 #2E4053 #AAB7B8 #F4F6F6
Black & Gold: #BF9A4A #000000 #F4F6F6
Charcoal & Red: #292929 #E33737 #CCCBCB
Warm:
Teal & Coral: #5EA8A7 #277884 #FE4447 #FFFFFF
Warm Blush: #A49393 #EED6D3 #E8B4B8 #FAF7F2
Sage & Terracotta: #87A96B #E07A5F #F4F1DE #2C2C2C
Bold:
Bold Red: #C0392B #E74C3C #F39C12 #2ECC71
Vibrant Orange: #F96D00 #F2F2F2 #222831
Pink & Purple: #F8275B #FF574A #FF737D #3D2F68
Cool:
Deep Purple: #B165FB #181B24 #40695B #FFFFFF
Forest Green: #191A19 #4E9F3D #1E5128 #FFFFFF
Cream & Forest: #FFE1C7 #40695B #FCFCFC
Use dominant colors with sharp accents - this outperforms timid, evenly-distributed palettes.
Spatial Composition
| Pattern |
Description |
| Asymmetry |
Unequal column widths (30/70, 40/60, 25/75) |
| Overlap |
Elements breaking boundaries, layered depth |
| Diagonal flow |
Angled section dividers, rotated elements |
| Grid-breaking |
Strategic elements that escape the grid |
| Negative space |
Generous breathing room OR controlled density |
Visual Details
Geometric:
- Diagonal section dividers instead of horizontal
- Rotated text headers at 90° or 270°
- Circular/hexagonal frames for images
- Triangular accent shapes in corners
Borders & Frames:
- Thick single-color borders (10-20pt) on one side only
- Double-line borders with contrasting colors
- Corner brackets instead of full frames
- L-shaped borders (top+left or bottom+right)
- Underline accents beneath headers (3-5pt thick)
Backgrounds:
- Solid color blocks occupying 40-60% of slide/page
- Gradient fills (vertical or diagonal only)
- Split backgrounds (two colors, diagonal or vertical)
- Edge-to-edge color bands
- Noise textures, grain overlays
Motion & Animation
Prioritize high-impact moments:
- Page load - Staggered reveals using
animation-delay
- Scroll triggers - Elements entering viewport
- Hover states - Surprising transformations
One well-orchestrated page load creates more delight than scattered micro-interactions.
CSS-first for HTML, Motion library for React.
Implementation Rules
Match Complexity to Vision
- Maximalist designs → Elaborate code with extensive animations and effects
- Minimalist designs → Restraint, precision, careful spacing and typography
Elegance comes from executing the vision well.
Consistency
- Use CSS variables for colors:
--color-primary, --color-accent
- Establish spacing scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
- Repeat visual patterns across components
Accessibility
- Ensure sufficient contrast (WCAG AA minimum)
- Don't rely on color alone for meaning
- Maintain readable font sizes (16px body minimum)
- Test with keyboard navigation
Craftsmanship Standard
Create work that appears:
- Meticulously crafted - Every detail intentional
- Product of deep expertise - Professional-level execution
- Painstakingly refined - No rough edges
- Master-level implementation - Could be shown as portfolio work
The final result should look like it took countless hours by someone at the absolute top of their field.
1---2name: frontend-excellence-23description: Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web UIs, React components, landing pages, dashboards, or styling any web interface. Provides design thinking process, color palettes, typography treatments, and anti-patterns to avoid.4---5
6# Frontend Excellence
7
8Create distinctive, memorable frontend interfaces that avoid "AI slop" aesthetics. Every interface should feel genuinely designed for its context.
9
10## Design Thinking Process
11
12Before coding, commit to a BOLD aesthetic direction:
13
14| Question | Purpose |
15|----------|---------|
16| **Purpose** | What problem does this interface solve? Who uses it? |
17| **Tone** | Pick an extreme: brutalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, art deco, soft pastel, industrial |
18| **Constraints** | Framework requirements, performance, accessibility |
19| **Differentiation** | What's the ONE thing someone will remember? |
20
21**Key insight:** Bold maximalism and refined minimalism both work. The key is intentionality, not intensity.
22
23## Anti-Patterns (AI Slop)
24
25### ❌ Never Use
26
27**Typography:**
28- Inter, Roboto, Arial, system fonts
29- Space Grotesk (overused "good" choice)
30- Default font stacks without character
31
32**Color:**
33- Purple gradients on white backgrounds
34- Evenly-distributed, timid palettes
35- Default framework colors
36
37**Layout:**
38- Excessive centered elements
39- Predictable symmetric layouts
40- Cookie-cutter component patterns
41- Uniform rounded corners everywhere
42
43## What to Do Instead
44
45### Typography
46
47| Technique | Description |
48|-----------|-------------|
49| **Extreme contrast** | 72pt headlines vs 11pt body |
50| **All-caps headers** | With wide letter spacing |
51| **Monospace for data** | Technical content, stats, code |
52| **Display + body pairing** | Distinctive display font with refined body font |
53| **Outlined text** | For emphasis on bold backgrounds |
54
55### Color & Theme
56
57Choose from or adapt these palettes:
58
59**Professional:**
60```
61Classic Blue: #1C2833 #2E4053 #AAB7B8 #F4F6F6
62Black & Gold: #BF9A4A #000000 #F4F6F6
63Charcoal & Red: #292929 #E33737 #CCCBCB
64```
65
66**Warm:**
67```
68Teal & Coral: #5EA8A7 #277884 #FE4447 #FFFFFF
69Warm Blush: #A49393 #EED6D3 #E8B4B8 #FAF7F2
70Sage & Terracotta: #87A96B #E07A5F #F4F1DE #2C2C2C
71```
72
73**Bold:**
74```
75Bold Red: #C0392B #E74C3C #F39C12 #2ECC71
76Vibrant Orange: #F96D00 #F2F2F2 #222831
77Pink & Purple: #F8275B #FF574A #FF737D #3D2F68
78```
79
80**Cool:**
81```
82Deep Purple: #B165FB #181B24 #40695B #FFFFFF
83Forest Green: #191A19 #4E9F3D #1E5128 #FFFFFF
84Cream & Forest: #FFE1C7 #40695B #FCFCFC
85```
86
87**Use dominant colors with sharp accents** - this outperforms timid, evenly-distributed palettes.
88
89### Spatial Composition
90
91| Pattern | Description |
92|---------|-------------|
93| **Asymmetry** | Unequal column widths (30/70, 40/60, 25/75) |
94| **Overlap** | Elements breaking boundaries, layered depth |
95| **Diagonal flow** | Angled section dividers, rotated elements |
96| **Grid-breaking** | Strategic elements that escape the grid |
97| **Negative space** | Generous breathing room OR controlled density |
98
99### Visual Details
100
101**Geometric:**
102- Diagonal section dividers instead of horizontal
103- Rotated text headers at 90° or 270°
104- Circular/hexagonal frames for images
105- Triangular accent shapes in corners
106
107**Borders & Frames:**
108- Thick single-color borders (10-20pt) on one side only
109- Double-line borders with contrasting colors
110- Corner brackets instead of full frames
111- L-shaped borders (top+left or bottom+right)
112- Underline accents beneath headers (3-5pt thick)
113
114**Backgrounds:**
115- Solid color blocks occupying 40-60% of slide/page
116- Gradient fills (vertical or diagonal only)
117- Split backgrounds (two colors, diagonal or vertical)
118- Edge-to-edge color bands
119- Noise textures, grain overlays
120
121### Motion & Animation
122
123**Prioritize high-impact moments:**
124
1251. **Page load** - Staggered reveals using `animation-delay`
1262. **Scroll triggers** - Elements entering viewport
1273. **Hover states** - Surprising transformations
128
129One well-orchestrated page load creates more delight than scattered micro-interactions.
130
131**CSS-first for HTML, Motion library for React.**
132
133## Implementation Rules
134
135### Match Complexity to Vision
136
137- **Maximalist designs** → Elaborate code with extensive animations and effects
138- **Minimalist designs** → Restraint, precision, careful spacing and typography
139
140Elegance comes from executing the vision well.
141
142### Consistency
143
144- Use CSS variables for colors: `--color-primary`, `--color-accent`
145- Establish spacing scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
146- Repeat visual patterns across components
147
148### Accessibility
149
150- Ensure sufficient contrast (WCAG AA minimum)
151- Don't rely on color alone for meaning
152- Maintain readable font sizes (16px body minimum)
153- Test with keyboard navigation
154
155## Craftsmanship Standard
156
157Create work that appears:
158- **Meticulously crafted** - Every detail intentional
159- **Product of deep expertise** - Professional-level execution
160- **Painstakingly refined** - No rough edges
161- **Master-level implementation** - Could be shown as portfolio work
162
163The final result should look like it took countless hours by someone at the absolute top of their field.
majiayu000