Aesthetic

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: 1. Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards) 2. Use chrome-devtools skill to capture full-screen screenshots (not full page) 3. 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)

4. Document findings in project design guidelines using templates

Workflow 2: Generate & Iterate Design Images

Purpose: Create aesthetically pleasing design images through iteration.

Steps: 1. Define design prompt with: style, colors, typography, audience, animation specs 2. Use ai-multimodal skill to generate design images with Gemini API 3. Use ai-multimodal skill to analyze output images and evaluate aesthetic quality 4. 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)

5. Repeat until aesthetic standards met (score ≥ 7/10) 6. 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

1. Aesthetic standards come from humans, not AI—study quality examples 2. Iterate based on analysis—never settle for first output 3. Balance beauty with functionality and accessibility 4. Document decisions for consistency across development 5. Use progressive disclosure in design—reveal complexity gradually 6. Always evaluate aesthetic quality objectively (score ≥ 7/10)

Design Guidelines: [Project Name]

_Generated: [Date]_

Design Style

[Specify: Minimalism, Glassmorphism, Neo-brutalism, Modern, Memphis, Flat Design, etc.]

Color Palette

Primary Colors

• Primary: #000000 - [Description/Usage]
• Secondary: #000000 - [Description/Usage]

Accent Colors

• Accent: #000000 - [Description/Usage]
• Success: #000000 - [Description/Usage]
• Warning: #000000 - [Description/Usage]
• Error: #000000 - [Description/Usage]

Neutral Colors

• Background: #000000 - [Description/Usage]
• Surface: #000000 - [Description/Usage]
• Border: #000000 - [Description/Usage]

Color Psychology

[Explain mood and emotions evoked by color choices]

Typography System

Font Families

• Primary Font: [Font Name] - Body text, paragraphs
• Secondary Font: [Font Name] - Headings, emphasis
• Monospace Font: [Font Name] - Code, technical content

Font Hierarchy

• H1: [Size]px / [Weight] / [Line Height] - [Usage]
• H2: [Size]px / [Weight] / [Line Height] - [Usage]
• H3: [Size]px / [Weight] / [Line Height] - [Usage]
• Body: [Size]px / [Weight] / [Line Height] - [Usage]
• Small: [Size]px / [Weight] / [Line Height] - [Usage]

Typography Guidelines

• Line length: [Character count] characters max
• Paragraph spacing: [Value]
• Letter spacing: [Value]

Layout Principles

Grid System

• Columns: [Number]
• Gutter: [Size]px
• Margin: [Size]px
• Max width: [Size]px

Spacing Scale

• xs: [Size]px
• sm: [Size]px
• md: [Size]px
• lg: [Size]px
• xl: [Size]px
• 2xl: [Size]px

Responsive Breakpoints

• Mobile: [Width]px
• Tablet: [Width]px
• Desktop: [Width]px
• Wide: [Width]px

Component Styling

Buttons

• Primary: [Description of style]
• Secondary: [Description of style]
• Ghost: [Description of style]
• Sizes: [List sizes]
• States: Default, Hover, Active, Disabled

Cards

• Border radius: [Value]
• Shadow: [Value]
• Padding: [Value]
• Background: [Color]

Forms

• Input height: [Value]
• Border radius: [Value]
• Focus state: [Description]
• Error state: [Description]

Navigation

• [Description of nav patterns]

Visual Hierarchy

Emphasis Techniques

• [List how to draw attention: size, color, placement, etc.]

Content Flow

• [Describe reading patterns: F-pattern, Z-pattern, etc.]

Micro-Interactions

Animation Timing

• Fast: 150ms - [Usage]
• Normal: 250ms - [Usage]
• Slow: 350ms - [Usage]

Easing Curves

• Ease-out: [Usage]
• Ease-in: [Usage]
• Spring: [Usage]

Interactive States

• Hover: [Description]
• Active: [Description]
• Focus: [Description]
• Loading: [Description]

Accessibility

Contrast Ratios

• Text: [Ratio] (WCAG AA: 4.5:1 minimum)
• Large text: [Ratio] (WCAG AA: 3:1 minimum)
• UI elements: [Ratio]

Focus Indicators

• [Description of focus styles]

Touch Targets

• Minimum size: 44x44px

Design Highlights

What Works Well

• [List successful design decisions]

Unique Elements

• [List distinctive design features]

Brand Alignment

• [Explain how design supports brand identity]

Implementation Notes

Technologies

• [List frameworks, libraries, tools used]

Performance Considerations

• [List optimization strategies]

Browser Support

• [List supported browsers/versions]

Resources

Design Files

• Figma: [Link]
• Assets: [Link]

Related Documentation

• [Link to design-story.md]
• [Link to component library]

Design Story: [Project Name]

_Generated: [Date]_

Project Context

