Frontend 11 Skill

Build real, working frontend code with a clear aesthetic point of view. Match the implementation to the user's stack and constraints, but treat art direction, hierarchy, and polish as first-class requirements rather than optional finish work.

Design Thinking

Before coding, understand the context and commit to a bold aesthetic direction:

• Purpose: Identify what problem the interface solves and who uses it.
• Tone: Choose a distinct direction such as brutally minimal, maximalist chaos, luxury/refined, lo-fi/zine, dark/moody, soft/pastel, editorial/magazine, brutalist/raw, retro-futuristic, handcrafted/artisanal, organic/natural, art deco/geometric, playful/whimsical, or industrial/utilitarian. Use these as starting points, then make the final result feel singular and cohesive.
• Constraints: Respect the technical requirements, framework, performance limits, accessibility needs, and product context.
• Differentiation: Decide what the user should remember after one glance. Give the design one unmistakable idea.

Critical rule: choose a clear conceptual direction and execute it vigorously. Bold maximalism and refined minimalism both work. Intentionality is what matters.

Then implement working code that is: