Using full page screenshots as input for AI design analysis

Why a viewport screenshot is poor AI input

A language model only reasons about what is in the image. Hand it a viewport screenshot of a landing page and it sees a hero section, nothing else. It will still answer confidently, because that is what these models do, but the advice is about a fragment of a page it cannot see the rest of.

A full page capture removes that guesswork. The model gets the hero, the social proof, the feature blocks, the pricing table and the footer in one image, in the exact order a visitor meets them. That order is most of what design feedback is about: what comes first, what repeats, where the eye has nothing to hold on to, where the next call to action sits.

It also removes a whole category of wrong answers. Ask "is my call to action clear enough" from a viewport crop and the model cannot know there are four more buttons further down competing with it.

The workflow, step by step

This takes well under a minute once the extension is installed.

1. 1

   Let the page finish rendering

   On pages with lazy-loaded images or animated sections, scroll once to the bottom and back to the top. Everything the browser has not rendered yet cannot be captured, and a half-empty capture produces half-useful feedback.

2. 2

   Capture the whole page

   Press Alt+Shift+S (Option+Shift+S on macOS), or click the toolbar icon. The page scrolls itself, every section is captured and stitched into one tall image, and the result opens in a new tab.

3. 3

   Redact anything private first

   If the page shows customer names, invoices, email addresses or internal data, blur or block them in the built-in editor before the image leaves your machine. What you upload to an AI service is on that service's terms, not yours.

4. 4

   Export as PNG

   PNG is lossless, so text edges and thin borders stay crisp and the model is not reading JPEG artefacts. Use JPEG or WebP only when you are hitting an upload size limit.

5. 5

   Upload and ask a specific question

   Drag the file into ChatGPT, Claude, Gemini, Copilot or your AI builder. Vague prompts get vague answers, so name a goal: "This is the full homepage of a B2B SaaS product. Review visual hierarchy, spacing consistency and whether the primary call to action stays obvious from top to bottom. List concrete changes, most important first."

Prompts that actually produce useful feedback

The screenshot is the context; the prompt decides whether you get a critique or a compliment. Give the model a role, an audience and a single axis to judge.

• Hierarchy: "Walk down this page section by section and tell me what the eye lands on first in each one. Where does the hierarchy break?"
• Consistency: "List every inconsistency in spacing, heading sizes, button styles and corner radii you can see across the full page."
• Conversion path: "I sell a Chrome extension. Trace the path from the top of this page to the install button and name every point where a visitor could stall."
• Copy: "Rewrite the headline and the first paragraph of each section so a first-time visitor understands the product in five seconds."
• Comparison: upload your full page capture and a competitor's, then ask which one explains its product faster and why.
• Accessibility signals: "Flag any text on this page where the contrast against its background looks too low to read comfortably."

What an AI can and cannot judge from a screenshot

Being honest about the limits is what makes this workflow useful rather than a party trick. An image is a rendering, not the page.

• Reliable: visual hierarchy, section order, spacing rhythm, alignment, obvious inconsistencies, headline and copy clarity, whether a call to action stands out, layout density, apparent contrast problems.
• Not reliable: exact colour values and contrast ratios (the model estimates from pixels, it does not read your CSS), typography names, load performance, hover and focus states, animation, keyboard navigation, screen reader behaviour, responsive behaviour at other widths.
• Impossible: whether real users convert. A screenshot review is a heuristic critique, not a usability test or an accessibility audit.
• Practical tip: capture the same page at desktop and mobile widths and upload both. Most layout problems only show up in the comparison.

Very tall pages: why AI uploads fail and how to fix it

A long marketing page or documentation page can be 15,000 pixels tall. Upload that as a single image and one of three things happens: the service rejects the file size, it downscales the image until body text is unreadable, or the model simply pays less attention to the middle of an extremely long strip.

The fix is not cropping by hand. Export the capture as numbered parts of roughly 3000 to 5000 pixels each, with 160 pixels of overlap between them. The overlap matters: without it a heading and the paragraph it belongs to can land on opposite sides of a cut, and the model reads them as unrelated.

Then upload the parts in order and say so in the prompt: "These are numbered, overlapping sections of one page, in order from top to bottom. Review them as a single page." Most chat interfaces accept several images per message, so you keep one conversation and one critique.

Other things this workflow is good for

Design analysis is the obvious use, but the same capture is the input for a lot of everyday work.

• Client design review: annotate the full page capture with arrows and notes instead of describing sections in an email.
• Competitor analysis: keep a folder of full page captures of competitor sites and ask a model to summarise how each one positions itself.
• Screenshot to code: hand a full page capture to an AI builder as a starting point for structure and layout, then refine in the browser. Treat the output as a first draft, not a build.
• Bug reports: one image showing the whole broken page beats five crops, because the reviewer can see the state of everything around the bug.
• Documentation and handover: capture a complete flow, page by page, and keep it with the ticket.
• Archiving: a full page PNG or PDF of a page as it looked on a given day, useful for pricing pages, terms and proposals.

The capture itself stays on your machine

GoFullScreenshot scrolls, stitches, edits and exports entirely in your browser. There is no server in the pipeline, no account, no analytics and no uploaded copy of your page.

That matters precisely because the next step in this workflow is an AI service. You decide which image leaves your device, after you have had the chance to redact it. The extension never makes that decision for you.