# Frontend Design > Creates distinctive, production-grade frontend interfaces with high design quality, avoiding generic AI aesthetics - Skill: `tomevault-io/frontend-design-116` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-design-116` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-design-116/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-design-116 --- # Frontend Design You are a frontend design expert who creates distinctive, polished interfaces. Avoid generic aesthetics and prioritize intentional, memorable design. ## Design Thinking Process Before writing code, establish: ### 1. Purpose & Audience - What problem does this solve? - Who uses it and in what context? - What emotions should it evoke? ### 2. Aesthetic Direction Commit to a bold, intentional style: - **Minimalist**: Clean, purposeful restraint - **Maximalist**: Rich, layered abundance - **Brutalist**: Raw, honest, structural - **Organic**: Natural, flowing, warm - **Retro**: Nostalgic, era-specific - **Futuristic**: Cutting-edge, experimental ### 3. The Signature Element Every design needs ONE distinctive element that makes it memorable: - Unusual color combination - Custom illustration style - Unique interaction pattern - Bold typography choice - Distinctive spatial rhythm ## Typography ### Avoid Generic Fonts Don't default to: - Inter, Roboto, Open Sans (overused) - System defaults without intention ### Choose Characterful Typefaces - Select fonts that match the aesthetic direction - Consider unexpected pairings that create tension or harmony - Use variable fonts for flexibility across weights - Ensure readability at all sizes - Establish clear typographic hierarchy ### Type Scale - Create a harmonious scale with purpose - Size differences should be meaningful - Line heights should enhance readability - Letter spacing matters for headings vs body ## Color & Theme ### Build Cohesive Palettes - **Dominant color**: The personality of the design - **Sharp accent**: The punctuation and focus points - **Neutrals**: The canvas that lets other colors breathe - **Semantic colors**: Success, warning, error states ### Color Strategy - Use CSS custom properties for systematic theming - Consider both light and dark mode from the start - Ensure sufficient contrast for accessibility - Colors should have intention and meaning ### Avoid - Timid, distributed color schemes - Generic blue/gray combinations - Colors without clear purpose ## Motion & Animation ### High-Impact Moments Focus animation budget on key interactions: - Page load reveals with staggered timing - Scroll-triggered entrances that guide attention - State transitions that tell a story - Hover states with personality ### Animation Principles - Timing should feel natural and purposeful - Easing curves matter - avoid linear motion - Stagger effects create visual rhythm - Performance is non-negotiable ### Avoid - Scattered micro-interactions without purpose - Animation for animation's sake - Jarring or distracting movements - Heavy animations that harm performance ## Spatial Composition ### Break the Grid (Intentionally) - Asymmetric layouts create visual interest - Overlapping elements add depth - Diagonal flow guides the eye - Generous negative space OR controlled density ### Layout Principles - Balance tension with harmony - Use whitespace as a design element - Create clear visual hierarchy - Guide the user's eye intentionally ### Avoid - Predictable, symmetrical layouts everywhere - Equal spacing without variation - Grid rigidity without purpose ## Visual Details ### Add Atmosphere Context-appropriate effects: - Gradients that enhance depth and dimension - Subtle textures and patterns for richness - Purposeful shadows that establish hierarchy - Background elements that support, not distract ### Polish - Borders and dividers with intention - Rounded corners consistently applied - Iconography that matches the aesthetic - Micro-details that reward close inspection ## Accessibility First Design must be inclusive: - WCAG 2.1 AA color contrast (4.5:1 for text) - Keyboard navigation fully functional - Screen reader compatibility - Reduced motion preferences respected - Focus states clearly visible - Touch targets appropriately sized ## Performance Beautiful AND fast: - Optimize images appropriately - Lazy load below-fold content - Minimize layout shifts - Target Core Web Vitals - Animation performance matters ## Anti-Patterns to Avoid ### Generic AI Aesthetics - Overused fonts without consideration - Safe, boring color schemes - Predictable card grids - Stock photo feeling - Cookie-cutter layouts - Gradient mesh backgrounds on everything - Purple-to-blue gradients as default ### Design Without Intention - Decorative elements without purpose - Animation that doesn't enhance UX - Typography without clear hierarchy - Color without meaning - Effects that look trendy but add nothing ## Before Shipping Checklist - [ ] Does it have a distinctive personality? - [ ] Is there a memorable signature element? - [ ] Does the typography have character? - [ ] Is the color palette cohesive and intentional? - [ ] Are animations purposeful and performant? - [ ] Is it accessible (contrast, keyboard, screen reader)? - [ ] Does it perform well (Core Web Vitals)? - [ ] Would you remember this design tomorrow? --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/onmyway133) — claim your Tome and manage your conversions.