Website design analyzer for page layout

Contents

• [Start with the layout decision](#start-with-the-layout-decision)
• [A concrete reference comparison](#a-concrete-reference-comparison)
• [Layout checklist](#layout-checklist)
• [Turn the map into a build plan](#turn-the-map-into-a-build-plan)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

A website design analyzer for page layout should help you identify how sections, columns, spacing, type, and surfaces work together. The fastest method is to map the page from large structure to small details, then test which patterns repeat across screens.

Start with the layout decision

Use this order for every captured reference:

1. Map the page regions. Mark the header, hero, supporting sections, proof or product areas, calls to action, and footer. Do not begin with individual buttons or colors.
2. Mark the main alignment lines. Find the left edge shared by navigation, headings, body copy, cards, and footer content. Note where the design intentionally breaks that alignment.
3. Describe the width strategy. Decide whether the page uses a centered maximum width, full-bleed media, narrow reading columns, split layouts, or repeated cards.
4. Track spacing rhythm. Compare the gaps between labels, headings, paragraphs, cards, section titles, and major sections. Look for a small set of recurring distances rather than isolated pixel values.
5. Check the page at more than one state. Menus, overlays, expanded content, and responsive changes can reveal the actual structure better than the default view.

This approach gives you a page plan you can use immediately: regions, alignment, widths, spacing, and exceptions.

A concrete reference comparison

The examples below include two captured Linear pages: “The system for product development” and “Plan and build products.” Both are described with a near-black canvas, muted dividers, compact controls, one cool accent, and Inter typography. Treat them as references to compare, not as proof that every Linear page uses exactly the same rules.

Look for the repeated decisions first:

• Does the dark canvas continue across every section or change by surface?
• Are dividers separating content groups, navigation levels, or interactive controls?
• Do compact controls preserve enough space around their labels?
• Does the cool accent identify action, status, or emphasis?
• Does the typography create hierarchy mainly through size, weight, and muted color?
• Which layout choices appear on both captured pages, and which belong to only one page?

The supplied typography notes identify Inter at weight 400 for body copy, labels, navigation, and controls, and weight 500 for headings and emphasized interface text. Use that as an observed starting point, then verify the exact role before applying it to a new design.

Layout checklist

Before rebuilding a reference, record these details:

• Header height and the relationship between logo, navigation, and action controls.
• Hero width, heading measure, supporting copy width, and media placement.
• Shared content edges across sections.
• Maximum text width for comfortable reading.
• Card count per row and the gap between cards.
• Divider placement and whether dividers reach the full container width.
• Surface changes between page regions.
• Border radius, shadow, and elevation treatment on controls and cards.
• Typography family, size, weight, line height, and color role.
• Image or video crop rules and what remains visible on narrow screens.
• The order in which columns stack on mobile.

Separate what you observed from what you plan to change. A clean notes format is: “Observed,” “Likely purpose,” “Keep,” “Adapt,” and “Verify.” That keeps visual analysis from quietly turning into unsupported assumptions.

Turn the map into a build plan

Create a simple page outline before writing components. For each section, specify its container width, internal grid, alignment edge, vertical spacing, surface, and content priority. Then define shared values for type, color roles, borders, radii, and shadows. Use names such as “muted divider” or “primary action” rather than scattering one-off values through the page.

Build the largest structure first. Check the hero and section rhythm before tuning control padding. If the page still feels unlike the reference, inspect alignment and spacing before adding more decoration. Layout problems are often caused by inconsistent widths or section gaps, not by a missing effect.

When comparing a dark interface, check contrast between canvas, surface, divider, body text, and accent. A near-black background can still feel flat if every surface has the same value, or noisy if every boundary is too strong. Use the reference to understand the balance, then test the result with your own content lengths.

Use this in your AI agent

> Analyze the captured website layout from large structure to small details. Map the page regions, container widths, alignment lines, grids, spacing rhythm, responsive stacking, surfaces, dividers, radii, shadows, and typography roles. Compare the provided references and separate repeated patterns from one-page exceptions. Return an implementation-ready page outline with observed details, likely purpose, values to verify, and a short responsive checklist.

Install Fudge for your AI agent

Begin with the desktop page map, but describe relationships rather than fixed coordinates. For each section, record its content order, container width, column count, alignment edge, and the item that must remain most prominent. Then create three states: wide, medium, and narrow.

On the wide state, preserve the main grid and generous relationships. On the medium state, reduce column width and gaps before removing content. On the narrow state, stack sections in reading order, move secondary controls behind a clear interaction, and keep the primary action visible. Treat full-bleed media separately from constrained text so each can respond without forcing the other to shrink.

Use real or intentionally long copy during the wireframe stage. Check headings that wrap to two or three lines, cards with uneven content, navigation labels, and media crops with an important subject near an edge. Write a rule for every major change, such as “two columns become one when the text measure becomes cramped.” This produces a responsive plan that can be tested instead of a desktop screenshot that only works at one width.

Capture the decisions that control the page's hierarchy first: shared content edges, maximum widths, hero proportions, section order, column relationships, and the spacing between major regions. These details determine whether the rebuilt page feels related to the reference even before typography and decoration are tuned.

Next record typography roles. Note the family, weight, size relationship between heading and body copy, line height, casing, and color contrast. The supplied Linear example identifies Inter in regular and medium weights, with hierarchy created through size, weight, and muted color. Use that as a concrete comparison point, but verify it against the page you are rebuilding.

Then capture surfaces and boundaries: canvas color, card surfaces, dividers, borders, radii, shadows, gradients, and media crops. Finish with interaction states and narrow-screen behavior. A menu, overlay, or stacked card layout may change the structure more than a desktop screenshot suggests.

Keep a final “unknowns” list. Mark anything that needs verification rather than filling the gap with a guess. That list protects the rebuild from turning an observed reference into an invented design system.

Related questions

• Website Design Analyzer for Spacing Scale
• Website design analyzer for motion and interactions
• Website Design Analyzer for Typography Hierarchy
• Website design analyzer for image and video use