Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality that avoid generic AI aesthetics.
Prerequisites
- •Code editor or browser-based environment
- •Basic understanding of HTML/CSS/JavaScript
- •Optional: React, Vue, or other framework environment
Instructions
- •
Understand the context before coding
- •Identify the purpose: What problem does this interface solve? Who uses it?
- •Define the tone: Pick a bold aesthetic direction (brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian)
- •Note constraints: Technical requirements (framework, performance, accessibility)
- •Find differentiation: What makes this UNFORGETTABLE?
- •
Typography choices
- •Choose fonts that are beautiful, unique, and interesting
- •Avoid generic fonts like Arial, Inter, Roboto, system fonts
- •Pair a distinctive display font with a refined body font
- •Consider: Space Grotesk alternatives, serif + sans combinations, display fonts for headers
- •
Color & Theme
- •Commit to a cohesive aesthetic
- •Use CSS variables for consistency
- •Dominant colors with sharp accents outperform timid, evenly-distributed palettes
- •Avoid cliched schemes (particularly purple gradients on white backgrounds)
- •
Motion & Animation
- •Use animations for effects and micro-interactions
- •Prioritize CSS-only solutions for HTML
- •Use Motion library for React when available
- •Focus on high-impact moments: page load with staggered reveals (animation-delay)
- •Use scroll-triggering and hover states that surprise
- •
Spatial Composition
- •Try unexpected layouts, asymmetry, overlap, diagonal flow
- •Include grid-breaking elements
- •Use generous negative space OR controlled density intentionally
- •
Backgrounds & Visual Details
- •Create atmosphere and depth rather than solid colors
- •Apply creative forms: gradient meshes, noise textures, geometric patterns
- •Consider: layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays
- •
Implement the code
- •Write production-grade, functional code (HTML/CSS/JS, React, Vue, etc.)
- •Make it visually striking and memorable
- •Ensure cohesive aesthetic point-of-view
- •Refine every detail meticulously
Error Handling
- •If requirements are vague, ask clarifying questions about purpose and audience
- •If a framework is specified, use its conventions and best practices
- •If accessibility is required, ensure WCAG compliance while maintaining aesthetics
Notes
- •Match implementation complexity to the aesthetic vision
- •Maximalist designs need elaborate code with extensive animations
- •Minimalist designs need restraint, precision, and careful attention to spacing
- •Never converge on common choices across generations - vary themes, fonts, and aesthetics
- •Bold maximalism and refined minimalism both work - the key is intentionality
Source: anthropics/skills