How does it handle design inspiration?

It uses a workflow involving Chrome DevTools to capture screenshots and multimodal AI to analyze layouts, typography, and color palettes from inspiration sites.

Can this skill help with accessibility?

Yes, the 'RIGHT' stage of the framework focuses specifically on usability, component architecture, and meeting WCAG accessibility standards.

What is the Aesthetic Claude Code skill?

It is a specialized capability that enables Claude to follow professional design principles—BEAUTIFUL, RIGHT, SATISFYING, and PEAK—to create high-quality, functional user interfaces.

Does it support micro-interactions?

Absolutely. It provides specific guidance on easing curves, timing (150-300ms), and sequential delays to ensure animations are satisfying and performant.

How does the iterative design process work?

The skill generates design images using AI, evaluates them against aesthetic standards, and refines the prompts until a quality score of 7/10 or higher is achieved.

Aesthetic UI & UX Design

Name: Aesthetic UI & UX Design
Author: mrgoonie

bymrgoonie

•

1,395

•

디자인 도구

Creates visually stunning and functional user interfaces using proven design principles, systematic workflows, and AI-driven image iteration.

The Aesthetic skill provides a comprehensive framework for building beautiful interfaces by bridging the gap between AI generation and human design standards. It guides Claude through a rigorous four-stage process—Beautiful, Right, Satisfying, and Peak—covering everything from visual hierarchy and color theory to micro-interactions and narrative storytelling. By integrating with multimodal tools and browser automation, it enables developers to analyze industry-leading inspiration, generate high-quality design assets, and document comprehensive design systems directly within their coding environment.

주요 기능

01Iterative design image generation with objective quality scoring

02Standardized templates for design guidelines and storytelling documentation

03Systematic four-stage design framework: Beautiful, Right, Satisfying, and Peak

041,395 GitHub stars

05Automated inspiration analysis via Chrome DevTools and multimodal AI

06Implementation guidance for typography, color theory, and visual hierarchy

사용 사례

01Implementing accessible and polished components with micro-interactions and smooth animations

02Extracting design systems and style guides from professional inspiration sites like Dribbble or Behance

03Generating and refining high-fidelity UI assets through iterative AI feedback loops

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mrgoonie/claudekit-skills aesthetic

For use in Claude.ai and ChatGPT

Download Skill