# Designing Frontend

> Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns. Use when this capability is needed.

- Skill: `tomevault-io/designing-frontend` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/designing-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/designing-frontend/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- 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/designing-frontend

---


# Designing Frontend

## Workflow

1. **Conceptualize**
   - Identify purpose and user context
   - Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.)
   - Define the one unforgettable element
   - Note technical constraints (framework, performance, accessibility)

2. **Implement**
   - Write production-grade code (HTML/CSS/JS, React, Vue, etc.)
   - Apply aesthetic guidelines below

3. **Verify**
   - Check visual hierarchy and cohesion
   - Test interactions and animations
   - Validate accessibility requirements
   - Confirm no generic patterns emerged

4. **Iterate**
   - Refine details based on verification
   - Enhance distinctiveness where needed

## Aesthetic Guidelines

**Typography**
- Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts)
- Pair expressive display fonts with refined body fonts

**Color & Theme**
- Build cohesive palettes with CSS variables
- Use dominant colors with sharp accents, not evenly-distributed schemes
- Avoid clichéd combinations (purple gradients on white)

**Motion**
- Create high-impact moments with orchestrated page loads and staggered reveals
- Use CSS animations for HTML; Motion library for React
- Add surprising hover states and scroll-triggered effects

**Spatial Composition**
- Break from grid conventions: asymmetry, overlap, diagonal flow
- Use generous negative space OR intentional density

**Backgrounds & Visual Effects**
- Layer gradient meshes, noise textures, geometric patterns
- Apply contextual effects: layered transparencies, dramatic shadows, decorative borders
- Add atmosphere through depth and texture

## Implementation Principles

- **Match complexity to vision**: Maximalist designs require elaborate code; minimalist designs demand precision in spacing and typography
- **Vary every design**: Different fonts, themes, aesthetics for each project
- **Never converge**: Avoid repeated choices (Space Grotesk, common layouts)
- **Context-specific**: Design should feel genuinely crafted for its purpose

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