# UI Polish > Design aesthetics workflow — 4-stage refinement (Beautiful → Right → Satisfying → Peak), inspiration capture, design image analysis with AI, iterative visual improvement, balancing beauty with functionality. Use when evaluating design quality, refining visual aesthetics, creating design systems, or iterating on UI polish. Use when this capability is needed. - Skill: `tomevault-io/ui-polish` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/ui-polish` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-polish/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Productivity - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/ui-polish --- # Aesthetic Design Mastery A systematic workflow for achieving peak visual quality. Move beyond "looks okay" to "this is remarkable." ## The 4 Stages of Aesthetic Quality ### Stage 1: Beautiful 🎨 **Goal:** Create immediate visual appeal. The user's first reaction should be "wow." ```markdown Checklist: - [ ] Color palette creates emotional resonance - [ ] Typography hierarchy is clear and elegant - [ ] Spacing and alignment are pixel-perfect - [ ] Visual weight is balanced across the layout - [ ] Contrast ratios meet accessibility standards (WCAG AA) - [ ] No visual clutter — every element earns its place ``` ### Stage 2: Right ✅ **Goal:** The design serves its purpose. Beauty without function is decoration. ```markdown Checklist: - [ ] Primary action is immediately obvious - [ ] Information hierarchy matches user priority - [ ] Navigation is intuitive (3-click rule) - [ ] Content is scannable (headings, bullets, whitespace) - [ ] Forms are minimal (ask only what's necessary) - [ ] Responsive behavior maintains usability at all sizes - [ ] Loading states are handled gracefully ``` ### Stage 3: Satisfying 😊 **Goal:** Using the interface feels good. Micro-interactions create delight. ```markdown Checklist: - [ ] Button clicks have instant visual feedback - [ ] Form submissions show progress and confirmation - [ ] Transitions are smooth and purposeful - [ ] Error states are clear and helpful (not just red text) - [ ] Success states celebrate the completion - [ ] Hover states invite interaction - [ ] Scroll behavior is smooth and predictable ``` ### Stage 4: Peak 🏔 **Goal:** The interface transcends utility. It becomes memorable. ```markdown Checklist: - [ ] The design has a distinctive "signature" element - [ ] Brand personality comes through in every detail - [ ] Copywriting matches the visual tone - [ ] Dark mode is a first-class experience (not inverted afterthought) - [ ] Animations tell a story / reveal hierarchy - [ ] Empty states are delightful (not just sad icons) - [ ] Error pages are on-brand and helpful ``` ## Workflow: Capture → Analyze → Iterate ### Step 1: Capture Inspiration ```markdown Sources: - Dribbble, Behance, Awwwards (curated design) - Land-book.com (landing page gallery) - Mobbin.com (mobile app patterns) - Godly.website (web design inspiration) - UI8.net (premium design resources) When you find something inspiring: 1. Screenshot the specific element (not the whole page) 2. Note: What makes it work? Color? Type? Spacing? Motion? 3. Save to a reference folder with tags ``` ### Step 2: Analyze with AI ```markdown Prompt template for design analysis: "Analyze this design image. Focus on: 1. Color palette — what colors are used, what's the relationship? 2. Typography — font choices, sizes, weights, hierarchy 3. Spatial composition — margins, padding, alignment system 4. Visual elements — icons, illustrations, shadows, borders 5. What makes this design feel premium/distinctive? 6. How could it be applied to [my project context]?" ``` ### Step 3: Iterate and Refine ```markdown Design iteration cycle: 1. Create first version (don't aim for perfection) 2. Compare against inspiration references 3. Identify the top 3 differences 4. Fix the most impactful difference first 5. Take a screenshot, compare again 6. Repeat until the gap closes Common refinements: - Reduce padding (most default UIs are too spacious) - Darken text slightly (pure black is too harsh) - Add subtle gradients to backgrounds - Use box-shadow with color tinting (not pure gray) - Increase font-weight contrast between heading/body ``` ## Reference Navigation - **[Color Theory Applied](references/color-theory.md)** — Palette generation, harmony, contrast, emotional associations - **[Typography Deep Dive](references/typography-deep-dive.md)** — Font selection, pairing, scale, responsive type - **[Design Analysis Framework](references/design-analysis.md)** — Structured approach to studying and learning from designs - **[Polish Checklist](references/polish-checklist.md)** — Final pass checklist for pixel-perfect results ## Beauty vs Function Balance ``` Beautiful │ ┌───────────┼───────────┐ │ │ │ Decoration IDEAL Unusable (pretty but (beauty (pretty but useless) serves confusing) │ function) │ │ │ │ └───────────┼───────────┘ │ Functional ``` **Target the IDEAL zone:** Every visual choice should enhance both beauty and usability. - A beautiful button that's clearly clickable → IDEAL - A beautiful animation that distracts from the CTA → Decoration - A minimal design where users can't find the nav → Unusable ## Related Skills | Skill | When to Use | |-------|-------------| | [frontend-design](../frontend-design/SKILL.md) | Design implementation, component styling | | [ui-styling](../ui-styling/SKILL.md) | Tailwind utilities, responsive design | | [code-review](../code-review/SKILL.md) | Design review checklist | --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/thienty1207) — claim your Tome and manage your conversions.