Purpose

[What problem does this design solve?]

Target Audience

[Who is this design for?]

Key Objectives

1. [Objective 1] 2. [Objective 2] 3. [Objective 3]

Design Narrative

Core Message

[What story does this design tell?]

Emotional Journey

[What should users feel as they interact?]

Visual Metaphor

[What metaphor or theme unifies the design?]

User Journey

Entry Point

First Impression: [What users see first] Goal: [What should users understand immediately] Design Choices: [How design supports this]

Exploration Phase

User Actions: [What users do next] Design Response: [How interface responds] Micro-Interactions: [Subtle feedback provided]

Engagement Phase

Key Interactions: [Main user activities] Visual Feedback: [How design reinforces actions] Storytelling Elements: [Narrative reinforcement]

Peak Moment

Highlight: [Most memorable interaction] Implementation: [How it's achieved technically] Purpose: [Why this moment matters]

Thematic Elements

Visual Theme

[Description of consistent visual approach]

Narrative Devices

• Parallax: [How depth is used]
• Transitions: [How sections connect]
• Progressive Disclosure: [How information unfolds]
• Motion: [How animation tells the story]

Symbolism

[Meaning behind design choices]

Design Decisions

Why This Style?

[Rationale for design style choice]

Why These Colors?

[Reasoning behind color palette]

Why This Layout?

[Logic behind structure and flow]

Why These Interactions?

[Purpose of micro-interactions chosen]

Technical Storytelling

Performance Story

[How fast loading enhances narrative]

Responsive Story

[How design adapts across devices]

Accessibility Story

[How inclusive design supports everyone]

Evolution

Initial Concepts

[Early ideas explored]

Key Iterations

[Major changes and why]

Final Direction

[Ultimate design rationale]

Inspiration

Design References

• [Source 1]: [What inspired]
• [Source 2]: [What inspired]
• [Source 3]: [What inspired]

Cultural Context

[Broader design trends considered]

Impact

Intended Effect

[What users should take away]

Success Metrics

[How to measure if story resonates]

Future Chapters

[How design can evolve]

Reflections

What Worked

[Successful narrative elements]

What We Learned

[Insights gained from process]

What's Next

[Future storytelling opportunities]

---

Remember: Every design tells a story. Make it intentional, coherent, and meaningful.

Design Principles: Beautiful & Right

BEAUTIFUL: Understanding Aesthetic Principles

Study Process

Analyze high-quality designs on Dribbble, Mobbin, Behance. Ask AI to identify:

• Design styles (Memphis, Flat Design, Glassmorphism, Neo-brutalism, Minimalism)
• Layout structures & applications
• Typography systems (font pairing, hierarchy, scaling)
• Color systems (palettes, contrasts, psychology)

Visual Hierarchy

Guide users through interfaces effectively:

• Size: Larger elements draw attention first
• Contrast: High contrast (text/background) boosts readability
• Typography: Use weight, size, style for hierarchy
• Placement: F-pattern (web), Z-pattern (landing pages)
• Spacing: White space improves clarity, reduces cognitive load

Typography Best Practices

• Stick to 2-3 typefaces max
• Clear font hierarchy with proper spacing, sizes, alignment
• Appropriate font sizes for readability across devices
• Short, scannable paragraphs

Color Theory Applications

• Blue: Trust, security, calmness
• Red: Urgency, passion, excitement
• Warm colors: Drive urgency
• Cool colors: Create trust
• Use color intentionally to direct attention & evoke emotion
• Ensure WCAG AA contrast ratios (4.5:1 text, 3:1 large text)

White Space

Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.

RIGHT: Ensuring Functionality

Design Systems Research

Search "Figma Design System + [style]" to understand:

• Component architecture (atomic design: atoms → molecules → organisms)
• Layout principles (grid systems, responsive breakpoints)
• UX patterns & interactions

Component Library Standards

• Semantic HTML first (button > div with ARIA roles)
• Built-in accessibility, focus handling, keyboard interaction
• Each component tested for accessibility before adding
• Documentation includes structure, focus order, keyboard expectations, screen reader announcements

Accessibility Requirements

• WCAG 2.1 AA minimum (work toward 2.2)
• Color contrast ratios meet/exceed minimums
• Alt text for images
• Color-blind-friendly palettes
• Keyboard navigation support
• Screen reader compatibility

Testing Protocol

• Automated tools catch 30-50% of issues
• Manual testing crucial for comprehensive coverage
• Test with real users when possible

Design Resources & Tools

Inspiration Platforms

Design Galleries

• Dribbble: High-quality UI/UX designs, trending styles
• Mobbin: Mobile app design patterns, real-world examples
• Behance: Creative portfolios, comprehensive projects
• Awwwards: Award-winning web experiences
• 21st.dev: Component animations, micro-interactions
• CSS Design Awards: Cutting-edge web designs

Design Systems

Search pattern: "Figma Design System + [style name]"

• Material Design (Google)
• Human Interface Guidelines (Apple)
• Carbon Design System (IBM)
• Ant Design
• Shadcn UI
• Atlassian Design System

AI Tools for Design

Generation

• Gemini: Image generation via ai-multimodal skill
• Claude: Design variations, component code

Prompt Structure

Include in prompts:

• Task description
• Preferred design style
• Color palette
• Typography preferences
• Target audience/user story
• Animation specifications

MCP Integrations

Available MCPs

• Chrome MCP: Research designs, analyze trends from Dribbble/Mobbin
• Figma MCP: Code based on community designs
• Freepik MCP: Access stock imagery
• ChatGPT-Image MCP: Image resources
• gallery-dl: Download reference images via bash

Usage

Connect MCPs for enhanced capabilities when researching, analyzing, or implementing designs.

Development Approach

Git Worktrees Strategy

Maintain separate branches for different design style variations during development. Allows parallel exploration of Minimalist, Modern, Glassmorphism interpretations.

Parallel Agents

Use multiple agents to generate design style variations simultaneously, compare approaches.

Documentation Standards

Required Files

Create in ./docs/ directory:

• design-guideline.md: Color patterns, typography, layout principles, component styling, design highlights
• design-story.md: Narrative elements, thematic decisions, user journey considerations

Content

Document:

• Rationale for design decisions
• Style guide (colors, fonts, spacing)
• Component patterns & usage
• Responsive breakpoints
• Accessibility considerations
• Brand alignment

Maintenance

Update during development. Use development rules to remind Claude Code to follow guidelines consistently.

Micro-Interactions: Satisfying Experience

SATISFYING: Adding Micro-Interactions

Duration Guidelines

• General micro-interactions: 150-300ms (avoid interrupting flow)
• Button presses: Start within 16ms of click
• Standard animations: 200-500ms
• UI motions: 0.5-2s typically
• Rule: A tenth of a second makes big difference; half second wrong feels jarring

Basic Effects

• Fade: Smooth opacity transitions
• Slide: Directional movement (left/right/up/down)
• Scale: Size changes (grow/shrink)
• Rotate: Angular transformations
• Sequential timing with 0.1s delays between elements

Easing Curves

Linear motion = robotic. Use easing for natural feel:

Ease-out (starts fast, slows down):

• Best for: Elements entering screen
• Makes animation feel responsive
• Allows eye time to focus as element settles
• Most common for UI micro-interactions

Ease-in (starts slow, speeds up):

• Best for: Elements leaving screen
• Natural exit motion

Spring/bounce:

• Playful, energetic feel
• Use sparingly for emphasis

Cubic-bezier:

• Fine-tuned control over motion curves
• Custom easing for specific needs

Motion Characteristics

• Follow real-world physics (objects speed up when starting, slow down when stopping)
• Subtle curves for micro-interactions
• Bolder curves for attention-grabbing transitions
• Always have purpose—guide users or give feedback

Performance

• Aim for smooth 60fps
• Prefer hardware-accelerated properties (transforms, opacity)
• Avoid fancy effects causing frame drops or battery drain
• Provide motion-reduced alternatives for accessibility

Resources

Study 21st.dev for component animations & subtle effects worth emulating.

Storytelling Design: Peak Experience

PEAK: Storytelling Through Design

Narrative Elements

Elevate designs by incorporating story-driven interactions:

• Parallax effects: Different scroll speeds create depth
• Particle systems: Dynamic, living background elements
• Thematic consistency: Every element reinforces the narrative
• Progressive disclosure: Reveal information as user explores

Key Principle

"Too much of anything isn't good"—use restraint. Peak moments should be intentional, not overwhelming.

Implementation Approaches

Scroll-Based Storytelling:

• Reveal content in meaningful sequences
• Use scroll position to trigger animations
• Create depth with parallax layers
• Build anticipation through pacing

Interactive Elements:

• Hover states that reveal additional context
• Click interactions that unfold stories
• Drag interactions that manipulate narrative elements
• Gesture-based reveals on mobile

Visual Narrative:

• Hero sections that set tone
• Consistent visual metaphors throughout
• Imagery that supports the message
• Typography that reinforces brand personality

Technical Considerations

• Ensure storytelling enhances, not hinders, usability
• Maintain performance (60fps) during narrative elements
• Provide accessibility alternatives
• Test across devices & screen sizes
• Graceful degradation for older browsers

Inspiration Sources

Study award-winning sites like:

• Awwwards.com winners
• CSS Design Awards
• FWA (Favourite Website Awards)
• Brand campaign sites

Balance

Strong storytelling + solid functionality = peak experience. Neither should sacrifice the other.