Frontend Design Expert
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
- Constraints: Technical requirements (framework, performance, accessibility)
- Differentiation: What makes this UNFORGETTABLE?
CRITICAL: Choose a clear conceptual direction and execute it with precision.
Core Principles
- Typography: Choose distinctive fonts - avoid Arial, Inter, Roboto
- Color & Theme: Commit to cohesive aesthetic with CSS variables
- Motion: Use animations for effects and micro-interactions
- Spatial Composition: Unexpected layouts, asymmetry, grid-breaking elements
- Backgrounds: Create atmosphere with gradients, textures, patterns
NEVER Use
- Overused fonts (Inter, Roboto, Arial, system fonts)
- Cliched purple gradients on white backgrounds
- Predictable layouts and cookie-cutter design
- Generic "AI-generated" aesthetics
Implementation
For React projects, prefer:
- Tailwind CSS for styling
- Framer Motion for animations
- shadcn/ui components as base (customize heavily)
For HTML projects:
- CSS-only animations where possible
- Modern CSS features (grid, flexbox, variables)
- Performance-optimized assets
Detailed References
For comprehensive guidance, see these reference documents:
- references/typography.md - Font pairing and selection
- references/color-systems.md - Color theory and themes
- references/animation-patterns.md - Motion design
- references/layout-examples.md - Creative layouts
Quality Checklist
1---2name: frontend-design3description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.4---56# Frontend Design Expert78Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.910## Design Thinking1112Before coding, understand the context and commit to a BOLD aesthetic direction:1314- **Purpose**: What problem does this interface solve? Who uses it?15- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian16- **Constraints**: Technical requirements (framework, performance, accessibility)17- **Differentiation**: What makes this UNFORGETTABLE?1819**CRITICAL**: Choose a clear conceptual direction and execute it with precision.2021## Core Principles22231. **Typography**: Choose distinctive fonts - avoid Arial, Inter, Roboto242. **Color & Theme**: Commit to cohesive aesthetic with CSS variables253. **Motion**: Use animations for effects and micro-interactions264. **Spatial Composition**: Unexpected layouts, asymmetry, grid-breaking elements275. **Backgrounds**: Create atmosphere with gradients, textures, patterns2829## NEVER Use3031- Overused fonts (Inter, Roboto, Arial, system fonts)32- Cliched purple gradients on white backgrounds33- Predictable layouts and cookie-cutter design34- Generic "AI-generated" aesthetics3536## Implementation3738For React projects, prefer:39- Tailwind CSS for styling40- Framer Motion for animations41- shadcn/ui components as base (customize heavily)4243For HTML projects:44- CSS-only animations where possible45- Modern CSS features (grid, flexbox, variables)46- Performance-optimized assets4748## Detailed References4950For comprehensive guidance, see these reference documents:5152- [references/typography.md](references/typography.md) - Font pairing and selection53- [references/color-systems.md](references/color-systems.md) - Color theory and themes54- [references/animation-patterns.md](references/animation-patterns.md) - Motion design55- [references/layout-examples.md](references/layout-examples.md) - Creative layouts5657## Quality Checklist5859- [ ] Distinctive aesthetic direction chosen60- [ ] Typography is memorable and appropriate61- [ ] Color palette is cohesive62- [ ] Animations enhance experience63- [ ] Code is production-ready64- [ ] Responsive design implemented65- [ ] Accessibility considered
amo-tech-ai