Low Score on the Checklist? Fix These First | HorizonX

Low Score on the Checklist? Fix These First

You used the Production Readiness Checklist and got a low score. This guide tells you what to fix first, and gives you a ready message to send to your AI agent for each problem.

Download as Markdown
  • 5 min read
  • Fix list
  • Updated
On this page 15 sections
  1. First, don't panic
  2. The order to fix things
  3. Fix 1: It breaks on a phone
  4. Fix 2: Buttons are too small to tap
  5. Fix 3: You cannot use it with a keyboard
  6. Fix 4: It is not clear what to do
  7. Fix 5: Buttons and errors are vague
  8. Fix 6: Color is the only signal
  9. Fix 7: Missing states
  10. Fix 8: Users can lose work by accident
  11. Fix 9: Trust problems
  12. Fix 10: Spacing and styles are all different
  13. Fix 11: It is slow or jumps while loading
  14. After you fix
  15. Keep going

First, don't panic

The checklist has 15 checks. Each one gets 0, 1 or 2 points, and the total becomes a score out of 100. A low score on a first version is normal. The goal is not 100 today. The goal is to fix the problems that hurt real people the most.

The order to fix things

Fix in this order. Problems at the top stop people from using your product. Problems at the bottom make it feel less polished.

  1. People cannot do the main task. (Keyboard, touch, broken layout on phones.)
  2. People do not understand what to do. (Main action, labels, errors.)
  3. People do not trust it. (Hidden costs, unclear data use.)
  4. It looks unfinished. (Missing states, inconsistent spacing.)
  5. It feels slow. (Speed and layout jumps.)

Fix 1: It breaks on a phone

Signs: text is cut off, you can scroll sideways, buttons overlap.

Send this to your agent:

At 375 pixels wide, the page scrolls sideways and [describe what is cut off]. Fix the layout so nothing is wider than the screen. Do not change the desktop design. Show me screenshots at 375 and 1440 pixels wide.

Fix 2: Buttons are too small to tap

Signs: on a phone, you tap the wrong thing, or need two tries.

Send this:

On phones, make every button and link at least 44 by 44 pixels, with at least 8 pixels between them. Do not change how they look on desktop.

Fix 3: You cannot use it with a keyboard

Signs: press Tab again and again. You cannot see where you are, or you get stuck.

Send this:

When I press Tab, I cannot see which element is selected. Add a clear focus ring to every button, link and input. Make sure I can reach and use every control with Tab, Enter, Space and the arrow keys.

Fix 4: It is not clear what to do

Signs: someone new looks at the screen and does not know what to click first.

Send this:

This screen has [number] buttons that look equally important. Keep [name of main button] as the only primary button. Make the others secondary (outline or text style).

Fix 5: Buttons and errors are vague

Signs: buttons say "Submit" or "OK". Errors say "Something went wrong".

Send this:

Rewrite button labels so they say what happens, for example "Send message" instead of "Submit". Rewrite error messages so they say what went wrong and how to fix it, for example "This email is missing an @".

Fix 6: Color is the only signal

Signs: an error is shown only by a red border. Someone who cannot see red will miss it.

Send this:

Every error, success and selected state must also use text or an icon, not only color. Check that all text has enough contrast with its background (at least 4.5 to 1 for normal text).

Fix 7: Missing states

Signs: a list with no data shows a blank space. A button does nothing visible while loading.

Send this:

Add these states: an empty state for [list name] with a short message and a button, a loading state for [button name] that prevents double clicks, and an error state if the request fails.

Fix 8: Users can lose work by accident

Signs: "Delete" works with one click and cannot be undone.

Send this:

Before deleting, show a short confirmation that says exactly what will be deleted. If possible, add an "Undo" option for a few seconds after.

Fix 9: Trust problems

Signs: prices appear only at checkout, fake countdown timers, unclear what happens to personal data.

Send this:

Show the full price before checkout. Remove [timer / fake activity message]. Add one short sentence near the form that says what we do with the user's data.

Fix 10: Spacing and styles are all different

Signs: every card has a slightly different gap, three shades of the same blue.

Send this:

Create a short list of spacing, color and corner-radius values, then replace every one-off value on this page with one from the list. Show me the list first.

Fix 11: It is slow or jumps while loading

Signs: the page takes long to show. Text moves when images load.

Send this:

Give every image a fixed width and height so the page does not move while loading. Compress large images. Tell me which files are the biggest.

After you fix

Run the checklist again. Check one score only after you have tested it yourself, on a real phone if possible. A fix the agent says it made is not a fix until you see it.

Keep going

Next guide · 07 of 12 You Downloaded a UI Kit. Now What? What to open first, what to check, and how to give a UI kit to your AI agent so it builds with it instead of ignoring it.

Also useful

You can copy the requests, templates and checklists in this guide into your own projects, including client work and paid work. Please do not republish the whole guide. Link to it instead.

Start from something good

Give your AI agent ready-made UI to build with.

HorizonX has UI kits, components and templates made for people who build with AI.