Agent skill · design visual · samhvw8
aesthetic
Visual design intelligence and UI aesthetics. Integrates: chrome-devtools, ai-multimodal, media-processing. Capabilities: design analysis, visual hierarchy, color theory, typography, micro-interactions, animation, design systems, accessibility. Actions: analyze, design, create, capture, evaluate, implement UI aesthetics. Keywords: Dribbble, Behance, Mobbin, design inspiration, visual hierarchy, color palette, typography, spacing, animation, micro-interaction, design system, style guide, accessibility, WCAG, contrast ratio, golden ratio, whitespace, visual rhythm. Use when: building beautiful UIs, analyzing design inspiration, implementing visual hierarchy, adding animations/micro-interactions, creating design systems, evaluating aesthetic quality, capturing design screenshots.
Why this skill is useful
Provides domain-specific knowledge on UI aesthetics, design principles, and implementation patterns that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2025-12-09. 10 stars on the source repository.
What this skill does
Aesthetic Create aesthetically beautiful interfaces by following proven design principles and systematic workflows. This skill combines design thinking, frontend implementation patterns, and comprehensive analysis techniques. When to Use This Skill Use when: Building or designing user interfaces Analyzing designs from inspiration websites (Dribbble, Mobbin, Behance) Generating design images and evaluating aesthetic quality Implementing visual hierarchy, typography, color theory Adding micro-interactions and animations Creating design documentation and style guides Need guidance on accessibility and design systems Building production-grade frontend interfaces with distinctive aesthetics Core Philosophy Design Thinking First: Before coding, understand context and commit to a BOLD aesthetic direction. Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Evidence-Based Aesthetics: AI lacks aesthetic sense - standards must come from analyzing high-quality examples and aligning with market tastes. Study existing designs, identify patterns, extract principles. Progressive Excellence: Start with BEAUTIFUL (aesthetics), ensure RIGHT (functionality/accessibility), add SATISFYING (micro-interactions), elevate with PEAK (storytelling). Quick Reference Framework 1. BEAUTIFUL: Understanding Aesthetics Study existing designs, identify patterns, extract principles. Reference: references/design-principles.md - Load for visual hierarchy, typography, color theory, white space principles. 2. RIGHT: Ensuring Functionality Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements. Reference: references/design-principles.md - Load for design systems, component libraries, WCAG accessibility standards. 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills samhvw8/aesthetic