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)