# Frontend Design

> Create distinctive, memorable user interfaces that avoid generic AI aesthetics. Use when designing UI/UX, planning visual direction, or building pages and layouts. Use when this capability is needed.

- Skill: `tomevault-io/frontend-design-115` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/frontend-design-115`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-design-115/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-115

---


# Frontend Design Skill

Create distinctive, memorable user interfaces that avoid generic AI aesthetics.

## Pre-Implementation Planning

Before writing code, establish:

1. **Purpose & Audience** - What problem does this solve? Who uses it?
2. **Tone** - Choose a deliberate aesthetic direction:
   - Brutalist, maximalist, retro-futuristic, luxury, playful, editorial, organic, industrial
3. **Constraints** - Framework requirements, performance budgets, accessibility needs
4. **Memorable Element** - What's the ONE thing users will remember?

## Design Principles

### Typography
- **Avoid**: Inter, Roboto, Arial, system-ui (generic AI look)
- **Prefer**: Distinctive typefaces with character
- Pair display fonts with refined body options
- Size hierarchy should be dramatic, not subtle

### Color & Theme
- Use CSS variables for cohesive theming
- Dominant colors with sharp accents > evenly-distributed palettes
- Commit fully to color choices - timid palettes look generic
- Dark mode should be designed, not just inverted

### Motion & Animation
- Prioritize high-impact moments (page load, key interactions)
- One well-orchestrated entrance > scattered micro-interactions
- Staggered reveals create rhythm and hierarchy
- Quality over quantity

### Spatial Composition
- Employ asymmetry, overlap, diagonal flow
- Break grids intentionally for emphasis
- Generous negative space OR controlled density (pick one)
- Avoid centered-everything layouts

### Visual Details
- Gradient meshes, noise textures, geometric patterns
- Layered transparencies, dramatic shadows
- Custom cursors, grain overlays, decorative borders
- Details should reinforce the chosen aesthetic

## Anti-Patterns

- Generic fonts (Inter, Roboto, Arial on white backgrounds)
- Purple/blue gradients on white (classic AI startup look)
- Predictable card grids with rounded corners
- Cookie-cutter component libraries without customization
- Designs that could belong to any product

## Implementation Approach

```
1. Establish design tokens (colors, typography, spacing)
2. Build distinctive hero/header first (sets the tone)
3. Let the hero aesthetic inform component design
4. Add motion and micro-interactions last
5. Review: "Would I remember this UI tomorrow?"
```

## Framework Notes

This skill is framework-agnostic. Apply these principles whether using:
- React/Next.js with Tailwind
- Vue/Nuxt with CSS
- Svelte with styled-components
- Plain HTML/CSS

The goal is distinctive design, not specific implementation.

---

## Version
- v1.0.0 (2025-12-05): Added YAML frontmatter, initial documented version

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/benshapyro) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->