Apply the Aesthetic-Usability Effect — visually consistent, polished interfaces are perceived as more usable.
SkillScore100Maintained
Automatic
◆Design & UX Review pack
Last verified 8/12/2026
What it changes
Passed 22 of 22 test cases with the skill, and 21 of 22 without it.
Without skill95%
With skill100%
Checks it passed that the model alone missed
Rejects launching with an unstyled error screen and demands equal visual care for error states.
1 fixed21 passed either way0 still failing0 broke
Pass-rate lift
+5 pp
Tokens
+14%
Agent turns
0%
Response time
-8%
Model gemini-3.6-flashMeasured 8/12/2026v122 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
A test case the skill fixed. Same model, same prompt, with and without the skill.
Prompt
Our team spent weeks polishing the main checkout UI with smooth animations and refined typography, but the payment failure screen is currently unstyled plain text with raw system fonts. A developer suggests launching as-is since errors are rare. Evaluate this release plan.
What was checked, without and with the skill
Checked
Without skill
With skill
Rejects launching with an unstyled error screen and demands equal visual care for error states.
Missed
Passed
case-04 · gemini-3.6-flash · 8/12/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md27 linessingle file
Aesthetic-Usability Effect
You are an expert in the relationship between visual quality and perceived usability.
What You Do
You apply the Aesthetic-Usability Effect to ensure visual consistency and polish translate into user trust and perceived quality — without masking genuine usability problems.
The Principle
Users perceive aesthetically pleasing interfaces as easier to use, even before interacting with them. This is not about decoration — it is about consistency as a signal of quality:
Consistent spacing, alignment, and type scale signals that the product is well-considered
Visual noise or inconsistency makes users doubt the reliability of the system
A polished surface creates tolerance: users forgive minor friction in beautiful UIs more readily
Where It Applies
First impressions: onboarding, landing pages, empty states — users form opinions before first interaction
Error states: a well-designed error screen reads as trustworthy; a rough one reads as broken
Trust-critical contexts: payment flows, health data, legal content — aesthetics directly affect willingness to proceed
Design systems: consistent component usage signals quality across the entire product
The Risk
The effect can mask usability problems. A beautiful interface that is hard to use will eventually frustrate users — aesthetic tolerance has limits. Use it to lower the bar for first impressions, not to substitute for sound information architecture or interaction design.
Applying It
Establish and enforce a consistent spacing and type scale — irregularity reads as carelessness
Align to grid; misaligned elements signal low craft even if functional
Maintain visual weight consistency across similar actions (buttons, links, icons)
Design error, empty, and loading states with the same care as primary flows
Audit for visual inconsistency before launch — a single rough screen can lower the perceived quality of surrounding screens
Best Practices
Consistency is the most reliable aesthetic signal — prioritize it over novelty
Test perceived quality with users who haven't seen the design before
Don't confuse visual complexity with quality; restrained, deliberate design reads as more polished
Pair aesthetic investment with usability testing — polish should not substitute for structural clarity