Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →wondelai/refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs.
Passed 20 of 24 test cases with the skill, and 17 of 24 without it.
and 1 more in the full report
3 fixed17 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are designing a new feature management control panel in HTML and CSS. The design team wants to immediately select brand color hex codes, active button gradients, and alert red or green hues before laying out the grid and typography. How should the color application workflow be structured when refactoring this interface?
| Checked | Without skill | With skill |
|---|---|---|
| Recommends designing the interface in grayscale first. | Missed | Passed |
| Recommends adding color as the final design step. | Missed | Passed |
The instructions your model reads when the skill loads.
A practical, opinionated approach to UI design. Apply these principles when generating frontend code, reviewing designs, or advising on visual improvements.
Design in grayscale first. Add color last. This forces proper hierarchy through spacing, contrast, and typography before relying on color as a crutch.
The foundation: Great UI isn't about talent — it's about systems. Constrained scales for spacing, type, color, and shadows produce consistently professional results. Start with too much white space and remove; leave details (icons, shadows, micro-interactions) until layout and hierarchy work.
Goal: 10/10. Score by counting satisfied rows in the Quick Diagnostic (8 yes/no checks): score = round(satisfied / 8 × 10). Bands follow directly: 10 = all 8 pass (hierarchy reads blurred and in grayscale, every value on a scale); 9 = exactly 1 gap (usually weak hierarchy or thin white space); 6-8 = 2-3 gaps; <=5 = 4+ gaps (arbitrary spacing, color doing the work hierarchy should, or failing contrast). Always state the current score and the specific diagnostic rows to fix to reach 10/10.
Seven principles for building professional interfaces without a designer:
Core concept: Not everything can be important. Create hierarchy through three levers: size, weight, and color.
Why it works: When every element competes for attention, nothing stands out; deliberately de-emphasizing secondary content makes primary content powerful by contrast.
Key insights:
Product applications:
| Context | Hierarchy Technique | Example |
|---|---|---|
| Form fields | De-emphasize labels, emphasize values | Small uppercase label above large value |
| Dashboards | Key metric large, context small | "$42,300" large, "vs last month" small |
| Tables | De-emphasize headers, emphasize data | Headers uppercase small gray, data normal |
Design patterns:
test cases passed, vs 17 / 24 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.