# Aesthetic

Create aesthetically beautiful interfaces following proven design principles.

- Repository: https://github.com/mrgoonie/claudekit-skills (2229 stars)
- Category: Design
- License: see repository
- Last updated: 2026-04-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mrgoonie/claudekit-skills --skill aesthetic -g -a claude-code -y`
Codex: `npx skills add mrgoonie/claudekit-skills --skill aesthetic -g -a codex -y`
Cursor: `npx skills add mrgoonie/claudekit-skills --skill aesthetic -g -a cursor -y`
Gemini CLI: `npx skills add mrgoonie/claudekit-skills --skill aesthetic -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add mrgoonie/claudekit-skills`

## Description

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Aesthetic

Create aesthetically beautiful interfaces by following proven design principles and systematic workflows.

## When to Use This Skill

Use when:
- Building or designing user interfaces
- Analyzing designs from inspiration websites (Dribbble, Mobbin, Behance)
- Generating design images and evaluating aesthetic quality
- Implementing visual hierarchy, typography, color theory
- Adding micro-interactions and animations
- Creating design documentation and style guides
- Need guidance on accessibility and design systems

## Core Framework: Four-Stage Approach

### 1. BEAUTIFUL: Understanding Aesthetics
Study existing designs, identify patterns, extract principles. AI lacks aesthetic sense, standards must come from analyzing high-quality examples and aligning with market tastes.

**Reference**: [`references/design-principles.md`](references/design-principles.md) - Visual hierarchy, typography, color theory, white space principles.

### 2. RIGHT: Ensuring Functionality
Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements.

**Reference**: [`references/design-principles.md`](references/design-principles.md) - Design systems, component libraries, WCAG accessibility standards.

### 3. SATISFYING: Micro-Interactions
Incorporate subtle animations with appropriate timing (150-300ms), easing curves (ease-out for entry, ease-in for exit), sequential delays.

**Reference**: [`references/micro-interactions.md`](references/micro-interactions.md) - Duration guidelines, easing curves, performance optimization.

### 4. PEAK: Storytelling Through Design
Elevate with narrative elements, parallax effects, particle systems, thematic consistency. Use restraint: "too much of anything isn't good."

**Reference**: [`references/storytelling-design.md`](references/storytelling-design.md) - Narrative elements, scroll-based storytelling, interactive techniques.

## Workflows

The rest: https://github.com/mrgoonie/claudekit-skills/blob/HEAD/.claude/skills/aesthetic/SKILL.md