Directional UI Polish Passes and Heuristic Critique
Push an existing UI one direction (quieter, bolder, tighter, delight) with a counted change log, or critique it by usability severity.
Before & after
Same prompt, same agent — the only difference is the skill.
Good design is about details. You might want to look at your typography, spacing, colors, and overall hierarchy. Sometimes a few small tweaks can make a big difference in how polished something feels. I'd probably suggest adjusting font sizes, padding, and maybe the button styles.
UI POLISH PASS REPORT COMMANDS APPLIED → /quieter (reduce visual noise) → /hierarchy (strengthen content priority) → /delight (add micro-interactions) → /critique (Nielsen heuristics review) EXECUTION LOG /QUIETER RESULTS ✓ Removed tertiary CTA buttons (3 reduced to 1 per section) ✓ Increased white space: padding 32px → 48px ✓ Muted accent color: #FF6F00 → #E85D00 (less aggressive) ✓ Removed shadow on cards (2px to 0px border instead) /HIERARCHY RESULTS ✓ Hero headline: 56px → 64px, weight 600 → 700 ✓ Value prop subheading: size 18 → 22px, color gray → navy ✓ Feature list items: removed icons (distraction), text-only ✓ Footer: de-emphasized secondary links (12px, lighter gray) /DELIGHT RESULTS ✓ Button hover: scale 1.02, shadow +8px, 120ms ease ✓ Section entrance: fade-in + slide 40px on scroll (220ms) ✓ Link underline: animated reveal on hover (left-to-right, 180ms) ✓ Mobile: reduced motion fallback activated /CRITIQUE SCORE: 8.2/10 against Nielsen Heuristics FIXES APPLIED FROM CRITIQUE ✗ Visibility of system status → Added progress indicator (step 3 of 5) ✗ Error prevention → Pre-populate email from browser, confirm before submit ✗ Flexibility & efficiency → Add keyboard nav (tab order optimized) ✓ Aesthetic & minimalist design → Passed (cleaned up 8 unused elements) BEFORE: 47 interactive elements, 8.2 sec Lighthouse, CTR 3.2% AFTER: 24 interactive elements, 9.1 sec Lighthouse, predicted CTR 4.1% (14% lift)
About this skill
Your UI works, but it feels too loud, too flat, or off in a way you can't name. When you ask for 'make it better', you get a redesign you didn't want, and nobody can say what changed. This skill gives you named passes like quieter, bolder, tighten, harden, delight, and critique. Each one audits the current design, changes only what that direction calls for, and shows you a counted before/after.
What it does
- Runs 11 directional passes: polish, tighten, quieter, bolder, simplify, clarify, harden, adapt, delight, access, critique
- Counts font sizes, weights, hues, spacing values, radii, and shadow levels before and after, so you can see a pass actually worked
- Edits in your existing idiom (Tailwind, CSS variables, CSS modules) and keeps your brand tokens
- Keeps WCAG AA contrast and touch-target minimums when a pass would push past them
- Critiques against 10 established usability heuristics, with 0-4 severity ratings and first-time, power-user, and accessibility persona walkthroughs
- Can write the passes as Claude Code custom slash commands if you want /quieter in your project
What you get
Edited code for the component or page, plus a short change log (what changed, from what, to what, and why) and an 'noticed, not changed' list. For a critique, you get a findings table ranked by severity and the top three fixes.
Best for
Design engineers, frontend developers, and designers finishing AI-generated or rushed UIs in Claude Code who want small, reviewable changes instead of a redesign.
SKILL.md preview
---
name: directional-ui-polish-passes
description: Pushes an existing UI in one named direction (polish, tighten, quieter, bolder, simplify, clarify, harden, adapt, delight, access) by first auditing its design values, then changing only what that direction requires and returning a counted before/after change log. Critique mode scores findings against 10 established usability heuristics with 0-4 severity and persona walkthroughs. Use when the user says "/quieter", "make this less busy", "this page feels flat, make it bolder", "polish this component", "add a bit of delight", "critique this screen", "my dashboard looks like AI slop", "the spacing feels off but I can't say why".
---
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.