{"slug":"aesthetic","title":"aesthetic","summary":"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 des","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-05T21:53:01.812264Z","repo":{"url":"https://github.com/VoDaiLocz/kilo-kit-mcp","stars":27,"forks":3,"license":"Apache-2.0","updatedAt":"2026-09-13T09:11:19Z"},"bodyHtml":"<hr>\n<h2>name: aesthetic\ndescription: 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.</h2>\n<h1>Aesthetic</h1>\n<p>Create aesthetically beautiful interfaces by following proven design principles and systematic workflows.</p>\n<h2>When to Use This Skill</h2>\n<p>Use when:</p>\n<ul>\n<li>Building or designing user interfaces</li>\n<li>Analyzing designs from inspiration websites (Dribbble, Mobbin, Behance)</li>\n<li>Generating design images and evaluating aesthetic quality</li>\n<li>Implementing visual hierarchy, typography, color theory</li>\n<li>Adding micro-interactions and animations</li>\n<li>Creating design documentation and style guides</li>\n<li>Need guidance on accessibility and design systems</li>\n</ul>\n<h2>Core Framework: Four-Stage Approach</h2>\n<h3>1. BEAUTIFUL: Understanding Aesthetics</h3>\n<p>Study existing designs, identify patterns, extract principles. AI lacks aesthetic sense—standards must come from analyzing high-quality examples and aligning with market tastes.</p>\n<p><strong>Reference</strong>: <a href=\"references/design-principles.md\"><code>references/design-principles.md</code></a> - Visual hierarchy, typography, color theory, white space principles.</p>\n<h3>2. RIGHT: Ensuring Functionality</h3>\n<p>Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements.</p>\n<p><strong>Reference</strong>: <a href=\"references/design-principles.md\"><code>references/design-principles.md</code></a> - Design systems, component libraries, WCAG accessibility standards.</p>\n<h3>3. SATISFYING: Micro-Interactions</h3>\n<p>Incorporate subtle animations with appropriate timing (150-300ms), easing curves (ease-out for entry, ease-in for exit), sequential delays.</p>\n<p><strong>Reference</strong>: <a href=\"references/micro-interactions.md\"><code>references/micro-interactions.md</code></a> - Duration guidelines, easing curves, performance optimization.</p>\n<h3>4. PEAK: Storytelling Through Design</h3>\n<p>Elevate with narrative elements—parallax effects, particle systems, thematic consistency. Use restraint: \"too much of anything isn't good.\"</p>\n<p><strong>Reference</strong>: <a href=\"references/storytelling-design.md\"><code>references/storytelling-design.md</code></a> - Narrative elements, scroll-based storytelling, interactive techniques.</p>\n<h2>Workflows</h2>\n<h3>Workflow 1: Capture &amp; Analyze Inspiration</h3>\n<p><strong>Purpose</strong>: Extract design guidelines from inspiration websites.</p>\n<p><strong>Steps</strong>:</p>\n<ol>\n<li>Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)</li>\n<li>Use <strong>chrome-devtools</strong> skill to capture full-screen screenshots (not full page)</li>\n<li>Use <strong>ai-multimodal</strong> skill to analyze screenshots and extract:\n<ul>\n<li>Design style (Minimalism, Glassmorphism, Neo-brutalism, etc.)</li>\n<li>Layout structure &amp; grid systems</li>\n<li>Typography system &amp; hierarchy\n<strong>IMPORTANT:</strong> Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.</li>\n<li>Color palette with hex codes</li>\n<li>Visual hierarchy techniques</li>\n<li>Component patterns &amp; styling</li>\n<li>Micro-interactions</li>\n<li>Accessibility considerations</li>\n<li>Overall aesthetic quality rating (1-10)</li>\n</ul>\n</li>\n<li>Document findings in project design guidelines using templates</li>\n</ol>\n<h3>Workflow 2: Generate &amp; Iterate Design Images</h3>\n<p><strong>Purpose</strong>: Create aesthetically pleasing design images through iteration.</p>\n<p><strong>Steps</strong>:</p>\n<ol>\n<li>Define design prompt with: style, colors, typography, audience, animation specs</li>\n<li>Use <strong>ai-multimodal</strong> skill to generate design images with Gemini API</li>\n<li>Use <strong>ai-multimodal</strong> skill to analyze output images and evaluate aesthetic quality</li>\n<li>If score &lt; 7/10 or fails professional standards:\n<ul>\n<li>Identify specific weaknesses (color, typography, layout, spacing, hierarchy)</li>\n<li>Refine prompt with improvements</li>\n<li>Regenerate with <strong>ai-multimodal</strong> or use <strong>media-processing</strong> skill to modify outputs (resize, crop, filters, composition)</li>\n</ul>\n</li>\n<li>Repeat until aesthetic standards met (score ≥ 7/10)</li>\n<li>Document final design decisions using templates</li>\n</ol>\n<h2>Design Documentation</h2>\n<h3>Create Design Guidelines</h3>\n<p>Use <a href=\"assets/design-guideline-template.md\"><code>assets/design-guideline-template.md</code></a> to document:</p>\n<ul>\n<li>Color patterns &amp; psychology</li>\n<li>Typography system &amp; hierarchy</li>\n<li>Layout principles &amp; spacing</li>\n<li>Component styling standards</li>\n<li>Accessibility considerations</li>\n<li>Design highlights &amp; rationale</li>\n</ul>\n<p>Save in project <code>./docs/design-guideline.md</code>.</p>\n<h3>Create Design Story</h3>\n<p>Use <a href=\"assets/design-story-template.md\"><code>assets/design-story-template.md</code></a> to document:</p>\n<ul>\n<li>Narrative elements &amp; themes</li>\n<li>Emotional journey</li>\n<li>User journey &amp; peak moments</li>\n<li>Design decision rationale</li>\n</ul>\n<p>Save in project <code>./docs/design-story.md</code>.</p>\n<h2>Resources &amp; Integration</h2>\n<h3>Related Skills</h3>\n<ul>\n<li><strong>ai-multimodal</strong>: Analyze documents, screenshots &amp; videos, generate design images, edit generated images, evaluate aesthetic quality using Gemini API</li>\n<li><strong>chrome-devtools</strong>: Capture full-screen screenshots from inspiration websites, navigate between pages, interact with elements, read console logs &amp; network requests</li>\n<li><strong>media-processing</strong>: Refine generated images (FFmpeg for video, ImageMagick for images)</li>\n<li><strong>ui-styling</strong>: Implement designs with shadcn/ui components + Tailwind CSS utility-first styling</li>\n<li><strong>web-frameworks</strong>: Build with Next.js (App Router, Server Components, SSR/SSG)</li>\n</ul>\n<h3>Reference Documentation</h3>\n<p><strong>References</strong>: <a href=\"references/design-resources.md\"><code>references/design-resources.md</code></a> - Inspiration platforms, design systems, AI tools, MCP integrations, development strategies.</p>\n<h2>Key Principles</h2>\n<ol>\n<li>Aesthetic standards come from humans, not AI—study quality examples</li>\n<li>Iterate based on analysis—never settle for first output</li>\n<li>Balance beauty with functionality and accessibility</li>\n<li>Document decisions for consistency across development</li>\n<li>Use progressive disclosure in design—reveal complexity gradually</li>\n<li>Always evaluate aesthetic quality objectively (score ≥ 7/10)</li>\n</ol>\n","files":[{"path":"assets/design-guideline-template.md","sizeBytes":3511,"isText":true},{"path":"assets/design-story-template.md","sizeBytes":2682,"isText":true},{"path":"references/design-principles.md","sizeBytes":2400,"isText":true},{"path":"references/design-resources.md","sizeBytes":2287,"isText":true},{"path":"references/micro-interactions.md","sizeBytes":1734,"isText":true},{"path":"references/storytelling-design.md","sizeBytes":1663,"isText":true},{"path":"SKILL.md","sizeBytes":6334,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-05T22:00:00.719295Z","sha256":"D57A8B0BF94E105FF9EA9506691C05EE22BCD8B824D221BA35CFF62D3985F3E6","sizeBytes":10148},"review":null,"source":{"repositoryUrl":"https://github.com/VoDaiLocz/kilo-kit-mcp","path":"skills/design/aesthetic","license":"Apache-2.0","commit":"0448e6c050b84e0c0be0030593bd51cabbce3c81","subtreeSha":"42DA210F342BD65D031D2A7B7E4CBF29738B87D978F8A6EC4E38AF49556E40D6","lastSyncedAt":"2026-10-05T21:52:59.855581Z"},"reviewedAt":"2026-10-05T22:15:37.590699Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/VoDaiLocz/kilo-kit-mcp/tree/main/skills/design/aesthetic"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install vodailocz-kilo-kit-mcp@llmmart"},{"target":"git","command":"git clone https://github.com/VoDaiLocz/kilo-kit-mcp.git"}]}