Frontend Design
Create distinctive, production-grade interfaces that avoid the generic "AI slop" aesthetic.
Workflow
- Detect stack: Read
package.json/equivalent, check existing component patterns, match project conventions. Greenfield → ask user or infer.
- Design direction: Commit to a clear aesthetic before writing code — see below.
- Implement: Working code in whatever stack fits (React, Vue, Svelte, vanilla HTML/CSS/JS, Flutter, SwiftUI, terminal UI).
- Verify: Check the result matches the chosen direction, not generic defaults.
Design Thinking
Before coding, commit to a specific aesthetic direction:
- Purpose — What problem does this solve? Who uses it?
- Tone — Pick a concrete aesthetic (brutalist, editorial, retro-futuristic, luxury, playful, etc.) and commit fully. A strong point of view looks intentional; mixing styles looks accidental.
- Differentiation — What's the one thing someone will remember about this interface?
Banned Patterns
These produce the "AI-generated" look — sameness across every output:
- Fonts: Inter, Roboto, Arial, Space Grotesk, system fonts — the defaults every AI reaches for. Pick fonts that reinforce the aesthetic (Google Fonts has thousands).
- Colors: Purple gradients on white — the canonical AI palette. Build palettes from brand/purpose. Dominant color + sharp accents > rainbow.
- Layouts: Cookie-cutter symmetry, predictable card grids — telegraph "template." Break the grid.
Every generation must vary. Never converge on the same fonts, palettes, or layout patterns across sessions.
Execution
- Match complexity to vision: maximalist → elaborate animations; minimalist → precision in spacing and typography
- Typography: pair a distinctive display font with a refined body font
- Color: CSS variables/design tokens for consistency
- Motion: CSS-first; libraries (Motion, GSAP) when stack supports. One orchestrated page load > scattered micro-interactions
- Spatial: asymmetry, overlap, grid-breaking, generous negative space OR controlled density — pick one
- Backgrounds: atmosphere and depth over flat solid colors (gradients, noise, patterns, layered transparencies)
1---2name: frontend-design3description: Create distinctive, production-grade frontend interfaces with high design quality. Triggers: 'build UI', 'design component', 'create page', 'frontend', 'make it look good'. Works with any framework or vanilla HTML/CSS/JS.4---56# Frontend Design78Create distinctive, production-grade interfaces that avoid the generic "AI slop" aesthetic.910## Workflow11121. **Detect stack**: Read `package.json`/equivalent, check existing component patterns, match project conventions. Greenfield → ask user or infer.132. **Design direction**: Commit to a clear aesthetic before writing code — see below.143. **Implement**: Working code in whatever stack fits (React, Vue, Svelte, vanilla HTML/CSS/JS, Flutter, SwiftUI, terminal UI).154. **Verify**: Check the result matches the chosen direction, not generic defaults.1617## Design Thinking1819Before coding, commit to a specific aesthetic direction:20211. **Purpose** — What problem does this solve? Who uses it?222. **Tone** — Pick a concrete aesthetic (brutalist, editorial, retro-futuristic, luxury, playful, etc.) and commit fully. A strong point of view looks intentional; mixing styles looks accidental.233. **Differentiation** — What's the one thing someone will remember about this interface?2425## Banned Patterns2627These produce the "AI-generated" look — sameness across every output:2829- **Fonts:** Inter, Roboto, Arial, Space Grotesk, system fonts — the defaults every AI reaches for. Pick fonts that reinforce the aesthetic (Google Fonts has thousands).30- **Colors:** Purple gradients on white — the canonical AI palette. Build palettes from brand/purpose. Dominant color + sharp accents > rainbow.31- **Layouts:** Cookie-cutter symmetry, predictable card grids — telegraph "template." Break the grid.3233Every generation must vary. Never converge on the same fonts, palettes, or layout patterns across sessions.3435## Execution3637- **Match complexity to vision**: maximalist → elaborate animations; minimalist → precision in spacing and typography38- **Typography**: pair a distinctive display font with a refined body font39- **Color**: CSS variables/design tokens for consistency40- **Motion**: CSS-first; libraries (Motion, GSAP) when stack supports. One orchestrated page load > scattered micro-interactions41- **Spatial**: asymmetry, overlap, grid-breaking, generous negative space OR controlled density — pick one42- **Backgrounds**: atmosphere and depth over flat solid colors (gradients, noise, patterns, layered transparencies)
luan