Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
/plugin marketplace add GGPrompts/my-plugins/plugin install aesthetic@my-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/design-guideline-template.mdassets/design-story-template.mdreferences/design-principles.mdreferences/design-resources.mdreferences/micro-interactions.mdreferences/storytelling-design.mdCreate aesthetically beautiful interfaces by following proven design principles and systematic workflows.
Use when:
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.
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.
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.
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.
Purpose: Extract design guidelines from inspiration websites.
Steps:
Purpose: Create aesthetically pleasing design images through iteration.
Steps:
Use assets/design-guideline-template.md to document:
Save in project ./docs/design-guideline.md.
Use assets/design-story-template.md to document:
Save in project ./docs/design-story.md.
References: references/design-resources.md - Inspiration platforms, design systems, AI tools, MCP integrations, development strategies.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.