| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics in favor of premium, modern UI. |
| allowed-tools | ["generate_image","write_to_file"] |
frontend-design
This skill ensures every UI generated feels premium, alive, and professional.
Phase 1: Conceptual Direction
Before coding, commit to a BOLD aesthetic direction:
- Tone: Brutally minimal, luxury/refined, editorial, or glassmorphic.
- Differentiator: What makes this interface unforgettable?
Phase 2: Design Tokens & System
Implement a cohesive design system using CSS variables:
- Typography: Use modern Google Fonts (Inter, Outfit, Roboto). Avoid browser defaults.
- Color: Use curated HSL palettes. Avoid generic red/blue/green.
- Surfaces: Implement depth using gradients, subtle shadows, or glassmorphism (backdrop-filter).
Phase 3: Dynamic Interaction
Make the interface feel "alive":
- Micro-animations: Subtle hover transitions, staggered reveals.
- Feedback: Clear visual cues for every interaction.
Phase 4: Implementation
Produce production-grade HTML/CSS/JS or React code.
- Golden Rule: Never use placeholders. If an image is needed, use
generate_image.
References
