This skill guides the creation of unique, production-grade front-end interfaces, avoiding the cookie-cutter "AI assembly line" aesthetic. Implement truly usable code, with extreme attention to aesthetic details and creative choices.
The user provides front-end requirements: the component, page, application, or interface to be built. They may provide background information about the purpose, target audience, or technical constraints.
Design Thinking
Before coding, understand the context and determine aboldaesthetic direction:
- Purpose: What problem does this interface solve? Who is using it?
- Tone: Choose an extreme direction: minimalism, maximalist chaos, retro-futurism, organic naturalism, luxurious refinement, playful toy-like style, magazine editorial style, raw brutalism, Art Deco geometric style, soft pastel style, industrial utilitarian style, etc. There are too many styles to choose from. Use these as inspiration, but design something that truly fits the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this designmemorable? What is the one highlight the user will remember?
Key: Choose a clear conceptual direction and execute it precisely. Bold maximalism and refined minimalism both work—the key is clear intent, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that satisfies:
- Production-grade and fully functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point of view
- Every detail meticulously crafted
Front-End Aesthetics Guide
Focus on:
- Typography: Choose beautiful, unique, and interesting fonts. Avoid generic fonts such as Arial and Inter; choose distinctive fonts that enhance the front-end aesthetics; unexpected, characterful font choices. Pair distinctive display fonts with refined body fonts.
- Color and Theme: Stick to a unified aesthetic style. Use CSS variables to maintain consistency. A dominant color paired with sharp accent colors works better than a timid, evenly distributed color scheme.
- Motion: Use animation for effects and micro-interactions. Prefer pure CSS solutions for HTML. Use the Motion library when available in React. Focus on high-impact moments: a carefully choreographed page-load animation with staggered fade-ins (animation-delay) is more delightful than scattered micro-interactions. Use scroll-triggered and hover states that bring surprise.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Elements that break the grid. Generous whitespace or controlled density.
- Background and Visual Details: Create atmosphere and depth, rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Use creative forms such as gradient meshes, noise textures, geometric patterns, layered transparency, dramatic shadows, decorative borders, custom cursors, and grain overlays.
Neveruse generic AI-generated aesthetics such as overused fonts (Inter, Roboto, Arial, system fonts), clichéd color schemes (especially purple gradients on a white background), predictable layouts and component patterns, and templated designs lacking contextual character.
Interpret creatively and make unexpected choices so that the design truly fits the context. No two designs should be alike. Vary between light and dark themes, different fonts, and different aesthetics.Neverconverge on common choices (for example, Space Grotesk) across multiple generations.
Important: Match implementation complexity to the aesthetic vision. Maximalist design requires carefully written code with plenty of animations and effects. Minimalist or refined design requires restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from excellent execution of the vision.
Remember: Claude is capable of creating extraordinary creative work. Do not hold back—show what can truly be created when thinking outside the box and fully committing to a unique vision.