Six checks of the AI interface before showing to the customer: a checklist of real errors
Main chat
A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.
Test 1. Interface state
AI generates the state you described. This is usually a full screen with real data and a successful result. Everything else he invents or misses.
Before showing, go through each screen in four states:
Empty state. What does the user see before adding anything? An empty table without explanation is not an empty state, it is a confusion. It should be: an illustration or an icon, an explanation of what will be here, an action to be done. Especially critical on the home screen and in the lists.
Loading state. AI applications are slower than usual – LLM query takes 2-8 seconds. The spinner signals zero during this time: the user does not understand whether the system is working or is frozen. The right pattern: a skeleton screen that shows where the content will appear, or streaming a token-by-token response.
Error state. "Something went wrong" is the most useless phrase in the interface. AI generates it by default. What exactly went wrong, why it probably happened, what the user can do right now.
Success state. Confirmation that the action has been completed. It seems obvious - but AI often skips or generates it too quiet: small text instead of noticeable toast, no transition animation.
Empty state: there is illustration + explanation + action
Loading state: not just spinner – skeleton or streaming
Error state: specific cause + specific action
● Success state: Prominent confirmation that everything has passedPrompt for Codex/Claude Code:
Check all project screens for four interface states.
For each component that shows data (list, table, cards,
Check the dashboard.
1. Empty state – if there is no data, what is shown?
It should be: icon or illustration + text that will be here + CTA button.
Just empty space or no data is not enough.
2. Loading state – if data is loaded, what is shown?
There should be a skeleton loader that repeats the structure of the content.
One spinner in the middle of the screen is replaced.
3. Error state – if the request drops, what does it show?
It should be a specific message + a “Try again” button.
“Something went wrong” should be replaced with specifics.
4. Success state – after successful action (creation, preservation, sending)
Is there any discernible confirmation? Toast, banner or animation - not just
Update the page without a signal.
List which components are covered by all four states.
What's missing? For the missing, generate the code.Test 2. Consistency of components
AI in different parts of a session or different prompts generates components independently of each other. The Save button on the first screen and the Send button on the second are often two different components with different padding, different radius, sometimes different font. Visually, the difference is small, but the customer feels it even if he does not call it words.
What to check:
Is the Primary Button the same size on all screens? Is the hover state the same? Is the icon always on the left or always on the right?
Typography. How many font sizes are used? AI easily generates six different pins where you need three. Check H1, H2, body, caption - they should be the same everywhere.
*The most frequent divergences. Padding inside cards, gap between sections, margin at headers – AI takes them arbitrarily if there are no explicit tokens. Go through the screens and check that the same elements have the same indentations.
Blending libraries kills consistency the fastest. Outline and filled in the same interface, different stroke-width – immediately catches the eye.
● All Primary Buttons are the same size and style
● No more than 3-4 levels of typography
● The same elements - the same indentations
● One icon library, one stylePrompt for Codex/Claude Code:
Audit the consistency of components throughout the project.
1. Buttons – Find all button options in the codebase.
Compare padding, border-radius, font-size, font-weight, height.
If Primary Button occurs in several variants - list of discrepancies
And bring it to a single component.
2. Typography - find all the unique font-size values in the project
(including inline styles and Tailwind classes)
If there are more than 4 levels, make a list of redundant levels and suggest what to reduce them to.
3. Retreats - find the padding and gap at cards, lists, sections.
Identify where the same elements use different values.
Offer a unified indentation system via CSS variables or Tailwind.
4. Icons – Find all the icon libraries you use.
If there are more than one, list the conflicts and suggest migration to one.
Output the report: what is consistent, what diverges, specific files and lines.Test 3. Real content
AI uses placeholder content: “Lorem ipsum”, “Ivan Ivanov”, “Product name”, numbers like “1 234 567”. On real data, the interface looks different.
Long text. Insert a header with 80 characters instead of 20. What's going on? Trimmed with an ellipsis, transferred, breaks layout? You need to know before the show.
Short text. The name "Lee" instead of "Alexander Petrovich Vorontsov" - what does the avatar look like, how is the text aligned next to it?
** Big numbers.** “10,000,000” instead of “42” – does it fit into the table cell, does it break the alignment?
Empty fields. ** What does the card of a user who does not have a photo, job title and phone number? AI doesn't usually render this case.
Quick way to check: open each list and table, substitute three options - minimal data, normal data, extremely long data.
Titles and titles checked for long text
● Numbers tested for high values
Cards checked for partially filled data
Avatars and images – behavior in the absence of a filePrompt for Codex/Claude Code:
Check the resistance of the interface to real content.
For each scenario, find vulnerable components and fix:
1. Long text – find all the places where the text from the data is displayed
(names, descriptions, user names, card titles).
Add overflow: hidden + text-overflow: ellipsis
Word-break: break-word is where it should be.
Nowhere should there be horizontal overflow due to long text.
2. Large numbers – find all numerical values in UI (prices, counters, metrics).
Check that values such as "10,000,000" or "99,999" do not break the layout of the cells.
Add formatting via Intl.NumberFormat where necessary.
3. Missing data – find all the places where the avatar or photo is displayed.
Add fallback: User initials or default icon if src is empty
or returns a 404 error.
4. Partially filled cards - find components that show
Optional fields (position, phone, tags). Make sure you're away.
the item is either hidden or shows the correct placeholder,
Not an empty space that breaks the layout.Check 4. Mobile screen
AI generates under the screen that it sees most often in training data – a 1440px desktop or a 1280px laptop. The mobile version is either missing or made mechanically: the columns collapsed into one, but the indentations, font sizes and interactive zones remained desktop.
What to check for at 375px (iPhone SE is the narrowest of the popular ones):
Touch zones. The minimum interactive element size is 44×44px for Apple HIG and 48×48dp for Material Design. AI generates smaller buttons. Icons without signatures, links in the text, checkboxes - all this needs to be checked.
Horizontal scroll. Tables, long lines, fixed widths - on a mobile phone create a horizontal scroll that should not be. Open to DevTools at 375px and check that the page is no wider than a presentport.
Keyboard. If there is a form on the screen, what happens when the mobile keyboard pops up? Does it block the send button?
** Navigation.** Bottom bar or hamburger? AI often leaves a desktop header on the mobile – it’s uncomfortable and looks unfinished.
● Open in DevTools at 375px - no horizontal scrolling
● All buttons and links at least 44px in height
Form checked with open keyboard
● Navigation adapted for mobile, not just compressedPrompt for Codex/Claude Code:
Conduct a mobile audit of the project. Check and correct:
1. Horizontal overflow – Find all fixed-width elements
pixels that can go beyond the 375px screen.
Replace the px width with max-width + w-full.
Add overflow-x: Hidden to the body if not.
2. Touch zones – find all interactive elements: buttons, links, icons, buttons,
Checkboxes, radio. For each, check that min-height and min-width ≥ 44px.
If the element is visually smaller, add padding to increase the touch area.
without changing the visual size.
3. Forms and keyboard – find all forms with input fields.
Add padding-bottom to the shape container equal to the height of the mobile keyboard
(~300px) so that the Submit button is visible when the keyboard is open.
Or use CSS env (keyboard-inset-height) if supported.
4. Navigation on mobile – check if there is a header with a horizontal menu
which is displayed at 375px. If possible, add the bottom navigation bar.
or hamburger menu for mobile breakpoint (<768px).Check 5. The logic of transitions
AI generates screens – but doesn’t always generate connections between them. At the show, the customer presses the button and... nothing. Or it gets on a screen that doesn't fit the context. Or the "back" button goes wrong.
Pass the basic flow from start to finish as a user. Not as a designer who knows the structure - as a person who sees it for the first time.
What to check:
Every CTA goes where it should. The Create button opens the creation form, not the list. The more detailed button opens a detailed page of the item you want, not the first item on the list.
Tickets and woodcutters close correctly. A cross, an out-of-area click, an “Cancel” button – all three options should work. AI often implements only one.
The condition is maintained during navigation. Filled out the form, moved to another screen, came back - the data is in place or the form is reset? If it is dropped, it should be clear.
Destructive actions are confirmed. “Delete”, “Cancel order”, “Clear everything” – there should be a confirmation dialogue. AI sometimes misses it.
● Completed the main scenario without getting stuck
● All modals are closed in three ways.
● Destructive actions require confirmation
The back button returns to a logical placePrompt for Codex/Claude Code:
Check the logic of navigation and transitions in the project.
1. Modals and woodworkers – find all the components of Modal, Dialog, Drawer, Sheet.
Each should be closed in three ways:
- cross button or Cancel
Click on an overlay outside the component
- Escape key
Add the missing handlers.
2. Destructive Actions – Find all buttons and functions with deletion semantics
cancellation or irreversible change: delete, remove, clear, reset, cancel.
Each such action must show a confirmation dialogue before execution.
Add where missing.
3. Navigate backwards – find all the back buttons, back, back arrow.
Check if router.back() or navigate(-1) leads to a logical location.
Not a non-existent route. Where necessary, replace it with a clear navigate('/necessary path').
4. Form state – Find forms where the user enters the data.
When navigating from a page with unsaved data,
The warning dialogue "Change not saved". Implement through
beforeUnload or unsaved changes guard.Test 6. First impression without context
Last check and most important. You look at the interface with the context — you know what the product is, who uses it, what each screen does. This is the first time a customer has seen this.
Ask someone who was not involved in the project to open the home screen and answer three questions in 30 seconds:
- What is this product?
- What can we do here?
- What should I do first?
If at least one of the questions is not answered, the hierarchy or onboarding does not work.
If you have no one to ask, go by yourself, but honestly: close the file, open it in an hour, look at the main screen for no longer than 10 seconds.
● The purpose of the product is clear without explanation
● The main action is visually highlighted
● There are no elements on the screen that are not clear why you need them.
● The new user knows what to do firstPrompt for Codex/Claude Code:
Check the first screen a new user sees (usually /dashboard)
or/after login. Evaluate by three criteria and fix the problem:
1. Hierarchy - Is there one overt visual accent on the screen?
If the look doesn't know where to go or if there are several equally bright elements,
Reduce the visual weight of minors by reducing font-size
Reduction of color contrast or reduction of size.
2. The main CTA is whether there is a single button or action that clearly stands out.
among the others? It should be the most contrasting interactive element.
on screen. If there are several buttons of the same weight, make one Primary.
The rest are Secondary or Ghost.
3. Excess elements – Find elements on the home screen that don’t help
The user understands the product or starts working in the first 30 seconds.
List them and suggest: remove, transfer to the menu or show later
(after the first user action).Final checklist
Six checks, 24 points. Everything takes 30-40 minutes, much less than redoing after the show.
Conditions
Empty state with explanation and action
Loading state – skeleton or streaming, not spinner
Error state with specific cause and effect
Success state with notable confirmation
Consistency
● Style buttons on all screens
● No more than 3-4 levels of typography
● The same indentations for the same elements
● One icon library
Real content
● Long titles do not break layout
● Large numbers are placed in cells.
Partially filled cards look normal
● Missing images processed
mobile
● No horizontal scrolling at 375p xx
● All interactive elements at least 44px
The form works with an open keyboard
● Navigation adapted for mobile
Transitions
The main scenario passed without getting stuck
● Modals are closed in three ways
● Destructive actions require confirmation
The back button leads to a logical place.
First impression
● The purpose is clear without explanation
● The main action is highlighted visually
● The new user knows what to do first.
● There are no superfluous elements without a clear purpose
