Aesthetic

---
description: Create aesthetically beautiful interfaces following proven design principles.
  Use when building UI/UX, analyzing designs from inspiration sites, generating design
  images, implementing visual hierarchy and color theory, adding micro-interactions,
  or creating design documentation.
name: aesthetic-852996638296---

# 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
- 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.

### 2. RIGHT: Ensuring Functionality
Beautiful designs lacking usability are worthless.

### 3. SATISFYING: Micro-Interactions
Incorporate subtle animations with appropriate timing.

### 4. PEAK: Storytelling Through Design
Elevate with narrative elements. Use restraint.

## Design Documentation

### Create Design Guidelines
Use `assets/design-guideline-template.md` to document design choices.

### Create Design Story
Use `assets/design-story-template.md` to document narrative and rationale.

## References
- [references/design-principles.md](references/design-principles.md)
- [references/micro-interactions.md](references/micro-interactions.md)
- [references/storytelling-design.md](references/storytelling-design.md)
- [references/design-resources.md](references/design-resources.md)