Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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 des
.claude/skills/itamarzand88-aesthetic/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 224% | 0% |
| case-06 | ✗→✓ | ▲ Improved | -6% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 29% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -6% | 0% |
| case-10 | ✗→✓ | ▲ Improved | -4% | 0% |
<!-- source: claudekit-aesthetic-ui — https://raw.githubusercontent.com/mrgoonie/claudekit-skills/main/.claude/skills/aesthetic/SKILL.md -->
Create 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:
IMPORTANT: Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
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.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 13,254 | 25,984 | +96% | 1 | 1 | 0% | 2,301 | 7,448 | +224% | 0 | 0 | — |
case-02 | fail→fail | 26,148 | 23,477 | -10% | 1 | 1 | 0% | 6,197 | 6,200 | +0% | 0 | 0 | — |
case-03 | pass→pass | 8,326 | 6,468 | -22% | 1 | 1 | 0% | 1,864 | 2,961 | +59% | 0 | 0 | — |
case-04 | pass→pass | 5,085 | 5,390 | +6% | 1 | 1 | 0% | 1,252 | 2,358 | +88% | 0 | 0 | — |
case-05 | pass→pass | 4,488 | 4,363 | -3% | 1 | 1 | 0% | 1,031 | 2,213 | +115% | 0 | 0 | — |
case-06 | fail→pass | 10,246 | 3,962 | -61% | 1 | 1 | 0% | 2,116 | 1,988 | -6% | 0 | 0 | — |
case-07 | pass→pass | 9,998 | 7,223 | -28% | 1 | 1 | 0% | 1,929 | 2,596 | +35% | 0 | 0 | — |
case-08 | fail→pass | 10,594 | 9,154 | -14% | 1 | 1 | 0% | 2,522 | 3,249 | +29% | 0 | 0 | — |
case-09 | fail→pass | 7,015 | 1,660 | -76% | 1 | 1 | 0% | 1,594 | 1,499 | -6% | 0 | 0 | — |
case-10 | fail→pass | 7,633 | 1,855 | -76% | 1 | 1 | 0% | 1,663 | 1,590 | -4% | 0 | 0 | — |
case-11 | pass→pass | 8,691 | 7,000 | -19% | 1 | 1 | 0% | 1,779 | 2,674 | +50% | 0 | 0 | — |
case-12 | pass→pass | 8,152 | 2,580 | -68% | 1 | 1 | 0% | 1,735 | 1,757 | +1% | 0 | 0 | — |
case-13 | pass→pass | 10,502 | 7,390 | -30% | 1 | 1 | 0% | 1,948 | 2,679 | +38% | 0 | 0 | — |
case-14 | pass→pass | 5,710 | 4,750 | -17% | 1 | 1 | 0% | 1,130 | 2,405 | +113% | 0 | 0 | — |
case-15 | pass→pass | 12,217 | 11,874 | -3% | 1 | 1 | 0% | 2,478 | 4,104 | +66% | 0 | 0 | — |
case-16 | pass→pass | 4,682 | 4,035 | -14% | 1 | 1 | 0% | 1,039 | 2,046 | +97% | 0 | 0 | — |
case-17 | pass→pass | 6,849 | 2,825 | -59% | 1 | 1 | 0% | 1,478 | 1,861 | +26% | 0 | 0 | — |
case-18 | pass→pass | 11,436 | 1,627 | -86% | 1 | 1 | 0% | 2,072 | 1,517 | -27% | 0 | 0 | — |
case-19 | pass→pass | 10,223 | 8,054 | -21% | 1 | 1 | 0% | 1,862 | 2,843 | +53% | 0 | 0 | — |
case-20 | pass→pass | 9,623 | 5,346 | -44% | 1 | 1 | 0% | 1,951 | 2,305 | +18% | 0 | 0 | — |
case-21 | pass→pass | 10,212 | 1,998 | -80% | 1 | 1 | 0% | 1,908 | 1,654 | -13% | 0 | 0 | — |
case-22 | fail→pass | 6,635 | 13,873 | +109% | 1 | 1 | 0% | 1,420 | 3,992 | +181% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +27 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.