frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications.
When & Why to Use This Skill
The Frontend Design skill is a specialized tool for generating high-fidelity, production-grade frontend interfaces and web components. Unlike generic code generators, it focuses on 'design-first' engineering, ensuring that every output features sophisticated typography, intentional layouts, and high-impact motion. It bridges the gap between creative vision and functional code, making it an essential asset for developers who need to build visually striking, accessible, and performant web applications that stand out from standard templates.
Use Cases
- Bespoke Landing Page Creation: Rapidly develop unique, production-ready landing pages with specific aesthetic directions such as brutalist, editorial, or luxury styles.
- High-End UI Component Libraries: Generate a cohesive set of custom web components (navigation, cards, modals) that utilize advanced CSS variables and distinctive design systems.
- Interactive UX Enhancement: Implement sophisticated motion design and staggered reveal animations to improve user engagement and create a premium feel for web applications.
- Design-to-Code Implementation: Translate complex visual concepts into functional, accessible, and responsive code that maintains high design integrity across all devices.
| name | frontend-design |
|---|---|
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications. |
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