aesthetic

Apply a four-stage design framework to guide UI aesthetic decisions.

Updated Jan 24, 2026

Search Tags:#aesthetic #design-principles #ui-design #micro-interactions #visual-hierarchy #color-theory

Ready to run

npx skills add https://github.com/Khoatran1999/aquarium-commerce --skill aesthetic-khoatran1999

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/Khoatran1999/aquarium-commerce/tree/main/.claude/skills/aesthetic
Command: npx skills add https://github.com/Khoatran1999/aquarium-commerce --skill aesthetic-khoatran1999

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

Four-Stage Framework: BEAUTIFUL, RIGHT, SATISFYING, PEAK guiding aesthetic decisions.
Inspiration Capture & Analysis: Capture and analyze inspiration sources with chrome-devtools and ai-multimodal to extract guidelines and patterns.
Iterative Design Generation & Documentation: Generate design images and document decisions using templates in assets.

Quick Start

Capture an inspiration screenshot, analyze it with ai-multimodal to extract guidelines, and save the results in docs/design-guideline.md.

Frequently Asked Questions about aesthetic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I apply UI design principles to improve visual hierarchy and aesthetics?▼

Apply a four-stage design framework—BEAUTIFUL, RIGHT, SATISFYING, PEAK—to guide visual hierarchy and aesthetic decisions systematically across UI design projects.

What is the best way to capture and analyze UI design inspiration?▼

Capture inspiration screenshots and analyze visual patterns using ai-multimodal to extract design guidelines, which are then saved in references for future documentation workflows.

How do I document design decisions and guidelines for a design system?▼

Document design decisions by using provided templates in assets to save generated design images and extracted guidelines into structured story documents and design documentation.

Can I use this design workflow for micro-interactions and color theory analysis?▼

Yes, the framework supports analyzing micro-interactions and color theory by evaluating generated design images against proven principles to ensure interfaces are both usable and visually satisfying.

Does this workflow require chrome-devtools to extract design guidelines?▼

Using chrome-devtools alongside ai-multimodal allows you to capture inspiration sources and extract design guidelines, which can then be saved into docs/design-guideline.md.