frontend-design

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:

1. Design First: Think about the user experience and visual impact before writing code.
2. Harmonious Palettes: Avoid default colors. Use complementary and high-contrast palettes that feel premium.
3. Typography: Prioritize legibility and hierarchy. Use different font weights and sizes to create a clear structure.
4. 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."