Launched the blog on prodfeat.ai. Dropped the link in a Telegram chat. Ten minutes later - first message: “Interesting, got pulled in, but the text color and background strain my eyes.”
Sat down to fix it. Not the next day. Right in the still-open Claude Code session I’d used for the deploy.
Four bugs in the first hour. None of which I found myself (with QA experience, no less :)).
What Was Wrong
The site looked fine on my MacBook, in my Chrome, on my screen.
The reader cracked it open: animated gradient orbs with opacity: 0.5 were bleeding through the blog text. On a dark background, letters merged with colored blobs. I hadn’t noticed.
Nielsen Norman Group data says one evaluator catches only 42% of serious usability issues. I was that one evaluator. For a developer testing their own product - the real number is probably even lower, I suspect.
What I Found and Fixed
Bug 1: gradient orbs on top of text. Decorative orbs with opacity: 0.5 rendered in the same stacking context as the blog content. Looked great on the homepage - unreadable in articles. Moved orbs into a separate container with z-index: -1 and removed them on blog pages.
Bug 2: iOS Safari header overlap. On iPhone the header was covering the first paragraph. Cause - backdrop-filter in Safari creates unexpected stacking contexts. WebKit bug #160886, open since 2016. In Safari 18 the property officially works without a prefix, but -webkit-backdrop-filter is still recommended for production - old iOS versions aren’t going anywhere. Added position: relative and z-index to the header, increased content padding-top. 15 minutes of debugging - longer than all other bugs combined.
Bug 3: misaligned cards in grid. On iPad, post cards were jumping in height. A long title stretched the row, neighbors were floating in the air. Fixed with align-items: stretch and min-height.
Bug 4: AuthorBio component. Avatar and text were breaking apart on mobile. In my project, flexbox broke on screens as small as 375px - missing flex-wrap: wrap and min-width: 0 on the text block. Five-minute fix, but it looked terrible.
All four - one Claude Code session. I’d read the Telegram message, describe the issue, Claude diagnosed the CSS, I verified. Safari header - 5 minutes. The other three - 2 each.
Result
4 CSS bugs from real users fixed in 10 minutes, one session.
What I Learned
Feedback from one live Telegram reader turned out more useful than two weeks of self-testing. Knew this in theory. Felt it when someone wrote “strains my eyes” about a gradient I was proud of.
Speed of response worked too. User wrote - fixed it - they saw the result in 20 minutes. Replied “oh, nice, works fine now.” That’s exactly why you fix things immediately instead of tossing them in the backlog.