AI interface mistakes and tendencies

After generating a page, I check how its inputs, menus, scrolling and interaction states work. Some defects are invisible in a screenshot. They appear when you click, change the calendar month or open the page on a phone.

I put together 14 interactive examples with repair prompts. Each example lets you try the broken and corrected versions. The guide and prompts are in Russian. All data is fictional. These defects cannot establish who built an interface.

1. The visible input is bigger than its editable area

Click between the text and the border on both sides. If the cursor appears only near the text, part of the visible field does not accept clicks. The example can highlight both hit areas so you can compare them.

2. The dropdown menu uses a different style

Open the menu. A closed field may match the product while the browser controls the entire open menu. Check the arrow's distance from the right edge and from a long selected label. A custom menu also needs touch, keyboard and focus support. System selection on a phone can be an intentional product choice.

3. The date picker remains browser-⁠styled

The date field and its open panel should match the intended product behavior. If the product needs a custom calendar, check the whole control: colors, month heading, days, constraints, selection and cancellation. The text's left inset and the icon's right inset should be equal.

4. The time picker looks unrelated

Open the time menu and compare it with other product controls. Check icon spacing, time increments, boundary values and scrolling to the selected option. Visual changes must preserve the stored format and constraints.

5. The calendar jumps between months

Months occupy different numbers of weeks. When the panel's height depends on its rows, centering it also moves the heading, arrows and confirmation button. Switch between months with four, five and six weeks in the example and compare the button positions.

6. Font characters stand in for icons

Arrows, close buttons and menu marks can be text characters. Their proportions and weight then depend on the surrounding font. Compare them with SVG icons from one set. An icon-⁠only button also needs an accessible name.

7. Short words get stranded at line endings

Change the window width. Prepositions, conjunctions, particles and English articles should stay with the following word; a dash should not start a line. Check the rendered text after fonts load. Nonbreaking spaces in the source alone do not prove that wrapping is correct.

8. The scrollbar is inset from the panel edge

Scroll a popup to the end. Padding applied to the whole scroll area moves the scrollbar inward with the text. In the corrected version, the text keeps its spacing while the scrollbar sits at the intended panel edge. Some operating systems show scrollbars only while scrolling.

9. The carousel clips before reaching the edge

Compare the text alignment with the cards' clipping boundary. A heading and first card can share an inset while the moving track reaches the section edge. Also check that the last card is reachable and the whole page does not scroll horizontally.

10. An accent stripe looks accidentally clipped

A thick line on a rounded card can taper or stop abruptly at a corner. Inspect the join at higher zoom. This can be an intentional treatment; the defect is a mismatch with the intended design. The example uses a separate inset marker as one alternative.

11. The copy explains nothing

“Without the noise,” “quietly works for you,” “unlock your potential” and “a seamless experience” do not describe an action or result. Ask what a person can actually do. Base the replacement on a verified feature. “The service sends an email after payment” fits only a service that does so.

12. Alignment appears only on hover

A transparent button may have invisible padding. Its text looks offset from neighboring content until a background appears on hover. Compare rest, hover, focus and active states. Content should stay aligned and the control should keep its dimensions throughout.

13. Hover gets in the way on a phone

A hover effect can remain after a tap or interfere with the first press. Check actions on a touch device and make sure menus are usable with a keyboard. Touch emulation covers some scenarios; testing a real phone is a separate check.

14. A link replaces the current page

Open legal documents, social profiles and links to other pages in a new tab so the current material stays open. In the example, enter a note and open the privacy policy. Compare what happens to the form and its text. Jump links within the current page stay in the same tab.

Using the prompts

Open the examples page, find the relevant section and copy its prompt into an AI tool with your project open. The button for all 14 items copies a combined task for checking the whole set. Every prompt refers to the currently open project.

The prompts ask the tool to reproduce the defect, fix its cause and verify the result in the project. Its report should distinguish completed checks from anything untested. Repeat the same interaction yourself after the change: click the edge, open the menu, switch months and check the page on a phone.