AI website review for generated layouts and typography

Contents

• [Use this review order](#use-this-review-order)
• [Review the typography as a system](#review-the-typography-as-a-system)
• [A practical scoring sheet](#a-practical-scoring-sheet)
• [Turn the review into edits](#turn-the-review-into-edits)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

An AI website review should check whether the layout creates a clear path through the page and whether the typography makes that path easy to follow. Start with hierarchy, spacing, responsive behavior, and type choices before polishing colors or effects.

Use this review order

1. Check the first screen. Can a visitor tell what the product does, who it is for, and what to do next without scrolling? Look for one dominant headline, a supporting explanation, and one clear primary action. If several elements compete for attention, reduce the number of styles before changing the layout.

1. Trace the page structure. List the sections in order: introduction, proof, product explanation, features, pricing or conversion, and final action. Each section should answer one visitor question. If two sections repeat the same message, combine them. If a section appears before its context is clear, move it lower or add a short explanation.

1. Check the spacing rhythm. Compare the distance between the headline, body copy, buttons, cards, and section boundaries. Uneven gaps often make an AI-generated page feel assembled rather than designed. Choose a small spacing scale and reuse it. Keep related items close together and give unrelated sections more breathing room.

1. Check mobile before desktop polish. Resize the page and inspect the headline wrapping, navigation, card stacking, button width, image cropping, and section order. A layout that looks balanced on a wide screen may become crowded when columns collapse. Fix content order and readable line lengths before adjusting decorative details.

The examples below are useful reference points for comparison. The captured Linear reference lists Inter Variable as its primary sans serif, with Berkeley Mono and Tiempos Headline as supporting choices. Treat those as observed inspiration, not as a template to copy.

Review the typography as a system

Use no more than a few clear roles: display text for the main promise, a readable sans serif for explanations and controls, and an optional supporting face for code or editorial emphasis. Check whether the same role keeps the same family, weight, size range, and line height throughout the page.

For an AI-generated website, pay special attention to these issues:

• Headline shape: Does the line break emphasize the product benefit, or does it leave one awkward word alone?
• Body width: Are paragraphs short enough to scan without creating a tall wall of text?
• Weight contrast: Can visitors distinguish headings, labels, body copy, and secondary text without relying on color alone?
• Control text: Do buttons and navigation remain readable at their actual size?
• Technical content: If the page includes commands or code, does a monospace style clearly separate it from normal copy?
• Consistency: Are similar components using the same text sizes and capitalization rules?

A practical scoring sheet

Score each category from 0 to 2: 0 means it needs a redesign, 1 means it is usable but inconsistent, and 2 means it supports the page goal.

• First-screen clarity
• Section order
• Mobile layout
• Spacing consistency
• Headline readability
• Body text readability
• Type-role consistency
• Button and navigation clarity
• Contrast and non-color cues
• Visual connection between text and imagery

Any category scoring 0 should be fixed before categories scoring 1. This prevents spending time on font details while the page still has competing calls to action or a confusing section order. Capture a before-and-after screenshot at the same viewport so you can compare actual changes rather than relying on memory.

Turn the review into edits

Write each recommendation as a concrete change: "Move the proof section above the feature grid," "limit the headline to two lines," or "use one body typeface across cards and navigation." Avoid vague notes such as "make it feel more premium." Then make one layout pass and one typography pass, checking the page again after each.

A useful final check is to hide images and background effects temporarily. If the page still has a clear hierarchy, the structure and typography are doing their job. If the page collapses, simplify the content order and text roles before adding more visual treatment. For a guided review using references, you can use Fudge with your AI agent and ask it to compare the captured page against the examples below.

Use this in your AI agent

> Review this AI-generated website for layout and typography. Start with the first screen, then trace the section order and explain whether each section answers a clear visitor question. Check headline wrapping, body text width, type hierarchy, spacing rhythm, buttons, navigation, cards, responsive stacking, mobile readability, and contrast. Identify the three highest-impact problems first. For each problem, give one concrete edit and explain what to compare after making it. Use the captured Linear typography reference as inspiration only, and distinguish observed details from recommendations. Finish with a concise checklist I can use to review the updated page.

Install Fudge for your AI agent.

Review the hero and card grid as one reading sequence. First ask whether the headline, supporting text, and primary action explain the product before the visitor reaches the cards. If not, shorten the hero or remove competing actions.

For the cards, check whether each card answers a different question. Give every card the same internal structure, such as label, title, short explanation, and action. Align titles and actions where possible, and avoid giving every card a different border, radius, shadow, or color. Variety should signal meaning, not decorate empty space.

Then test three widths: wide desktop, narrow desktop or tablet, and mobile. Confirm that the most important card remains first, card descriptions do not become unreadably narrow, and the action does not disappear below an oversized image. If the grid contains more than one visual emphasis, use section headings or grouping rather than adding more type weights.

Your edit notes can be as specific as: "Reduce the hero to one action, move the three proof cards below the product explanation, use one card heading size, and stack the grid in priority order on mobile."

Use this prompt:

> Review this AI-generated website for layout and typography. Start with the first screen, then trace the section order and explain whether each section answers a clear visitor question. Check headline wrapping, body text width, type hierarchy, spacing rhythm, buttons, navigation, cards, responsive stacking, and mobile readability. Identify the three highest-impact problems first. For each problem, give one concrete edit and explain what to compare after making it. Use the captured Linear typography reference as inspiration only, and distinguish observed details from recommendations. Finish with a concise checklist I can use to review the updated page.

Before sending it, add the page capture or saved reference you want compared, plus the device width that matters most. If the site has separate product, pricing, or documentation pages, say whether the review should focus on one page or the whole visitor journey.

Related questions

• AI website review for a developer tool homepage
• Website Design Critique for a Vibe-Coded Website
• AI website review for ecommerce product page layout and typography
• Get a practical design critique for a Tailwind landing page