Aesthetic
Design beautiful, accessible interfaces using visual hierarchy and color theory
What You Can Do
You can build visually stunning interfaces by systematically applying visual hierarchy, color theory, and typography principles. Analyze inspiration from design platforms, generate and iterate on design images until they meet aesthetic standards, and create comprehensive design systems that ensure your interfaces are not only beautiful but also accessible and functionally sound.
Features
Structure interfaces to guide user attention through proven spacing, sizing, and contrast principles
Select and harmonize color palettes that enhance aesthetics while maintaining accessibility standards
Implement font pairing, scale, and hierarchy to improve readability and visual impact
Add polished animations and interactive feedback that delight users without hindering usability
Ensure designs meet WCAG standards while maintaining aesthetic excellence
Create comprehensive style guides covering components, patterns, and design tokens
Capture and deconstruct high-quality designs from platforms like Dribbble and Behance to extract principles
Refine AI-generated design images against aesthetic standards until they meet quality thresholds
Example Output
Visual Hierarchy Analysis:
- Primary CTA: 18px sans-serif, 600 weight, brand color, 12px padding
- Secondary actions: 14px, 500 weight, neutral color, subtle hover state
- Supporting text: 12px, 400 weight, gray-600, 1.5 line height
Color Palette Generated:
Primary: #2563EB (trust, professional)
Accent: #F59E0B (energy, call-to-action)
Neutral: #6B7280 (readability)
Background: #FFFFFF with #F9FAFB accents
Micro-Interaction Example:
- Button on hover: subtle scale (1.02), shadow elevation increase, 200ms transition
- Form input focus: border color shift, faint glow, placeholder fade, cursor highlight
What's Included
- SKILL.md: Complete aesthetic design framework with four-stage approach (BEAUTIFUL, RIGHT, SATISFYING, PEAK)
- Design Principles Reference: Visual hierarchy, typography, color theory, and white space guidelines
- Design System Template: Comprehensive structure for documenting components, patterns, and tokens
- Accessibility Checklist: WCAG compliance standards and testing procedures
- Inspiration Analysis Workflow: Process for capturing and deconstructing reference designs
Who It's For
- Product Designers — Create cohesive, aesthetically refined interfaces across digital products
- UX/UI Designers — Balance beautiful aesthetics with user functionality and accessibility
- Front-End Developers — Implement design systems with visual precision and micro-interactions
- Design Systems Leads — Build comprehensive, documented design frameworks for teams
- Brand Managers — Ensure visual consistency and aesthetic excellence across digital touchpoints
Best For
- Building new user interface designs from scratch
- Analyzing competitor and inspiration designs to extract principles
- Creating and documenting design systems and style guides
- Implementing visual hierarchy and color strategies
- Designing micro-interactions and animated feedback states
- Ensuring accessibility compliance in beautiful interfaces
You might also like
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
You can process multimedia content across multiple formats: transcribe audio files up to 9.5 hours with timestamps and speaker identification, analyze images for objects, text, and visual relationships, extract structured data from PDF documents including tables and charts, and generate images from text prompts with refinement capabilities. This skill unifies fragmented multimodal workflows into one coherent Claude-powered interface, eliminating context-switching between different tools.
by trungtv
You can audit, redesign, and polish frontend interfaces across websites, dashboards, product UIs, and app components. The skill systematically addresses visual hierarchy, accessibility standards, typography, responsive layouts, color theming, micro-interactions, and motion design—delivering actionable design improvements with working code, not just recommendations.
by pbakaus
You can rapidly prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
by trungtv
You can plan, build, and optimize complete UI/UX solutions for websites, dashboards, e-commerce platforms, and mobile apps. The skill provides curated design patterns (glassmorphism, minimalism, neumorphism, bento grids), 21 color palettes, 50 font pairings, 20+ chart types, and implementation guidance for 8 development stacks. Whether you're reviewing existing code, improving accessibility, or creating animations, you get framework-specific recommendations and responsive design strategies.
by trungtv