Frontend Design Skill
Purpose
Generate distinctive, production-ready UI that avoids the generic "AI look" (Inter fonts, purple gradients, minimal animations).
Design Principles
Typography
- Avoid: Inter, Roboto, system defaults
- Prefer: Distinctive fonts like Space Grotesk, Outfit, Sora, Manrope, Plus Jakarta Sans
- Hierarchy: Use bold size contrasts (48px+ headers, 14-16px body)
- Weight variety: Mix weights for visual interest
Color Strategy
- Avoid: Purple gradients, pure black/white, default blues
- Prefer: Rich, saturated palettes with personality
- Dark themes: Use deep blues (#0a0f1a), warm blacks (#1a1a2e)
- Accents: Bold, unexpected colors (coral, electric blue, gold)
Backgrounds
- Avoid: Solid flat colors
- Prefer: Atmospheric effects - subtle gradients, noise textures, mesh gradients
- Techniques: CSS backdrop-filter, layered gradients, animated backgrounds
Animation & Motion
- Avoid: No animation or jarring transitions
- Prefer: Purposeful micro-interactions
- Elements: Hover states, loading feedback, scroll reveals
- Timing: Use spring physics (0.3-0.5s with easing)
Layout
- Avoid: Generic centered layouts
- Prefer: Asymmetric, editorial layouts with visual tension
- Spacing: Generous whitespace, consistent rhythm
- Grids: CSS Grid for complex layouts, Flexbox for components
Tech Stack Recommendations
React Projects
// Use Tailwind CSS + shadcn/ui + Framer Motion
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
Styling
- Tailwind CSS for utility-first styling
- CSS custom properties for theming
- shadcn/ui for accessible components
Animations
- Framer Motion for React
- CSS transitions for simple effects
- Spring-based timing functions
Component Patterns
Cards
<div className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 p-6 transition-all hover:scale-[1.02] hover:shadow-2xl">
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 transition-opacity group-hover:opacity-100" />
{/* content */}
</div>
Buttons
<button className="relative overflow-hidden rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 px-8 py-3 font-semibold text-white transition-all hover:shadow-lg hover:shadow-indigo-500/25">
<span className="relative z-10">Get Started</span>
</button>
Input Fields
<input className="w-full rounded-xl border-2 border-slate-700 bg-slate-800/50 px-4 py-3 text-white placeholder-slate-400 backdrop-blur transition-all focus:border-indigo-500 focus:outline-none focus:ring-4 focus:ring-indigo-500/20" />
Dashboard Patterns
KPI Cards
- Large numbers with trend indicators
- Subtle background gradients
- Icon badges with soft shadows
Data Tables
- Zebra striping with hover states
- Sticky headers
- Inline actions on hover
Charts
- Use Recharts or Chart.js
- Match chart colors to theme
- Add subtle grid lines
Instructions
- Analyze the context: Determine if it's a landing page, dashboard, app, or component
- Choose fonts: Select 1-2 distinctive fonts
- Define palette: Create cohesive color scheme with 1-2 accent colors
- Plan layout: Sketch the visual hierarchy mentally
- Build mobile-first: Start with mobile, enhance for larger screens
- Add motion: Include subtle animations for polish
- Test contrast: Ensure accessibility (WCAG 2.1 AA minimum)
Examples
Landing Page
- Hero with gradient mesh background
- Floating navigation with backdrop blur
- CTA buttons with glow effects
- Testimonial cards with avatar borders
Admin Dashboard
- Sidebar with icon navigation
- Header with search and notifications
- Card-based stats grid
- Data table with filters
Mobile App UI
- Bottom tab navigation
- Pull-to-refresh patterns
- Swipe gestures
- Haptic feedback indicators
Anti-Patterns to Avoid
❌ Inter or Roboto fonts everywhere
❌ Purple-to-blue gradients
❌ Pure white backgrounds
❌ No hover states
❌ Generic Bootstrap look
❌ Centered everything
❌ No visual hierarchy
❌ Missing loading states
Quality Checklist
1---2name: frontend-design-283description: Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling any web UI. Generates creative, polished code that avoids generic AI aesthetics.4---5
6# Frontend Design Skill
7
8## Purpose
9Generate distinctive, production-ready UI that avoids the generic "AI look" (Inter fonts, purple gradients, minimal animations).
10
11## Design Principles
12
13### Typography
14- **Avoid**: Inter, Roboto, system defaults
15- **Prefer**: Distinctive fonts like Space Grotesk, Outfit, Sora, Manrope, Plus Jakarta Sans
16- **Hierarchy**: Use bold size contrasts (48px+ headers, 14-16px body)
17- **Weight variety**: Mix weights for visual interest
18
19### Color Strategy
20- **Avoid**: Purple gradients, pure black/white, default blues
21- **Prefer**: Rich, saturated palettes with personality
22- **Dark themes**: Use deep blues (#0a0f1a), warm blacks (#1a1a2e)
23- **Accents**: Bold, unexpected colors (coral, electric blue, gold)
24
25### Backgrounds
26- **Avoid**: Solid flat colors
27- **Prefer**: Atmospheric effects - subtle gradients, noise textures, mesh gradients
28- **Techniques**: CSS backdrop-filter, layered gradients, animated backgrounds
29
30### Animation & Motion
31- **Avoid**: No animation or jarring transitions
32- **Prefer**: Purposeful micro-interactions
33- **Elements**: Hover states, loading feedback, scroll reveals
34- **Timing**: Use spring physics (0.3-0.5s with easing)
35
36### Layout
37- **Avoid**: Generic centered layouts
38- **Prefer**: Asymmetric, editorial layouts with visual tension
39- **Spacing**: Generous whitespace, consistent rhythm
40- **Grids**: CSS Grid for complex layouts, Flexbox for components
41
42## Tech Stack Recommendations
43
44### React Projects
45```jsx
46// Use Tailwind CSS + shadcn/ui + Framer Motion
47import { motion } from 'framer-motion';
48import { Button } from '@/components/ui/button';
49```
50
51### Styling
52- Tailwind CSS for utility-first styling
53- CSS custom properties for theming
54- shadcn/ui for accessible components
55
56### Animations
57- Framer Motion for React
58- CSS transitions for simple effects
59- Spring-based timing functions
60
61## Component Patterns
62
63### Cards
64```jsx
65<div className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 p-6 transition-all hover:scale-[1.02] hover:shadow-2xl">
66 <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 transition-opacity group-hover:opacity-100" />
67 {/* content */}
68</div>
69```
70
71### Buttons
72```jsx
73<button className="relative overflow-hidden rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 px-8 py-3 font-semibold text-white transition-all hover:shadow-lg hover:shadow-indigo-500/25">
74 <span className="relative z-10">Get Started</span>
75</button>
76```
77
78### Input Fields
79```jsx
80<input className="w-full rounded-xl border-2 border-slate-700 bg-slate-800/50 px-4 py-3 text-white placeholder-slate-400 backdrop-blur transition-all focus:border-indigo-500 focus:outline-none focus:ring-4 focus:ring-indigo-500/20" />
81```
82
83## Dashboard Patterns
84
85### KPI Cards
86- Large numbers with trend indicators
87- Subtle background gradients
88- Icon badges with soft shadows
89
90### Data Tables
91- Zebra striping with hover states
92- Sticky headers
93- Inline actions on hover
94
95### Charts
96- Use Recharts or Chart.js
97- Match chart colors to theme
98- Add subtle grid lines
99
100## Instructions
101
1021. **Analyze the context**: Determine if it's a landing page, dashboard, app, or component
1032. **Choose fonts**: Select 1-2 distinctive fonts
1043. **Define palette**: Create cohesive color scheme with 1-2 accent colors
1054. **Plan layout**: Sketch the visual hierarchy mentally
1065. **Build mobile-first**: Start with mobile, enhance for larger screens
1076. **Add motion**: Include subtle animations for polish
1087. **Test contrast**: Ensure accessibility (WCAG 2.1 AA minimum)
109
110## Examples
111
112### Landing Page
113- Hero with gradient mesh background
114- Floating navigation with backdrop blur
115- CTA buttons with glow effects
116- Testimonial cards with avatar borders
117
118### Admin Dashboard
119- Sidebar with icon navigation
120- Header with search and notifications
121- Card-based stats grid
122- Data table with filters
123
124### Mobile App UI
125- Bottom tab navigation
126- Pull-to-refresh patterns
127- Swipe gestures
128- Haptic feedback indicators
129
130## Anti-Patterns to Avoid
131
132❌ Inter or Roboto fonts everywhere
133❌ Purple-to-blue gradients
134❌ Pure white backgrounds
135❌ No hover states
136❌ Generic Bootstrap look
137❌ Centered everything
138❌ No visual hierarchy
139❌ Missing loading states
140
141## Quality Checklist
142
143- [ ] Typography has personality
144- [ ] Colors are cohesive and branded
145- [ ] Backgrounds have depth
146- [ ] Animations are smooth
147- [ ] Layout has visual rhythm
148- [ ] Components are accessible
149- [ ] Mobile responsive
150- [ ] Dark mode considered
diegosouzapw