# Capture Page Layout From a Live Website for Reuse [Open the live Fudge conversation](https://design.withfudge.com/share/capture-page-layout-from-a-live-website-for-reuse) Last updated: 2026-08-25 To reuse a page layout well, capture the section structure, spacing, typography, surfaces, and controls as a set of rules rather than copying a screenshot. Map the page from top to bottom, then compare repeated patterns across more than one screen. ## Start with a layout map Create a row for every visible section: announcement, navigation, hero, proof, feature grid, workflow, call to action, and footer. For each row, record its purpose, content width, number of columns, alignment, vertical spacing, background treatment, and the action that carries the visitor forward. Then mark relationships between sections. Do headings share one content edge? Does a feature card repeat the padding or radius of a navigation control? Does the hero flow into the next surface or end with a clear boundary? These relationships often matter more than isolated pixel values. Use three levels of detail: - **Page rules:** overall width, gutters, section rhythm, canvas color, and responsive behavior. - **Section rules:** column structure, alignment, spacing, surface, and media placement. - **Component rules:** control height, border, radius, text hierarchy, icon treatment, and states. This gives a designer or developer enough information to rebuild the system without treating every measurement as a special case. ## 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. ## Compare repeated screens Compare the two Linear captures at the same viewport. Both are described as using Inter, a near-black canvas, muted dividers, compact controls, and one cool accent. The second capture shows the same typography, spacing, surfaces, and interaction treatment on another page. Treat that repetition as useful evidence, while remembering that it is not a complete official design system. Ask: 1. Which edges line up across sections? 2. Which spacing values repeat often enough to become a rule? 3. Which surfaces separate content, and which are decorative? 4. Does hierarchy come from size, weight, color, position, or all four? 5. What changes at a smaller width: columns, order, controls, or only spacing? The supplied typography evidence lists Inter at weight 400 for body copy, labels, navigation, and controls, and weight 500 for headings and emphasized interface text. Use those observations as a starting point, then verify any additional sizes or line heights from the captured pages. ## Convert observations into tokens Turn repeated observations into named decisions. Examples include “use one primary content width,” “keep dividers low contrast,” “use compact controls,” and “reserve the accent color for actions or selected states.” Add approximate spacing groups only after you identify repetition. For type, specify family, role, weight, size range, line height, and maximum text width. For surfaces, specify background, border, radius, shadow, and hover or selected treatment. For layout, specify container width, grid columns, gap, section padding, and the width where the arrangement changes. Keep source content separate from the layout recipe. A heading's wording, logo, illustration, and product copy belong to the original page. The reusable rule is the relationship between the heading, supporting text, action, and surrounding space. ## Check the rebuilt version Review the new page at the same viewport as the capture, then test a narrow screen. Check the first screen first: navigation fits, the headline has a clear reading width, the main action is easy to find, and the most important visual does not push the message too far down. After that, compare section rhythm and repeated controls. Label assumptions and verify important rules on more pages or states. A public capture is an observed reference, not proof that you own the original site's internal system. The result is most useful when it records what was seen, what was inferred, and what still needs testing. ## Use this in your AI agent > Capture this website's page layout for reuse. Map the sections from top to bottom, then report page rules, section rules, and component rules for content width, gutters, spacing, columns, alignment, typography, colors, surfaces, borders, radii, shadows, controls, and responsive changes. Compare repeated patterns across captured screens, separate observed details from assumptions, and finish with a concise rebuild checklist for a designer or developer. [Use Fudge with your AI agent](/mcp) --- Turn a detail into a reusable rule when it repeats, supports a clear purpose, or controls how several elements relate. Repeated content edges, section padding, control heights, heading widths, divider treatment, and card spacing are strong candidates. A one-time illustration position or unusual hero overlap should remain section-specific unless another page confirms it. Use a three-question test. Does the choice appear in more than one section or screen? Would changing it affect several components? Can you describe it without naming the original brand or content? If most answers are yes, write a rule. For example, “all content aligns to one centered container” is reusable. “This headline begins 86 pixels from the left edge” is usually a measurement from one viewport. “Muted dividers separate compact controls” is reusable. Record confidence beside each rule as repeated observation, single observation, or assumption. --- Use a one-page layout brief with five parts. Begin with a page map listing each section in order and its purpose. Add a layout table containing content width, columns, gaps, alignment, surface, and responsive change for each section. Add a type table with family, role, weight, size range, line height, and text width. The supplied Linear evidence gives a concrete observed starting point: Inter at 400 for body and controls, and 500 for headings and emphasized interface text. Add a surface table for canvas colors, dividers, borders, radii, shadows, and accent use. Include annotated screenshots only for relationships that are hard to describe, such as an overlap, crop, or state change. Finish with an implementation checklist for the first screen, mobile stacking, navigation states, button states, empty or loading states, and content-length checks. Mark every item as observed, inferred, or proposed. ## Related questions - [Capture Shadow Styles From a Live Website for Reuse](/share/capture-shadow-styles-from-a-live-website-for-reuse) - [Capture a Website Typography System for Reuse](/share/capture-typography-system-from-a-live-website-for-reuse) - [Extract a Website's Border Radius Scale](/share/extract-a-website-s-border-radius-scale) - [Extract a Website's Color System](/share/extract-a-website-s-color-system)