Frontend Design Skill

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Follow the phased workflow below. Each phase has concrete reference material — use it, don't invent from scratch.

Phased Workflow

Phase 1: Design Direction

Before touching any code, commit to a clear aesthetic direction. Answer these:

Context questions:

• What problem does this interface solve? Who uses it?
• What's the one thing someone will remember about this design?
• What aesthetic direction fits? (Choose ONE — don't blend randomly)

Aesthetic directions to pick from: Brutally minimal · Maximalist chaos · Retro-futuristic · Organic/natural · Luxury/refined · Playful/toy-like · Editorial/magazine · Brutalist/raw · Art deco/geometric · Soft/pastel · Industrial/utilitarian · Sci-fi/cyberpunk