# Frontend Design

> Create distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling any web UI. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.

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

---


# Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.

## Design Thinking

Before coding, commit to a BOLD aesthetic direction:

| Aspect | Questions |
|--------|-----------|
| **Purpose** | What problem does this solve? Who uses it? |
| **Tone** | Minimal? Maximalist? Retro? Luxury? Playful? |
| **Differentiation** | What makes this UNFORGETTABLE? |

## Aesthetics Guidelines

### Typography
- Choose distinctive fonts (avoid Arial, Inter, Roboto)
- Pair display font with refined body font
- Use unexpected, characterful choices

### Color & Theme
- Commit to a cohesive aesthetic
- Use CSS variables for consistency
- Dominant colors with sharp accents > timid palettes

### Motion
- Focus on high-impact moments
- Staggered reveals on page load
- Scroll-triggered and hover surprises

### Spatial Composition
- Unexpected layouts, asymmetry, overlap
- Grid-breaking elements
- Generous negative space OR controlled density

### Backgrounds & Visual Details
- Gradient meshes, noise textures
- Layered transparencies, dramatic shadows
- Custom cursors, grain overlays

## Anti-Patterns (NEVER)

❌ Generic fonts (Inter, Roboto, Arial, system fonts)
❌ Cliched purple gradients on white
❌ Cookie-cutter layouts
❌ Same design across generations

## Implementation

Match complexity to vision:
- **Maximalist** → Elaborate code, extensive animations
- **Minimalist** → Restraint, precision, typography focus

Remember: Claude is capable of extraordinary creative work. Commit fully to a distinctive vision.

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