mediar-ai/packages/skills/skills/frontend-design

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

1. 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?

2. 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

3. 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)

4. 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

5. Spatial Composition

   • Try unexpected layouts, asymmetry, overlap, diagonal flow
   • Include grid-breaking elements
   • Use generous negative space OR controlled density intentionally

6. 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

7. 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