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:

• Production-grade, functional, and responsive
• Visually striking and memorable
• Cohesive with a clear aesthetic point of view
• Meticulously refined in spacing, typography, interaction, and finish

Frontend Aesthetics Guidelines

Focus on:

• Typography: Let typography carry the design's voice. Choose fonts with real personality. Skip Arial, Inter, Roboto, system stacks, and other default-feeling choices. Pair display and body faces deliberately. Use scale, weight, case, spacing, and rhythm to build hierarchy.
• Color and theme: Commit to a palette that takes a position. Lead with a dominant color, use accents sharply, and avoid timid distributions. Use CSS variables for consistency.
• Motion: Use animation for presence and delight. Prefer CSS-only motion for plain HTML when possible. Use Motion for React when available. Prioritize high-impact sequences such as a strong page-load reveal, staggered entrances, scroll-linked moments, and hover states that sharpen the experience.
• Spatial composition: Avoid predictable layouts. Use asymmetry, overlap, depth, diagonal flow, dramatic scale shifts, full-bleed moments, negative space, or controlled density when they support the concept.
• Backgrounds and visual details: Build atmosphere instead of defaulting to flat fills. Use techniques that fit the concept, including gradient meshes, grain, subtle patterns, layered transparencies, glass, glows, structured shadows, clip-path shapes, print textures, knockout type, or custom cursors.

Never default to generic AI-generated aesthetics such as overused font families, purple-on-white gradients, obvious startup layouts, or interchangeable component grids.

Instead:

• Choose distinctive fonts.
• Choose a committed palette.
• Build layouts that surprise.
• Add bespoke details that feel rooted in the user's context.
• Make every major decision support one coherent visual language.

Implementation Standard

Build creatively on the user's intent and make unexpected choices that still feel appropriate for the context. Let the specific brief drive the design rather than familiar defaults.

Match implementation complexity to the vision:

• Maximalist designs should earn their complexity with layered visuals, motion, and richer supporting code.
• Minimalist or refined designs should rely on restraint, precision, and extremely careful spacing and typography.
• Every design, regardless of style, should feel considered and finished.

When working inside an existing design system or product, preserve what should remain consistent and push the design where there is room to improve it. When starting from scratch, commit harder and avoid safe defaults.

Final Reminder

You are capable of extraordinary, award-worthy creative work. Do not hold back. Show what is truly possible and commit relentlessly to a distinctive and unforgettable vision.