Aesthetic

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. 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 - Load for 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 - Load for narrative elements, scroll-based storytelling, interactive techniques.

Frontend Implementation Guidelines

Typography

Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. Pair a distinctive display font with a refined body font.

Color & Theme

Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

Motion & Animation

Use animations for effects and micro-interactions. Prioritize CSS-only solutions. Use anime.js for complex animations.

Reference: references/animejs.md - Load when implementing anime.js v4 animations.

Spatial Composition

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

Backgrounds & Visual Details

Create atmosphere and depth. Add contextual effects and textures: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.

Reference: references/implementation-guide.md - Load for detailed frontend design execution patterns.

Workflows

Workflow 1: Capture & Analyze Inspiration

Extract design guidelines from inspiration websites:

1. Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)
2. Use chrome-devtools skill to capture full-screen screenshots
3. Use ai-multimodal skill to analyze and extract design patterns
4. Document findings in project design guidelines

Reference: references/workflows.md - Load for complete workflow steps and analysis checklist.

Workflow 2: Generate & Iterate Design Images

Create aesthetically pleasing designs through iteration:

1. Define design prompt with style, colors, typography, audience
2. Use ai-multimodal skill to generate design images
3. Evaluate aesthetic quality (must score >= 7/10)
4. Iterate until professional standards met
5. Document final design decisions

Reference: references/workflows.md - Load for complete iteration process and quality standards.

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.

Anti-Patterns: Avoid Generic AI Aesthetics

NEVER use:

• Overused font families (Inter, Roboto, Arial, system fonts)
• Cliched color schemes (particularly purple gradients on white backgrounds)
• Predictable layouts and component patterns
• Cookie-cutter design that lacks context-specific character

Variation Principle: No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

Implementation Complexity Matching

Match implementation complexity to the aesthetic vision:

• Maximalist designs: Need elaborate code with extensive animations and effects
• Minimalist/refined designs: Need restraint, precision, careful attention to spacing, typography, and subtle details
• Elegance: Comes from executing the vision well

Related Skills Integration

• ai-multimodal: Analyze documents, screenshots & videos, generate design images, evaluate aesthetic quality using Gemini API
• chrome-devtools: Capture screenshots from inspiration websites, navigate pages, interact with elements
• media-processing: Refine generated images (FFmpeg for video, ImageMagick for images)
• ui-styling: Implement designs with shadcn/ui components + Tailwind CSS
• web-frameworks: Build with Next.js, React, Vue

Reference: references/design-resources.md - Load for inspiration platforms, design systems, AI tools, MCP integrations.

Key Principles

1. Aesthetic standards come from humans, not AI - study quality examples
2. Choose a BOLD aesthetic direction and execute with precision
3. Iterate based on analysis - never settle for first output (minimum 7/10 quality)
4. Balance beauty with functionality and accessibility
5. Document decisions for consistency across development
6. Use progressive disclosure in design - reveal complexity gradually
7. Match implementation complexity to aesthetic vision
8. Avoid generic AI aesthetics - create context-specific character

Code Quality Standards

Implement working code that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear aesthetic point-of-view
• Meticulously refined in every detail

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.