aesthetic_skill

Overview

This skill helps create aesthetically beautiful interfaces by applying proven design principles and repeatable workflows. It combines inspiration analysis, iterative image generation, micro-interaction guidance, and design documentation to ensure designs are both delightful and usable. Use it to shape visual systems, evaluate aesthetics objectively, and produce production-ready design guidelines.

How this skill works

The skill inspects screenshots and design images to extract style, layout, typography, color palettes, component patterns, micro-interactions, and accessibility issues. It integrates with chrome-devtools for captures, ai-multimodal for generation and analysis, and media-processing/ui-styling/web-frameworks for refinement and implementation. Iterative loops score outputs and drive targeted refinements until an aesthetic threshold is met.

When to use it

• Designing or redesigning UI/UX for web or mobile products
• Analyzing inspiration from Dribbble, Behance, Mobbin, or Awwwards
• Generating and iterating AI design images until professional standards are met
• Implementing visual hierarchy, color theory, typography, and spacing
• Adding micro-interactions and animation timing to improve perceived quality

Best practices

• Start by capturing high-quality full-screen screenshots of inspirations and document patterns
• Use objective aesthetic scoring (aim ≥ 7/10) and iterate on specific weaknesses
• Balance BEAUTIFUL aesthetics with RIGHT functionality and accessibility (WCAG)
• Apply SATISFYING micro-interaction rules (150–300ms, easing curves) sparingly
• Document color, typography, spacing, and component rules in a living design guideline

Example use cases

• Extract a color palette and typography system from a set of inspiration screens for a new product theme
• Generate several hero-section visuals with ai-multimodal, analyze scores, refine prompts and assets until acceptable
• Create a design system document that captures visual hierarchy, component behaviors, and accessibility rules
• Add and tune micro-interactions across a flow to improve perceived speed and delight
• Capture inspiration with chrome-devtools and produce a brief with predicted Google Fonts and hex palettes