| name | frontend-design |
| description | Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. |
Frontend Design Skill
This skill is designed to help the AI generate high-quality, production-grade frontend interfaces that prioritize rich aesthetics, visual excellence, and dynamic interactions.
Core Capabilities
- Bold Aesthetics: Move beyond generic designs. Use curated color palettes, elegant typography (e.g., Inter, Montserrat), and modern UI patterns.
- Glassmorphism & Depth: Implement subtle translucency, backdrop filters, and layered shadows to create sense of depth.
- Micro-animations: Add smooth transitions, hover effects, and interactive feedback to make the UI feel alive.
- Responsive Layouts: Ensure designs work flawlessly across different screen sizes.
- Semantic HTML & Modern CSS: Use standard-compliant code with a focus on CSS variables and modern layout techniques (Flexbox, Grid).
Usage Guidelines
When using this skill, focus on:
- Design First: Think about the user experience and visual impact before writing code.
- Harmonious Palettes: Avoid default colors. Use complementary and high-contrast palettes that feel premium.
- Typography: Prioritize legibility and hierarchy. Use different font weights and sizes to create a clear structure.
- Interactive Details: Add
:hover, :active, and :focus states to all interactive elements.
Example Prompts
- "Build a minimalist photo inspector with a glassmorphism sidebar."
- "Create a responsive grid for displaying image metadata with smooth entrance animations."
- "Design a dark mode theme for an EXIF editing dashboard using a sleek, deep blue and orange palette."
