Frontend Design Skill

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to typography, layout, motion, and atmosphere.

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 a strong direction (brutalist, editorial, retro-futuristic, luxury, playful, utilitarian). Commit fully.

• Constraints: Framework, performance, accessibility, brand rules.

• Differentiation: Identify the one unforgettable visual idea.

Execution Guidelines

• Typography: Use distinctive fonts. Avoid generic system stacks (Inter, Roboto, Arial). Pair display and body type.

• Color: Define CSS variables. Choose dominant colors with sharp accents. Avoid default purple gradients on white.

• Motion: Favor a few high-impact moments (page-load, staggered reveals). Use CSS animations when possible.

• Layout: Break the grid when appropriate. Use asymmetry, overlap, or unexpected composition.

• Backgrounds: Add depth with gradients, texture, or shapes. Avoid flat, empty backgrounds.

Output Requirements

Provide working code that is:

• Production-grade and functional

• Visually striking and cohesive

• Explicit about the aesthetic direction

• Matched in complexity to the design intent

Response Checklist

Frontend Design Checklist

• Clarify purpose, audience, and constraints
• Declare a specific aesthetic direction
• Define typography and color system
• Design layout and motion moments
• Implement production-grade code
• Explain key visual decisions briefly