Day 24 I shipped pickedby.ai to production. The fix log was 33 bugs in my own code. I wrote about that yesterday. Today I want to talk about what happened next.
Within hours, my own CEO, who is also me, opened the dashboard and drew pink arrows on a screenshot.
"The icons are too close to the top. They need to come down so there is space at the top. Who designs like this."
The icons in question were the small flag and star markers above each tier card on the Hero's Arc panel. They were 1 pixel away from the section header. The Perfect tier card, the one that should have looked the most important, sat slightly lower than the others because of a subtle DOM height mismatch. The numbers said the user was at 90 out of 100. The visual hierarchy said the user was somewhere near the bottom of the page.
I had a copy of Refactoring UI on my shelf. I had not opened it.
The Score Was 5 Out Of 10
Before doing anything, I ran the Refactoring UI diagnostic against the panel. Each principle gets a number from 0 to 10. Here is what came back.
| Principle | Score | What was wrong |
|---|---|---|
| Spacing & Sizing | 4/10 | Header to card was 32px. Marker to card was 0. |
| Visual Hierarchy | 6/10 | The current card was barely larger than the others. |
| Depth & Shadows | 5/10 | One-part pixel shadow. No atmosphere. |
| Layout | 6/10 | Bridge columns at 72px crowded the cards. |
This is not a creative score. It is a checklist. I had failed the checklist.
Eight Changes, One Hour
The fix turned into eight specific edits, all derived from rules I could have looked up at any time.
- Top padding 32 → 56 pixels. Refactoring UI rule: page sections deserve 48 to 64 pixels of breathing room. Headers and content need air.
- Marker margin 4 → 20 pixels. The marker was related to the card, but not the same group. Related elements need a small gap, not a touching gap.
- Bridge column 72 → 88 pixels. The bridges between tier cards were doing real work as visual connectors. They needed room.
- Card padding 12/8/10 → 16/12/14. Tight padding feels overwhelming. The same content with more padding reads as premium.
- Hero glyph 22 → 14 pixels. The glyph was competing with the card. A marker should not shout louder than the thing it marks.
- Current card translateY 1 → 14 pixels. The most important element on the page now visibly floats above the others.
- Two-part shadow. The current card now has both a tight pixel shadow and a soft gold atmosphere glow. Refactoring UI calls this depth. It is the difference between cardboard and wood.
- Status label became a flex container with wrappable spans. "Active · 90 PTS" reads as one line on desktop. On a phone it splits naturally between "Active" and "90 PTS." Both layouts respect the design system.
Score After: 9 Out Of 10
The Perfect card now floats above the Passed cards. The header has space to breathe. The status label survives a phone screen without overflowing. Nothing about the visual changed because of taste. Everything changed because of rules I had ignored.
The lesson cost me a day. Refactoring UI is not a book of opinions. It is a book of constraints. The constraints exist because human eyes follow predictable rules. Pretending you can design without using them is the same as pretending you can write JavaScript without a parser.
The Real Bug Was Process, Not Code
I have skills installed on my machine. refactoring-ui. design-review. frontend-design. They all have specific scoring rubrics, before-and-after patterns, and checklists. I did not call any of them.
When the dashboard looked bad, my reflex was to ship it anyway, then patch it after a complaint. That reflex is the actual bug. The patches I tried first were random — bigger transform, more shadow, more color. They worked the way random patches always work, which is to say they did not work.
Calling the skill changed the situation in the way that an audit changes a financial report. The numbers were not new. The numbers had been there the whole time. What changed was that someone started looking at them.
Two Rules I Adopted After Day 25
- If a design issue takes more than one fix attempt, stop and call the audit skill. Random tweaks compound the original mistake. Audits restart the clock.
- If you find a problem during a deploy, fix every related instance in the same session. "I'll do the others later" is how you end up with eleven dead functions still being called.
Day 25 ended with the Perfect card floating where it always should have been, the header with the breathing room it always deserved, and a recovery point in git that says stable-20260430-refactoring-ui-applied. Day 26 starts with one fewer ignored book on the shelf.
Where To See It
The dashboard is free, no signup. pickedby.ai. Type your domain. Watch the Hero's Arc panel populate as your score moves between tiers. Tell me if anything looks broken. I am still learning to use the books I own.