Frontend Design — Bold, Distinctive UI Design Guidance

Production-Grade Design System

Creates production-grade frontend interfaces that avoid generic AI aesthetics. Provides structured guidance on typography, color theory, animation, spatial composition, and visual details across 10+ distinct aesthetic directions from minimalism to brutalism.

Skill

10+

Aesthetics

Files

Language

🎨 Bold Design🔤 Typography🎬 Animation📐 Spatial Composition

📚 What is this & why does it exist?

AI-generated frontends tend to converge on the same bland aesthetic — blue gradients, rounded cards, generic sans-serif typography. Frontend Design exists to break that pattern. It's auto-invoked for all frontend work and forces Claude to first commit to a specific aesthetic direction before writing any code. The two-phase approach (Design Thinking → Implementation) ensures that every UI decision is intentional: from the typeface weights to the animation easing curves to the whitespace rhythm.

💡 Real-world analogy

Without this skill, asking AI to build a frontend is like asking a session musician to "play something nice" — you'll get technically competent but forgettable background music. With this skill, it's like hiring a music director who first asks "What genre? What mood? Who's the audience?" then selects specific instruments, keys, and arrangements before a single note is played. The result is a composition with identity, not just competence.

Design Workflow

flowchart TB
    subgraph Phase1["Phase 1: Design Thinking"]
        START["Frontend Request"] --> ANALYZE["Analyze Purpose"]
        ANALYZE --> AUDIENCE["Identify Audience"]
        AUDIENCE --> COMMIT["Commit to Aesthetic"]
        COMMIT --> PALETTE["Define Color Palette"]
        PALETTE --> TYPE["Select Typography"]
        TYPE --> SPACE["Plan Spatial Composition"]
        SPACE --> MOTION["Design Motion Language"]
    end
    subgraph Phase2["Phase 2: Implementation"]
        MOTION --> CODE["Generate Code"]
        CODE --> TYPO_IMPL["Apply Typography Rules"]
        TYPO_IMPL --> COLOR_IMPL["Implement Color System"]
        COLOR_IMPL --> ANIM_IMPL["Add Animations"]
        ANIM_IMPL --> DETAIL_IMPL["Polish Visual Details"]
        DETAIL_IMPL --> REVIEW["Self-Review Against Aesthetic"]
        REVIEW --> OUTPUT["Production-Ready UI"]
    end
    subgraph Aesthetics["Aesthetic Library"]
        A1["Minimalism"]
        A2["Maximalism"]
        A3["Retro"]
        A4["Organic"]
        A5["Luxury"]
        A6["Brutalist"]
        A7["Art Deco"]
        COMMIT --> A1
        COMMIT --> A2
        COMMIT --> A3
        COMMIT --> A4
        COMMIT --> A5
        COMMIT --> A6
        COMMIT --> A7
    end

Aesthetic Directions

⬛ Minimalism

Maximum whitespace, restrained color, single typeface family. Every element earns its place. Inspired by Dieter Rams and Japanese design principles.

Colors: Monochrome with one accent
Type: Light weights, generous tracking
Motion: Subtle fades, 200ms transitions

🌈 Maximalism

Bold color collisions, layered textures, mixed type families. Energetic and attention-grabbing. Inspired by Memphis Group and 90s rave culture.

Colors: 5+ colors, high saturation
Type: Display faces, extreme weight contrast
Motion: Bouncy, spring physics, parallax

📻 Retro

Period-specific aesthetics from the 1950s–1990s. CRT scan lines, VHS tracking, pixel fonts, or neon grids. Authenticity over novelty.

Colors: Period-accurate palettes
Type: Monospace, bitmap, or era-specific
Motion: Glitch, flicker, step animations

🌿 Organic

Flowing shapes, natural color palettes, hand-drawn elements. Inspired by nature, biology, and growth patterns.

Colors: Earth tones, botanical greens
Type: Humanist sans, gentle serifs
Motion: Ease-in-out, wave, grow effects

💎 Luxury

Rich materials, gold accents, refined spacing. Communicates premium quality and exclusivity. Inspired by haute couture and fine jewelry.

Colors: Black, gold, deep jewel tones
Type: Elegant serifs, wide letter-spacing
Motion: Smooth reveals, Ken Burns zoom

🎲 Playful

Rounded shapes, bright colors, micro-interactions. Delightful and approachable. Inspired by toy design and children's illustration.

Colors: Primary colors, pastels
Type: Rounded sans, variable weights
Motion: Bounce, wiggle, confetti

📰 Editorial

Magazine-inspired layouts with strong grid systems, pull quotes, and dramatic image cropping. Content-first design.

Colors: High contrast, limited palette
Type: Serif headlines, sans body text
Motion: Scroll-triggered reveals

🚧 Brutalist

Raw, unpolished, intentionally confrontational. Exposed structure, system fonts, visible borders. Anti-design as a statement.

