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
1---2name: frontend-design3description: Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications.4---56# Frontend Design Skill78This 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.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 a strong direction (brutalist, editorial, retro-futuristic, luxury, playful, utilitarian). Commit fully.16- **Constraints**: Framework, performance, accessibility, brand rules.17- **Differentiation**: Identify the one unforgettable visual idea.1819## Execution Guidelines2021- **Typography**: Use distinctive fonts. Avoid generic system stacks (Inter, Roboto, Arial). Pair display and body type.22- **Color**: Define CSS variables. Choose dominant colors with sharp accents. Avoid default purple gradients on white.23- **Motion**: Favor a few high-impact moments (page-load, staggered reveals). Use CSS animations when possible.24- **Layout**: Break the grid when appropriate. Use asymmetry, overlap, or unexpected composition.25- **Backgrounds**: Add depth with gradients, texture, or shapes. Avoid flat, empty backgrounds.2627## Output Requirements2829Provide working code that is:3031- Production-grade and functional32- Visually striking and cohesive33- Explicit about the aesthetic direction34- Matched in complexity to the design intent3536## Response Checklist3738```markdown39Frontend Design Checklist4041- [ ] Clarify purpose, audience, and constraints42- [ ] Declare a specific aesthetic direction43- [ ] Define typography and color system44- [ ] Design layout and motion moments45- [ ] Implement production-grade code46- [ ] Explain key visual decisions briefly47```
nicholasgriffintn