# Frontend Design

> Create professional, distinctive frontend designs. Use for any UI work, component creation, or design decisions.

- Skill: `heldinhow/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add heldinhow/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/heldinhow/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Heldinhow (https://skillmd.com/u/heldinhow)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/heldinhow/frontend-design

---


# Frontend Design

## Overview
Create frontend designs that are distinctive, production-grade, and avoid generic "AI slop" aesthetics. Focus on unique typography, cohesive color schemes, and meaningful animations.

## Process

### 1. Choose Design Direction
- Commit to one clear aesthetic vision
- Avoid generic patterns everyone uses
- Consider asymmetry, overlap, unexpected layouts

### 2. Typography
- Use distinctive fonts (not Inter/Roboto/system)
- Import from Google Fonts or premium typefaces
- Establish clear type scale

### 3. Color Scheme
- Define cohesive palette with CSS variables
- Choose dominant accent color
- Build supporting neutrals

### 4. Spatial Composition
- Break grid conventions thoughtfully
- Use whitespace actively
- Create visual hierarchy

### 5. Animations
- Add meaningful transitions (150-200ms)
- Animate on load
- Hover states and micro-interactions

### 6. Atmospheric Effects
- Subtle gradients
- Noise textures
- Depth with shadows

## Examples

- **Landing Page**: Hero section with bold typography + gradient overlay
- **Dashboard**: Card-based layout with subtle shadows + hover lifts
- **Mobile App**: Bottom navigation + smooth page transitions

## Limitations

- Don't over-animate - can slow down UX
- Avoid too many fonts - performance + readability
- Don't sacrifice usability for aesthetics
- May need fallbacks for older browsers