🎨

Frontend Design

Featured

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

by Claude Hub
•
Updated about 7 hours ago
#frontend #design #css #tailwind #ui

Quick Install

Terminal
$ curl -fsSL https://claudehub.infoinvestments.ru/i/skills/frontend-design | bash
Installs to .claude/skills/frontend-design/SKILL.md

Frontend Design Skill

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Overview

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

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

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme aesthetic approach (minimalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.)
  • Constraints: Technical requirements (framework, performance, accessibility)
  • Differentiation: "What makes this UNFORGETTABLE? What's the one thing someone will remember?"

Guidelines

Typography

Choose distinctive, characterful fonts. Avoid generic options; pair compelling display fonts with refined body fonts.

Color & Theme

Commit to cohesive aesthetics. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid palettes.

Motion

Use animations for effects and micro-interactions. CSS-only for HTML; Motion library for React. Orchestrate page load reveals with staggered animations.

Spatial Composition

Employ unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, and generous or controlled negative space.

What to Avoid

Never default to generic AI aesthetics:
- Overused font families (Inter, Roboto, Arial)
- Clichéd color schemes (purple gradients)
- Predictable layouts
- Cookie-cutter designs lacking context-specific character

Raw Content

# Frontend Design Skill

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

## Overview

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

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

- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme aesthetic approach (minimalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.)
- **Constraints**: Technical requirements (framework, performance, accessibility)
- **Differentiation**: "What makes this UNFORGETTABLE? What's the one thing someone will remember?"

## Guidelines

### Typography
Choose distinctive, characterful fonts. Avoid generic options; pair compelling display fonts with refined body fonts.

### Color & Theme
Commit to cohesive aesthetics. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid palettes.

### Motion
Use animations for effects and micro-interactions. CSS-only for HTML; Motion library for React. Orchestrate page load reveals with staggered animations.

### Spatial Composition
Employ unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, and generous or controlled negative space.

## What to Avoid

Never default to generic AI aesthetics:
- Overused font families (Inter, Roboto, Arial)
- Clichéd color schemes (purple gradients)
- Predictable layouts
- Cookie-cutter designs lacking context-specific character
Back to all skills