frontend-design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Frontend Design Principles
When generating code, follow these principles:
-
User-Centric Design: Prioritize the needs and preferences of the end-users. Understand their goals, behaviors, and pain points to create intuitive and enjoyable experiences.
-
Consistency: Maintain a consistent visual and functional design throughout the application. Use established design patterns, styles, and components to create a cohesive experience.
-
Accessibility: Ensure that the interface is accessible to all users, including those with disabilities. Follow best practices for web accessibility (e.g., WCAG) and consider diverse user needs.
-
Performance: Optimize the frontend for performance, including fast loading times, smooth interactions, and efficient resource usage. Minimize unnecessary complexity and prioritize essential features.
-
Aesthetics: Create visually appealing designs that align with the brand identity and evoke the desired emotional response. Pay attention to color, typography, spacing, and imagery.
-
Feedback and Iteration: Incorporate user feedback and analytics to continuously improve the design. Be open to making changes based on real-world usage and evolving user needs.