Frontend Design

What it does

This skill assists in creating distinctive, production-grade frontend interfaces that move beyond typical AI-generated designs. It guides the development of HTML/CSS/JS code (including React and Vue) with a strong focus on aesthetic details and creative choices based on user-provided requirements for components, pages, or applications. The process emphasizes understanding context and committing to a clear, bold aesthetic direction before coding begins.

When to use it

• You want to create a frontend UI that stands out from generic AI designs.
• You need help defining an aesthetic direction (e.g., brutalist, maximalist, retro-futuristic) for your frontend project.
• You're looking for guidance on implementing specific visual elements like typography, color palettes, motion effects, and spatial composition in your frontend code.

Key capabilities

• Aesthetic Direction Guidance: Helps define a clear aesthetic direction (e.g., brutalist, maximalist) based on purpose, audience, and constraints.
• Production-Grade Code Generation: Generates functional HTML/CSS/JS code, including support for React and Vue frameworks.
• Typography Expertise: Provides guidance on choosing distinctive fonts beyond common defaults like Arial and Inter.
• Color & Theme Management: Encourages cohesive color palettes using CSS variables and impactful accent colors.
• Motion Design Integration: Suggests animations and micro-interactions, prioritizing CSS-only solutions and strategic use of animation libraries.
• Spatial Composition Techniques: Recommends techniques like asymmetry, overlap, diagonal flow, and creative use of negative space.

Example prompts

• "I need a component for an e-commerce site. The aesthetic should be 'luxury/refined'."
• "Create a page with a 'retro-futuristic' feel using React."
• "Suggest some unique font pairings for a website with a 'brutalist' design."

Tips & gotchas

• Define Your Aesthetic: Clearly articulating the desired aesthetic (e.g., brutalist, maximalist) is crucial for effective results.
• Avoid Generics: The skill specifically aims to avoid generic AI-generated aesthetics and common font choices. Be prepared to explore unconventional options.
• Intentionality is Key: Whether aiming for minimalism or maximalism, ensure the aesthetic direction is intentional and well-executed.