Skip to content
Blog

How to improve AI-generated UI without rebuilding everything

By Attuna ·

Most AI-generated interfaces don’t need a rebuild. The structure is usually workable; what’s off is hierarchy, spacing, type and the missing states. Improve them in focused passes, one layer at a time, with instructions specific enough to verify. Regenerating the whole screen tends to swap one set of problems for another.

Why targeted passes work better than regenerating

A full regeneration throws away the parts that were right and rolls the dice on everything again. A focused pass keeps the working structure and changes one dimension. It’s also easier to review: you know what was meant to change, so you can see whether it did.

Start each pass with evidence. Take screenshots at a desktop and a mobile width, or ask your agent to take them, so both of you are looking at the same thing.

Pass 1: hierarchy

Squint at the screenshot, or blur it. The first thing you notice should be the most important thing on the page. In generated UI it’s often a decorative element, a stat card or a large secondary button.

Prompt
On this page the most important thing is the list of overdue
invoices. Right now the four stat cards above it draw the eye first.
- Reduce the stat cards to a single row of inline figures, text-sm.
- Make the overdue list the first full-width element.
- Keep one primary button: "Send reminders". Make the others ghost.

Pass 2: spacing and grouping

Generated layouts often use the same gap everywhere, which makes groups hard to read. Related items should sit closer together than unrelated ones. Pick a spacing scale and give explicit values for within-group and between-group gaps.

Prompt
Use our spacing scale only (4, 8, 12, 16, 24, 32, 48).
- Label to input: 8. Field to field: 16. Section to section: 48.
- Align everything to the same left edge; remove the extra indent
  on the second section.

Pass 3: typography

Count the distinct text styles on the screen. If there are more than you can name a purpose for, merge them. Create hierarchy with weight and colour before reaching for another size, and check body line length and line height.

  • Page title, section heading, body, secondary and caption usually cover a product screen.
  • Use tabular numerals wherever numbers line up in columns.
  • Keep body text at a readable size; don’t shrink it to fit more in.

Pass 4: density and components

Decide how dense the screen should be for its use. A settings page can breathe; an operational table shouldn’t. Then check that components are the ones your product already uses. Generated UI often introduces near-duplicates: a slightly different button, a custom dropdown, cards nested in cards. If you have a component library, see how to make Claude Code follow your design system.

Pass 5: states and edge cases

AI-generated screens are usually designed for the happy path. Ask for every state explicitly:

Prompt
Add and show me these states for the invoices table:
- empty (new account, no invoices yet), with one clear next step
- loading (skeleton rows matching the real row height)
- error (with a retry action)
- long content (a 60-character customer name, a 9-digit amount)
- 1 row and 500 rows

Pass 6: accessibility basics

Check contrast, focus and semantics before calling a screen finished. WCAG 2.2 sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Generated UI often fails on muted metadata and placeholder text. Tab through the page to confirm focus is visible and the order makes sense. For a full review, use the checklist in how to make AI-generated interfaces accessible.

A visual QA checklist

Run through this before you accept a generated screen.

  1. The most important element is the first thing you see.
  2. There is one primary action per view.
  3. Spacing uses the scale, and groups are visibly grouped.
  4. Every text style has a purpose; numbers align.
  5. Components come from the library, with no near-duplicates.
  6. Empty, loading and error states exist and are useful.
  7. Long and short content doesn’t break the layout.
  8. It works at mobile width without horizontal scrolling (see making AI-generated UI responsive).
  9. Text contrast meets WCAG AA and focus is visible.
  10. Nothing is there by default: every gradient, icon and card is a decision.

Prompting habits that help

  • Change one dimension per prompt, and say what must stay the same.
  • Use measurements and names (“24px”, “ghost button”) instead of adjectives.
  • Ask for before and after screenshots so you can compare.
  • If you’ve corrected the same issue twice, start a fresh session with a better brief. The Claude Code best practices recommend this, because failed attempts clutter the context.

Fix the input, not only the output

If you find yourself making the same corrections on every screen, the problem is upstream. Write those corrections down as principles, so the next screen starts closer. Our article on why AI-generated interfaces look generic explains the cause, and building better SaaS dashboards with AI applies this checklist to one of the hardest screen types.

In Attuna, the principles you’d otherwise repeat live in a Taste Profile. When an agent notices a pattern in your feedback, such as repeatedly asking for tighter spacing, it can propose a principle. It stays a suggestion until you accept it.

Sources