Get the page layout from a live website

You can get a live website's page layout by capturing the page, listing its visible sections in order, and recording how each section changes across viewport sizes. The useful result is a layout map that you can compare, adapt, or hand to a designer. It is not a claim that you own the site's private design system.

Start with a layout map

Capture the page at the viewport that matters first, then write down the page from top to bottom:

1. Header and navigation
2. Announcement bar or utility strip
3. Hero content and primary action
4. Supporting proof, logos, or product preview
5. Feature sections and repeated patterns
6. Testimonials, pricing, or comparison content
7. Final call to action
8. Footer and secondary links

For every section, record its purpose, approximate height, content width, alignment, background treatment, and the next action it encourages. This separates the page structure from its wording and imagery.

The two Linear references below are useful for studying hierarchy and repetition. They show a near-black canvas, muted dividers, compact controls, one cool accent, and Inter typography. Treat those details as observations from the supplied captures, not as proof that every Linear page uses the same layout.

Check more than one width

A layout that looks simple on a wide screen may change substantially on a phone. Check at least:

• Wide desktop: maximum content width, column count, side margins, and hero alignment.
• Narrow desktop or tablet: columns collapsing, navigation changing, and cards becoming scrollable.
• Mobile: stacked order, button width, heading wraps, image crops, and hidden or moved elements.

Mark each behavior as fixed, fluid, stacked, reordered, or removed. This creates a responsive layout recipe instead of a screenshot to imitate. Record the side padding and content width at each tested size, since these often control the page's rhythm.

Extract repeated building blocks

Look for components that appear more than once: buttons, cards, tabs, labels, media frames, testimonial blocks, dividers, and section headings. For each, note its outer spacing, internal padding, corner shape, border, shadow, text alignment, and relationship to nearby content.

Typography is part of layout because it controls wrapping and vertical rhythm. In the supplied Linear examples, Inter appears for body copy, labels, navigation, controls, headings, and emphasized interface text, with weight providing contrast. Verify the font and variants on the page you are studying before using them in a new build.

Turn observations into a practical brief

A useful layout brief can fit on one page:

Keep observed details separate from decisions for your own product. You can borrow a layout pattern while changing the content, colors, images, spacing, and interaction rules. If you need a reusable handoff, inspect the captured structure and typography, then export the observed details into a format your team already uses. That creates a starting reference, not an official copy of the original site's private system.

Use this in your AI agent

> Inspect the captured website for its page layout. Return the sections in visual order, the purpose of each section, content width, column structure, repeated components, responsive changes, typography roles, spacing rhythm, borders, radii, shadows, and open questions. Separate observed details from recommendations for a new page, then format the result as a concise implementation brief.

Install Fudge for your AI agent

Turn the capture into three wireframes: desktop, tablet, and mobile. Keep only the structure at first: containers, text blocks, buttons, media areas, cards, and section boundaries.

For each section, define a simple rule such as two columns above 900px, stacked below 900px or image follows text on mobile. Record the maximum content width and side padding at each breakpoint. Check heading wraps and button widths because they often change section height more than the images do.

Use the same component names across all three wireframes. A hero should remain a hero when its columns stack, and a feature card should keep its purpose when cards become a vertical list. Mark uncertain decisions, such as whether navigation moves into a menu or media crops differently, as questions to verify rather than details to invent.

Give them a short layout brief plus annotated screenshots or captures. Include section order, container width, breakpoints, column rules, repeated components, typography roles, spacing rhythm, surface changes, and important responsive behavior.

For each major section, include its purpose, structure, content priority, and responsive change. For each repeated component, include its proportions, padding, border or shadow treatment, text hierarchy, and states that still need checking.

Separate notes into three groups:

• Observed: visible in the capture.
• Inferred: a likely rule based on repeated examples.
• Proposed: your adaptation for the new product.

The supplied Linear references can illustrate how dark surfaces, muted dividers, compact controls, and Inter typography create a repeated rhythm. Your brief should still document what you verified on the target page.

Related questions

• Get the shadow styles from a live website
• Get the Spacing Scale From a Live Website
• Get Interaction Patterns from a Live Website
• Get the Typography System from a Live Website