The 10-Point Review Checklist for AI-Generated UI Code

AI-generated code is a strong first draft, not a merge-ready PR. This checklist catches the issues that actually reach production.

Structure

1. Semantic HTML. <button> for actions, <a> for navigation, one <h1> per page, headings in order. AI output often defaults to clickable <div>s.

2. No dead ends. Every link and button does something. Generated CTAs pointing to # are the most common bug shipped from AI drafts.

3. Component boundaries. If the same block appears three times, it should be one component (or template) before it enters your codebase.

Visual

4. Responsive at 375px. Generated layouts are desktop-biased. Check that grids collapse, text wraps and nothing overflows on a phone.

5. Contrast. Body text at 4.5:1 minimum against its background; button labels included. Light-accent buttons with white text are a recurring AI habit.

6. States. Hover, focus-visible, disabled and loading states exist. Generated code usually covers hover and forgets the rest.

Behavior

7. Forms actually submit. Inputs have name attributes, the submit handler exists, and errors render somewhere visible.

8. No console errors. Open devtools once. Missing icon libraries and undefined handlers show up immediately.

Hygiene

9. No leftover placeholders. Search for "Lorem", "TODO", "example.com" and placeholder image URLs before shipping.

10. Dependencies declared. Every CDN script or npm import the code relies on is actually loaded, in the right order.

Make it routine

Run the checklist on every generated section — it takes five minutes and catches 90% of what users would notice. Generation gets you speed; review gets you quality. Tools like SnapCode give you the draft with a live preview so most of these checks happen before you even copy the code.