frontend-design

Frontend Design Skill

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to typography, layout, motion, and atmosphere.

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 strong direction (brutalist, editorial, retro-futuristic, luxury, playful, utilitarian). Commit fully.
• Constraints: Framework, performance, accessibility, brand rules.
• Differentiation: Identify the one unforgettable visual idea.

Execution Guidelines

• Typography: Use distinctive fonts. Avoid generic system stacks (Inter, Roboto, Arial). Pair display and body type.
• Color: Define CSS variables. Choose dominant colors with sharp accents. Avoid default purple gradients on white.
• Motion: Favor a few high-impact moments (page-load, staggered reveals). Use CSS animations when possible.
• Layout: Break the grid when appropriate. Use asymmetry, overlap, or unexpected composition.
• Backgrounds: Add depth with gradients, texture, or shapes. Avoid flat, empty backgrounds.

Output Requirements

Provide working code that is:

• Production-grade and functional
• Visually striking and cohesive
• Explicit about the aesthetic direction
• Matched in complexity to the design intent

Response Checklist

Frontend Design Checklist

- [ ] Clarify purpose, audience, and constraints
- [ ] Declare a specific aesthetic direction
- [ ] Define typography and color system
- [ ] Design layout and motion moments
- [ ] Implement production-grade code
- [ ] Explain key visual decisions briefly