Aesthetic

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/micro-interactions.md
• references/storytelling-design.md
• references/design-resources.md