UI review · screenshot bug hunting

​

Actual output

First version (dot-grid background + dark green title bar + multi-color time-slot bar)

Revision (single accent color + solid background)

​

Steps: Four-dimension UI review

You are a UI/UX designer. This is a screenshot of a "Parents' Medication Manager" web app
I built. Please give me a review report from the perspective of aesthetics and usability.

Please check item by item along the four dimensions below. For each, give a judgment of
[OK] / [Needs improvement] / [Has a problem] and point out the specific location:
1. Color: How many colors are used overall? Is the palette restrained and unified? Is the
   color semantics correct (e.g., is a warning color used where a warning is needed)?
2. Font and layout: Is the font consistent? Are there misalignments, text being squeezed,
   or ugly line wraps?
3. Visual hierarchy: What does the eye land on first when entering the page? Is the
   primary vs. secondary clear? Are multiple elements competing for attention?
4. Background and decoration: Is the background clean? Are there redundant textures,
   decorations, or gradients that interfere with reading?

Finally, provide:
- An overall score (1-10)
- The top 3 priority improvements sorted by "impact × fix cost"
- A one-sentence summary of the impression this UI gives

Be specific and direct, no pleasantries.

Overall score: 6.5 / 10

Priority improvements (sorted by impact × fix cost), in the model's own words:

1. Remove the background grid (fix cost very low, impact very high)
   "The page uses a background with a prominent dot grid. This kind of background is
     usually for design mockup or note-taking apps, and it looks very out of place in a
     'medication management' tool for middle-aged and elderly users. It not only makes
     the interface look unprofessional and un-serious, but also adds visual noise that
     interferes with the core information."

2. The yellow safety alert box at the top is too eye-catching
   "It is even more prominent than the '0/4 taken today' progress" — stealing the show.

3. The left time-slot bar (orange/purple/blue)
   "Slightly oversaturated, a bit harsh," competing with the core information for
   attention.

It also pointed out: the privacy text "font size too small and color too light," "contrast
too low, easy to be completely ignored."

One-sentence impression: like a "design mockup" rather than a "serious tool for middle-aged
and elderly users."

​

Notes

• Consumption: This playbook involves visual understanding (qwen3.7-plus) single-image review. The screenshot itself is converted into image_tokens and counted toward input, taking up the vast majority of the input side; the text prompt is only a small fraction. The larger and clearer the screenshot, the higher the input consumption — a normal webpage screenshot size is enough for UI review; no need to use oversized images.
• How to use its output: It's great as a bug-hunting lead — an out-of-place background, a scene-stealing alert box, or harsh colors are exactly the kinds of problems you go numb to after staring too long, and it picks them out at a glance.
• But don't treat it as an acceptance report: In testing, it can misread details that require precise counting (e.g., calling seven or eight colors "within 5," or missing a serif font), and it may misread the meaning of data on the page. Still confirm each suggestion against the actual UI.
• A cheaper approach: Write the color, font, and hierarchy requirements into the prompt up front (see the "Parents' Medication Manager" card) to save a lot of rework.