frontend-design_skill

Overview

This skill helps create distinctive, production-grade frontend interfaces with a clear, intentional aesthetic direction. It guides the process from concept to polished, working code that avoids generic AI aesthetics and focuses on memorable design choices. Use it when you need web components, pages, or applications that feel handcrafted and purposeful.

How this skill works

I first extract purpose, audience, and constraints from your brief and pick a single bold aesthetic direction (for example: brutalist/raw, retro-futuristic, or luxury/refined). I then generate production-ready front-end code (HTML/CSS/TSX/React/Vue) with cohesive typography, color system (CSS variables), motion, and layout decisions baked in. The output includes deliberate micro-interactions, layered backgrounds, and accessible structure so the result is visually striking and functional.

When to use it

• Building a flagship landing page that must feel unique and memorable
• Designing reusable UI components with a strong, non-generic visual identity
• Prototyping an app UI where aesthetics communicate brand personality
• Creating themeable interfaces that need precise typography and motion
• Refining designs to production-ready code with attention to accessibility

Best practices

• State the purpose, audience, and technical constraints up front to guide the aesthetic choice
• Pick one clear aesthetic direction and apply it consistently across type, color, motion, and layout
• Use CSS variables for color/spacing/typography tokens to keep the system coherent and themeable
• Favor a single high-impact animation or reveal rather than many competing micro-animations
• Opt for distinctive, characterful fonts paired with a refined body face; avoid generic system defaults
• Match implementation complexity to the aesthetic: restraint for minimalism, rich code for maximalist work

Example use cases

• A product landing page with dramatic diagonal layouts, layered gradients, and a single cinematic page-load reveal
• A dashboard component library with a luxury/refined theme: fine typography, subtle glass textures, and precise spacing
• A marketing hero section in a retro-futuristic style with neon accents, animated halftone background, and custom cursor
• An e-commerce product card set using bold asymmetry, tactile shadows, and hover-driven micro-interactions