Colors: Black & white, no gradients
Type: Times New Roman, Courier, system
Motion: None or jarring transitions

🏛️ Art Deco

Geometric patterns, symmetry, metallic accents. 1920s glamour meets modern technology. Gatsby-era opulence.

Colors: Gold, black, emerald, ivory
Type: Geometric display faces
Motion: Reveal along geometric paths

⚙️ Industrial

Exposed grid, monospace type, dark backgrounds, utility-first. Inspired by factories, dashboards, and terminal interfaces.

Colors: Dark grays, caution yellow, red
Type: Monospace, condensed sans
Motion: Mechanical, linear timing

Two-Phase Process

sequenceDiagram
    participant User
    participant Skill as Frontend Design Skill
    participant Think as Design Thinking Phase
    participant Impl as Implementation Phase

    User->>Skill: "Build a landing page for a coffee brand"
    Skill->>Think: Phase 1: Design Thinking
    Think->>Think: Analyze: Coffee = warmth, craft, ritual
    Think->>Think: Audience: 25-40, premium buyers
    Think->>Think: Commit aesthetic: Organic + Luxury hybrid
    Think->>Think: Palette: Deep brown, cream, copper accent
    Think->>Think: Type: Playfair Display + Source Sans Pro
    Think->>Think: Space: Full-bleed hero, generous margins
    Think->>Think: Motion: Slow parallax, steam animation

    Think-->>Impl: Design brief locked
    Impl->>Impl: Generate HTML structure
    Impl->>Impl: Apply Playfair Display headings
    Impl->>Impl: Implement brown/cream/copper palette
    Impl->>Impl: Add parallax scroll + steam SVG animation
    Impl->>Impl: Polish: grain texture, hover micro-interactions
    Impl->>Impl: Self-review: Does this feel "organic luxury"?
    Impl-->>User: Production-ready landing page

Design Pillars

Pillar	What It Covers	Anti-Pattern Avoided
Typography	Font pairing, weight hierarchy, line-height, letter-spacing, responsive scaling	Single system font at one weight
Color	Intentional palette, contrast ratios, semantic color roles, dark/light adaptation	Blue gradient on everything
Animation	Meaningful motion, easing curves, duration rules, scroll triggers, micro-interactions	No motion or gratuitous bouncing
Spatial Composition	Whitespace rhythm, grid systems, visual hierarchy, responsive breakpoints	Uniform padding, centered everything
Visual Details	Texture, shadow depth, border treatments, icon style, image cropping	Flat cards with round corners

Key Components

Component	File	Role
`frontend-design`	`skills/frontend-design/SKILL.md`	Main skill with design thinking framework and aesthetic library
`aesthetic-catalog`	`skills/frontend-design/references/aesthetic-catalog.md`	Detailed reference for all 10+ aesthetic directions
`plugin.json`	`.claude-plugin/plugin.json`	Plugin manifest with skill registration

Interactions

Module	Interface	Data Exchanged
Claude Code Skill System	Auto-invocation	Triggered on all frontend-related prompts
User prompt	Context analysis	Purpose, audience, brand identity extracted from request
Generated code	Self-review loop	Implementation checked against committed aesthetic
CLAUDE.md	File read	Project-specific UI guidelines and brand constraints

Directory Map

Source tree for Frontend Design

frontend-design/
├── .claude-plugin/plugin.json          ← Plugin manifest
├── README.md                           ← Plugin documentation
└── skills/
    └── frontend-design/
        ├── SKILL.md                    ← Design thinking framework
        └── references/
            └── aesthetic-catalog.md    ← 10+ aesthetic direction reference

Configuration Reference

Parameter	Default	Description
`auto_invoke`	true	Automatically activate on frontend-related prompts
`default_aesthetic`	auto	Default aesthetic direction (auto = analyze from context)
`enforce_contrast`	true	Require WCAG AA contrast ratios in all color choices
`include_animations`	true	Whether to add motion and micro-interactions
`responsive_breakpoints`	[768, 1024, 1440]	Breakpoint widths for responsive design
`self_review`	true	Run a self-review pass checking code against aesthetic
`font_loading`	google-fonts	Font loading strategy: google-fonts, self-hosted, system

Anti-Patterns Checklist

The skill actively prevents these common AI-generated frontend pitfalls:

🚫 Generic Blue Gradient

Default blue-to-purple gradient backgrounds that make every site look like a SaaS landing page from 2020.

🚫 Rounded Card Monotony

Uniform border-radius: 12px cards in a grid — the visual equivalent of elevator music.

🚫 One-Weight Typography

Using a single font at a single weight for everything. No hierarchy, no personality, no visual rhythm.

🚫 Padding Uniformity

Identical spacing everywhere. Good design uses varied whitespace to create visual tension and hierarchy.