Can it analyze existing websites for design inspiration?

Yes, it integrates with the chrome-devtools skill to capture screenshots and the ai-multimodal skill to extract design patterns, color palettes, and typography from inspiration sites.

What is the aesthetic quality rating system?

The skill uses a 1-10 scoring system to evaluate design outputs, requiring an iterative process until a score of 7 or higher is achieved, ensuring professional-grade results.

Does it support micro-interactions and animations?

Yes, the 'SATISFYING' stage provides specific guidance on animation timing (150-300ms), easing curves, and performance optimization for frontend interfaces.

How does this skill help with UI accessibility?

It follows the 'RIGHT' stage of its framework, specifically providing guidance on WCAG accessibility standards and component architecture to ensure beauty doesn't compromise usability.

Aesthetic UI Design

Name: Aesthetic UI Design
Author: GGPrompts

byGGPrompts

•

디자인 도구

Creates visually stunning and accessible user interfaces by applying professional design principles and iterative AI workflows.

The Aesthetic skill transforms Claude into a sophisticated UI/UX design partner, enabling the creation of high-fidelity interfaces through a systematic four-stage framework: Beautiful, Right, Satisfying, and Peak. It bridges the gap between AI generation and human design standards by facilitating the analysis of inspiration sites, generating and refining design assets via multimodal AI, and documenting comprehensive style guides. This skill is essential for developers who need to implement professional-grade visual hierarchies, typography systems, and micro-interactions while maintaining strict accessibility standards and functional integrity.

주요 기능

011 GitHub stars

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

03Iterative design image generation with objective aesthetic quality scoring

04Comprehensive design documentation templates for style guides and design stories

05Guided implementation of micro-interactions, animations, and visual hierarchy

06Inspiration analysis and extraction from platforms like Dribbble, Behance, and Mobbin

사용 사례

01Analyzing and reverse-engineering the aesthetic patterns of high-end inspiration websites

02Iteratively generating and refining UI mockups until they meet professional aesthetic standards

03Developing a cohesive design system and documentation for a new web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ggprompts/my-plugins aesthetic

For use in Claude.ai and ChatGPT