This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
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 a clear extreme: brutally minimal, maximalist chaos, luxury/refined, brutalist/raw, retro-futuristic, organic/soft, etc.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
Frontend Aesthetics Guidelines
Focus on:
- Typography: Choose distinctive fonts. Avoid Arial/Inter/Roboto. Pair a bold display font with refined body font.
- Color & Theme: Commit to cohesive aesthetic. Use CSS variables. Dominant colors with sharp accents outperform timid palettes.
- Motion: High-impact animations for page load with staggered reveals. Use CSS @keyframes for HTML, Framer Motion for React.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements.
- Backgrounds & Visual Details: Create atmosphere with gradient meshes, noise textures, patterns, layered transparencies, shadows.
NEVER use generic AI aesthetics: Inter/Roboto/Arial fonts, purple gradients on white, predictable layouts, cookie-cutter design lacking context-specific character. No design should be the same. NEVER converge on common choices (Space Grotesk, etc.).
IMPORTANT: Match code complexity to vision. Maximalist = elaborate animations. Minimalist = restraint and precision.
Design Process
Discovery → Understand requirements, audience, constraints → Define 3 key visual principles Concept → Choose aesthetic direction → Select fonts (1-2), colors (3-5), spacing scale Implement → Design tokens → Semantic HTML → Visuals → Motion → Polish Verify → Accessibility, responsiveness, performance
Design Token Detection
Before implementing, check if user's project has existing design tokens:
Check: tailwind.config.js, CSS :root variables, theme.js, styles/variables.css, styled-components themes
If found: Extract and use existing colors/typography/spacing. Follow naming conventions. Only add new tokens for gaps. If not found: Use templates/design-tokens-template.css or create inline matching chosen aesthetic.
Accessibility (Non-Negotiable)
WCAG 2.1 AA required. Creative freedom in aesthetics, NOT accessibility.
- Contrast: 4.5:1 text, 3:1 UI
- Keyboard: Tab/Enter/Escape work, visible focus, no traps
- Semantic HTML: h1-h6 hierarchy, landmarks, alt text
- Motion:
@media (prefers-reduced-motion: reduce)for all animations - Forms: Labels for all inputs, clear error messages
Rule: Accessibility wins. External ref: https://www.w3.org/WAI/WCAG21/quickref/
Responsive Design
Mobile-first. Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl).
- Fluid typography:
clamp(1rem, 0.5rem + 2vw, 2rem) - CSS Grid/Flexbox over fixed widths
- Touch targets: 44x44px minimum
- Test on real devices
Technical Patterns
Design Tokens: Follow this structure: fonts, colors, spacing, radius, shadows, animation timings (see templates/design-tokens-template.css for reference)
Animations:
- HTML/CSS: @keyframes with animation-delay for staggered effects
- React: Framer Motion for complex, CSS for simple
- Only animate transform/opacity
Code Quality:
- Semantic HTML (header, nav, main, article, section)
- BEM or Tailwind utilities
- Mobile-first CSS, no!important
- Performance: <50kb CSS, <3.5s TTI
Delivery Checklist: ✓ All states (hover/focus/loading/error) ✓ Responsive ✓ Accessible ✓ No console errors