# Frontend Design > Frontend design skill for UI/UX implementation - generates distinctive, production-grade interfaces Use when this capability is needed. - Skill: `tomevault-io/frontend-design-125` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-design-125` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-design-125/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-125 --- # Frontend Design Skill This skill helps create **distinctive, production-grade frontend interfaces** that avoid generic AI aesthetics. ## Core Principles When building any frontend interface, follow these principles to create visually striking, memorable designs: ### 1. Establish Bold Aesthetic Direction **Before writing any code**, define a clear aesthetic vision: - **Understand the purpose**: What is this interface trying to achieve? - **Choose an extreme tone**: Select a distinctive aesthetic direction - Brutalist: Raw, bold, functional - Maximalist: Rich, layered, decorative - Retro-futuristic: Nostalgic tech aesthetics - Minimalist with impact: Powerful simplicity - Neo-brutalist: Modern take on brutalism - **Identify the unforgettable element**: What will make this design memorable? ### 2. Implementation Standards Every interface you create should be: - ✅ **Production-grade and functional**: Code that works flawlessly - ✅ **Visually striking and memorable**: Designs that stand out - ✅ **Cohesive with clear aesthetic point-of-view**: Unified vision throughout ## Critical Design Guidelines ### Typography **Choose fonts that are beautiful, unique, and interesting.** - ❌ **AVOID**: Generic system fonts (Arial, Helvetica, default sans-serif) - ✅ **USE**: Distinctive choices that elevate aesthetics - Display fonts with character - Unexpected font pairings - Variable fonts for dynamic expression - Fonts that reinforce your aesthetic direction ### Color & Theme **Commit to cohesive aesthetics with CSS variables.** - ❌ **AVOID**: Generic color palettes, predictable combinations - ✅ **USE**: Dominant colors with sharp accents - Define comprehensive CSS custom properties - Create mood through color temperature - Use unexpected color combinations - Build depth with tints, shades, and tones ### Motion & Animation **Use high-impact animations that enhance the experience.** - For **HTML/CSS**: CSS-only animations (transforms, transitions, keyframes) - For **React**: Motion library (Framer Motion, React Spring) - ❌ **AVOID**: Generic fade-ins, boring transitions - ✅ **USE**: High-impact moments - Purposeful movement that guides attention - Smooth, performant animations - Delightful micro-interactions - Entrance/exit animations with personality ### Composition & Layout **Embrace unexpected layouts.** - ❌ **AVOID**: Predictable grids, centered everything, safe layouts - ✅ **USE**: Bold composition choices - Asymmetry - Overlap - Diagonal flow - Unexpected whitespace - Breaking the grid intentionally ### Details & Atmosphere **Create atmosphere through thoughtful details.** - ✅ Textures and grain - ✅ Sophisticated gradients - ✅ Patterns and backgrounds - ✅ Custom effects (blur, glow, shadows) - ✅ Attention to spacing and rhythm ## What to AVOID **Generic AI Design Patterns:** - ❌ Overused fonts (Inter, Roboto, Open Sans as defaults) - ❌ Clichéd color schemes (purple gradients, generic blues) - ❌ Predictable layouts (everything centered, safe grids) - ❌ Cookie-cutter design that lacks context-specific character - ❌ Lack of personality or point-of-view - ❌ Generic animations (basic fade-ins everywhere) ## Execution Philosophy **Show restraint or elaboration as the vision demands—execution quality matters most.** - Every design decision should serve the aesthetic direction - Don't add complexity for its own sake - Don't oversimplify when richness is needed - Commit fully to your chosen direction - Polish details relentlessly ## Implementation Process When creating a frontend interface: 1. **Define the aesthetic direction** (brutalist, maximalist, minimalist, etc.) 2. **Choose distinctive typography** that reinforces the aesthetic 3. **Establish color system** with CSS variables 4. **Design layout** with unexpected but purposeful composition 5. **Add motion** that enhances key moments 6. **Polish details** (textures, shadows, spacing) 7. **Review against principles** - is this distinctive and production-grade? ## Examples of Strong Aesthetic Directions - **Brutalist Dashboard**: Monospace fonts, high contrast, grid-based, utilitarian - **Retro-Futuristic Landing**: Neon colors, chrome effects, 80s sci-fi inspired - **Minimalist with Impact**: Generous whitespace, bold typography, single accent color - **Neo-Brutalist App**: Raw aesthetics, asymmetric layouts, bold shadows - **Maximalist Content**: Rich layers, decorative elements, abundant color ## Resources For deeper guidance on prompting for high-quality frontend design, see the [Frontend Aesthetics Cookbook](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb). --- **Remember**: The goal is to create interfaces that are both functionally excellent and visually unforgettable. Avoid generic AI aesthetics by committing to a clear, bold direction and executing it with meticulous attention to detail. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/stevengonsalvez) — claim your Tome and manage your conversions.