# Frontend Design

> Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

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

---


# Frontend Design

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

<when_to_use>

## When to Use

Invoke when user says:

- "redesign this component"
- "make this look better"
- "build a new page/component"
- "improve the UI"
- "create a landing page"
- "design a form/modal/card"
  </when_to_use>

<design_thinking>

## Design Thinking

Before coding, understand the context and commit to a **BOLD aesthetic direction**:

1. **Purpose**: What problem does this interface solve? Who uses it?
2. **Tone**: Pick an extreme aesthetic direction:
   - Brutally minimal
   - Maximalist chaos
   - Retro-futuristic
   - Organic/natural
   - Luxury/refined
   - Playful/toy-like
   - Editorial/magazine
   - Brutalist/raw
   - Art deco/geometric
   - Soft/pastel
   - Industrial/utilitarian

3. **Constraints**: Technical requirements (framework, performance, accessibility)
4. **Differentiation**: What makes this **UNFORGETTABLE**? What's the one thing someone will remember?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is **intentionality, not intensity**.
</design_thinking>

<implementation>
## Implementation Requirements

Implement working code that is:

- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
  </implementation>

<aesthetics>
## Frontend Aesthetics Guidelines

### Typography

- Choose fonts that are **beautiful, unique, and interesting**
- Avoid generic fonts like Arial and Inter
- Use unexpected, characterful font choices
- Pair a distinctive display font with a refined body font

### Color & Theme

- Commit to a cohesive aesthetic
- Use CSS variables for consistency
- Dominant colors with sharp accents outperform timid, evenly-distributed palettes

### Motion

- Use animations for effects and micro-interactions
- Prioritize CSS-only solutions for HTML
- Use Motion library for React when available
- Focus on high-impact moments: one well-orchestrated page load with staggered reveals
- Use scroll-triggering and hover states that surprise

### Spatial Composition

- Unexpected layouts
- Asymmetry, overlap, diagonal flow
- Grid-breaking elements
- Generous negative space OR controlled density

### Backgrounds & Visual Details

- Create atmosphere and depth rather than solid colors
- Add contextual effects and textures matching the overall aesthetic:
  - Gradient meshes
  - Noise textures
  - Geometric patterns
  - Layered transparencies
  - Dramatic shadows
  - Decorative borders
  - Custom cursors
  - Grain overlays
    </aesthetics>

<anti_patterns>

## What NOT To Do

Avoid using:

- Generic AI-generated aesthetics
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cliched color schemes (especially purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design lacking context-specific character

Instead:

- Interpret creatively and make unexpected choices
- No design should be the same
- Vary between light and dark themes, different fonts, different aesthetics
- Never converge on common choices across generations
  </anti_patterns>

<execution>
## Execution Principle

**Match implementation complexity to the aesthetic vision:**

- Maximalist designs need elaborate code with extensive animations and effects
- Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details
- Elegance comes from executing the vision well

> Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
> </execution>

<version_history>

## Version History

- **v1.1.0** (2025-01-18): AI optimization updates
  - Add blockquote summary after title
  - Soften directive language (CRITICAL/NEVER → plain guidance)

- **v1.0.0** (2025-01-05): Initial installation from claude-code plugins
  </version_history>