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