skills.rest
Khoatran1999
Khoatran1999COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Khoatran1999/aquarium-commerce --skill aesthetic-khoatran1999
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
kettleofketchupkettleofketchup
13

aesthetic

Generate and document UI/UX designs using a four-stage aesthetic framework.

Community
Advanced
elihunter173elihunter173
4

write-pr

Create draft GitHub pull requests with standardized titles and descriptions via gh CLI.

Community
Basic
chef0111chef0111
1

aesthetic

Analyze design screenshots and generate aesthetically refined UI mockups.

Community
Advanced
1toe1toe

critique

Critique web or app designs for usability, visual hierarchy, and quality.

Community
Advanced