Aesthetic

Create aesthetically beautiful interfaces by following proven design principles and systematic workflows.

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

Core Framework: Four-Stage Approach

1. BEAUTIFUL: Understanding Aesthetics

Study existing designs, identify patterns, extract principles. AI lacks aesthetic sense—standards must come from analyzing high-quality examples and aligning with market tastes.

Reference: references/design-principles.md

• 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

• Design systems, component libraries, WCAG accessibility standards.

3. SATISFYING: Micro-Interactions

Incorporate subtle animations with appropriate timing (150-300ms), easing curves (ease-out for entry, ease-in for exit), sequential delays.

Reference: references/micro-interactions.md

• Duration guidelines, easing curves, performance optimization.

4. PEAK: Storytelling Through Design

Elevate with narrative elements—parallax effects, particle systems, thematic consistency. Use restraint: "too much of anything isn't good."

Reference: references/storytelling-design.md

• Narrative elements, scroll-based storytelling, interactive techniques.

Workflows

Workflow 1: Capture & Analyze Inspiration

Purpose: Extract design guidelines from inspiration websites.

Steps:

• Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)

• Use chrome-devtools skill to capture full-screen screenshots (not full page)

• Use ai-multimodal skill to analyze screenshots and extract:

• Design style (Minimalism, Glassmorphism, Neo-brutalism, etc.)

• Layout structure & grid systems

• Typography system & hierarchy IMPORTANT: Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.

• Color palette with hex codes

• Visual hierarchy techniques

• Component patterns & styling

• Micro-interactions

• Accessibility considerations

• Overall aesthetic quality rating (1-10)

• Document findings in project design guidelines using templates

Workflow 2: Generate & Iterate Design Images

Purpose: Create aesthetically pleasing design images through iteration.

Steps:

• Define design prompt with: style, colors, typography, audience, animation specs

• Use ai-multimodal skill to generate design images with Gemini API

• Use ai-multimodal skill to analyze output images and evaluate aesthetic quality

• If score < 7/10 or fails professional standards:

• Identify specific weaknesses (color, typography, layout, spacing, hierarchy)

• Refine prompt with improvements

• Regenerate with ai-multimodal or use media-processing skill to modify outputs (resize, crop, filters, composition)

• Repeat until aesthetic standards met (score ≥ 7/10)

• Document final design decisions using templates

Design Documentation

Create Design Guidelines

Use assets/design-guideline-template.md to document:

• Color patterns & psychology

• Typography system & hierarchy

• Layout principles & spacing

• Component styling standards

• Accessibility considerations

• Design highlights & rationale

Save in project ./docs/design-guideline.md .

Create Design Story

Use assets/design-story-template.md to document:

• Narrative elements & themes

• Emotional journey

• User journey & peak moments

• Design decision rationale

Save in project ./docs/design-story.md .

Resources & Integration

Related Skills

• ai-multimodal: Analyze documents, screenshots & videos, generate design images, edit generated images, evaluate aesthetic quality using Gemini API

• chrome-devtools: Capture full-screen screenshots from inspiration websites, navigate between pages, interact with elements, read console logs & network requests

• media-processing: Refine generated images (FFmpeg for video, ImageMagick for images)

• ui-styling: Implement designs with shadcn/ui components + Tailwind CSS utility-first styling

• web-frameworks: Build with Next.js (App Router, Server Components, SSR/SSG)

Reference Documentation

References: references/design-resources.md

• Inspiration platforms, design systems, AI tools, MCP integrations, development strategies.

Key Principles

• Aesthetic standards come from humans, not AI—study quality examples

• Iterate based on analysis—never settle for first output

• Balance beauty with functionality and accessibility

• Document decisions for consistency across development

• Use progressive disclosure in design—reveal complexity gradually

• Always evaluate aesthetic quality objectively (score ≥ 7/10)