# Analyze Page Layout from a Live Website

[Open the live Fudge conversation](https://design.withfudge.com/share/analyze-page-layout-from-a-live-website)

Last updated: 2026-08-25

You can analyze a live website's page layout by capturing it first, then breaking the page into sections and comparing the structure that repeats across the page. Start with hierarchy, containers, columns, spacing, surfaces, typography, and responsive behavior. This produces a practical layout reference without requiring you to copy the original design.

## Map the page structure

List the visible sequence: navigation, hero, proof or product explanation, feature sections, calls to action, footer, and repeated content blocks. Note which sections share a background, which introduce a divider, and where the visual rhythm changes.

Next, identify the main container. Check whether content sits inside a centered maximum width, spans the viewport, or alternates between both. Record the left and right alignment lines. Compare those lines across headings, body copy, buttons, cards, and media. Repeated alignment is often more important than any single decorative detail.

For each section, record whether the layout uses one column, two columns, a sidebar, a grid, or an overlapping composition. Compare text width with media width. A narrow reading column beside a larger visual can create hierarchy without extra decoration. Then find recurring small, medium, and large gaps between navigation, headings, paragraphs, buttons, cards, and section boundaries.

The references below are useful for comparing a dark product-page structure, typography, spacing, and surfaces. Treat their notes as observed examples rather than a complete specification.

## Captured pages

[![The system for product development](https://pin.fontofweb.com/6434?format=jpg)](https://design.withfudge.com/share/pin-6434)

[The system for product development](https://design.withfudge.com/share/pin-6434)

[![Plan and build products](https://pin.fontofweb.com/6435?format=jpg)](https://design.withfudge.com/share/pin-6435)

[Plan and build products](https://design.withfudge.com/share/pin-6435)

## Linear typography

- **Inter** — weight 400 · Body copy, labels, navigation, and controls.
- **Inter** — weight 500 · Headings and emphasized interface text.

## Record each section consistently

Use a worksheet with these columns:

| Check | What to capture |
| --- | --- |
| Section | Its purpose and position in the page sequence |
| Container | Full width, centered, constrained, or nested |
| Layout | Columns, grid, stack, overlap, or media split |
| Alignment | Shared left edge, centered content, or asymmetric balance |
| Spacing | Repeated gaps and section padding |
| Surface | Background, panel, border, shadow, or gradient |
| Type | Heading scale, body width, weight, and line height |
| Action | Button location, emphasis, and nearby support text |
| Responsive change | What stacks, shrinks, hides, or moves on smaller screens |

This keeps the review useful for implementation. Instead of saying that a page feels polished, describe its constrained text column, wide visual, section gap, and low-contrast surface transition.

A strong analysis distinguishes repeatable rules from one-off details. Check whether the same container width appears in multiple sections. Compare card radius, border, padding, and title treatment. Check whether headings use the same family and weight at different sizes. Record exceptions such as a full-width image, unusual hero title, or overlapping feature block.

The captured typography reference labels Inter at weight 400 for body copy, labels, navigation, and controls, and weight 500 for headings and emphasized interface text. Treat this as an observed reference detail, not proof that every part of the site uses only those settings. Verify exact sizes, variants, and line heights before building a matching system.

## Turn the review into a build checklist

Before coding, reduce the analysis to these decisions:

- Define the page sections and their order.
- Choose the shared container width and alignment lines.
- Name the spacing steps used between common elements.
- Set column, grid, and stacking rules for wide and narrow screens.
- List surface roles, border treatment, radii, and shadow levels.
- Set heading, body, label, and button typography.
- Mark which details are observed and which are your adaptation.
- Recheck the page at mobile width, not just the desktop capture.

When you want a complete review, inspect the captured page structure, typography, colors, spacing, borders, radii, shadows, and component styles together. Add the website through the browser extension before asking Fudge to inspect it. Keep observed details separate from recommendations so the resulting reference remains useful without pretending to be the original site's internal system.

## Use this in your AI agent

> Analyze the page layout of this captured website. Map its sections, shared containers, alignment lines, columns, grids, spacing scale, surfaces, borders, radii, shadows, typography hierarchy, calls to action, and responsive changes. Separate observed details from recommendations, then return an implementation-ready checklist and flag anything that needs manual verification.

[Use Fudge with your AI agent](/mcp) to inspect a captured page and ask for this review in one conversation.

---

Use the reference as a structure study, not a visual tracing exercise. Extract section order, container alignment, column relationships, spacing rhythm, type hierarchy, surface roles, and responsive changes. Then replace brand-specific choices with your own content, colors, imagery, and interaction priorities.

A useful table has three columns: observed rule, why it helps, and your adaptation. An observed constrained heading column beside a larger visual may help scanning and hierarchy. Your adaptation could use a different column ratio, image treatment, or breakpoint while preserving the same communication goal.

Rebuild the structure first, test the reading order at mobile width, then add your own visual language. Compare the pages for hierarchy and usability, not pixel similarity.

---

Ask for a section map, a layout diagram in words, shared container measurements, a spacing scale, typography roles, surface treatments, responsive changes, and uncertain details that need checking.

Request a component inventory too. Have the agent group repeated patterns such as navigation items, buttons, cards, tabs, feature rows, media blocks, and footers. For each group, ask what stays consistent and what changes between instances.

End with separate lists for observed design details and recommended adaptation. If you are implementing the result, ask for a build order: page shell, section structure, spacing, type, surfaces, responsive rules, and polish. This makes the analysis actionable without forcing you to reproduce the original page.

## Related questions

- [How to Analyze a Website Spacing Scale](/share/analyze-spacing-scale-from-a-live-website)
- [How to Analyze Motion and Interactions on a Live Website](/share/analyze-motion-and-interactions-from-a-live-website)
- [How to analyze typography hierarchy from a live website](/share/analyze-typography-hierarchy-from-a-live-website)
- [Analyze Image and Video Use From a Live Website](/share/analyze-image-and-video-use-from-a-live-website)