Frontend Design Skill
Overview
This skill guides the creation of distinctive, production-grade frontend interfaces that avoid cookie-cutter "AI-generated" aesthetics. It emphasizes truly functional code with extreme attention to aesthetic detail and creative choices. The user provides a frontend requirement -- a component, page, app, or interface to build -- with optional context about purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a bold aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme direction: minimalism, maximalist chaos, retro-futurism, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. Use these as inspiration to design something faithful to the chosen aesthetic.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this design memorable? What is the one thing users will remember?
Key: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism are equally valid -- what matters is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and fully functional
- Visually striking and memorable
- Unified in style with a clear aesthetic point of view
- Polished in every detail
Frontend Aesthetic Guidelines
Focus on these areas:
Typography
Choose beautiful, distinctive, interesting fonts. Avoid generic fonts like Arial and Inter; select typefaces that elevate the frontend -- unexpected, personality-driven choices. Pair unique display fonts with refined body fonts.
Color and Theme
Establish a unified aesthetic. Use CSS variables for consistency. A dominant color with a striking accent beats an evenly distributed weak palette.
Motion
Use animation for effects and micro-interactions. For HTML, prefer pure CSS. For React, use Motion library. Focus on high-impact moments: one well-choreographed page-load animation (staggered fade-in with animation-delay) is more delightful than scattered micro-interactions. Use scroll-triggered reveals and unexpected hover states.
Spatial Composition
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space or controlled density.
Background and Visual Details
Create atmosphere and depth rather than defaulting to flat colors. Add contextual effects and textures that match the overall aesthetic. Employ gradient meshes, noise textures, geometric patterns, layered transparency, dramatic shadows, decorative borders, custom cursors, and grain overlays creatively.
Anti-Patterns to Avoid
Never produce cookie-cutter AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cliche color schemes (especially white-on-purple gradients)
- Predictable layouts and component patterns
- Template designs lacking context-specific personality
Do interpret creatively, make unexpected choices, and make the design truly fit the context. Every design should be different. Vary between light and dark themes, different fonts, different aesthetics. Never converge on common choices (e.g., Space Grotesk) across different generations.
Complexity Matching
Important: Implementation complexity must match the aesthetic vision. Maximalist designs demand intricate code with rich animation and effects. Minimalist or refined designs require restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from exceptional execution of the vision.
Remember: Claude is capable of producing extraordinary creative work. Do not hold back -- show what you can truly create when you think outside the box and fully commit to a unique vision.