Screenshot QA via claude.ai: The Universal Method

The Claude Chrome extension is fast and live, but it requires installation, permissions, and a Chrome session. There is a method that requires none of that and covers cases the extension cannot: take a screenshot, upload it to claude.ai, and ask for an audit.

This is the universal method. It works on Firefox, Safari, or Chrome. It works on your phone. It works when you are auditing a deployed staging environment from a machine that does not have Claude Code installed. It works for design comparison — feeding Claude both the Figma mockup and your implementation and asking it to find the delta. It works for batch audits where you screenshot five pages at once, upload all five, and get a comprehensive report.

Every developer working with Claude should know this workflow cold.

Screenshot Techniques

The quality of your audit depends partly on the quality of your screenshot. A few things to get right:

Full page vs. viewport. The default screenshot (Cmd+Shift+4 on Mac, Win+Shift+S on Windows) captures only the visible viewport. A full-page screenshot captures everything including content below the fold. For initial audits, viewport is fine — you scroll and audit in sections. For design comparison, full-page screenshots eliminate scroll position as a variable.

On Mac, Cmd+Shift+4 gives you a crosshair to draw a selection. Cmd+Shift+3 captures the entire screen. For a clean browser-only screenshot without the OS chrome, use Cmd+Shift+4 and draw around the browser viewport.

For full-page screenshots in Chrome: open DevTools (Cmd+Option+I), press Cmd+Shift+P to open the command palette, type "screenshot", and select "Capture full size screenshot." This captures the entire document height.

Retina and display scaling. On a Mac with a Retina display, screenshots are taken at 2x pixel density. The layout dimensions (in CSS pixels) are still correct — a 1200px-wide container will look proportionally correct. Do not worry about this. Claude handles high-DPI screenshots natively.

Capture the right state. If you are auditing a page with interactive state (an open dropdown, an active tab, a filled form), set up that state in the browser before screenshotting. Claude audits what is visible in the screenshot, not what could be visible with interaction.

Naming convention for batch work. If you are capturing multiple pages or states, name them descriptively before uploading: pricing-desktop.png, pricing-mobile.png, dashboard-empty-state.png. This helps you reference specific images in your prompts and keeps findings organized.

Effective Prompts for Screenshot Analysis

As with the Chrome extension, specificity drives quality. The difference is that with screenshots you can also provide design intent as context.

Single-page audit with specific focus areas:

Audit this screenshot for visual issues. Focus on:
1. Typography consistency — are font sizes, weights, and colors consistent?
2. Spacing — is there a consistent rhythm to the vertical and horizontal gaps?
3. Alignment — are elements aligned to a clear grid?

List findings by severity (P0/P1/P2) with the page location for each.

Component-level audit:

Focus on the card component in the center of this screenshot.
- Does the internal padding look consistent on all four sides?
- Is the image aspect ratio correct (should be 16:9)?
- Does the title typography look proportionally correct relative to the body text?
- Is the button aligned correctly at the bottom?

Contrast and accessibility:

Check the text contrast in this screenshot. For each text element you
can identify, estimate whether it meets WCAG AA contrast requirements
(4.5:1 for body text, 3:1 for large text). Flag anything that looks marginal.

State-based audit:

This screenshot shows a form in its error state. Check:
- Are all error messages visible and readable?
- Is the error color accessible (high enough contrast)?
- Are the error indicators (red borders, icons) clearly associated
  with their respective fields?
- Does anything look broken or misaligned compared to a normal form?

Multi-Screenshot Design Comparison

This is the highest-value use case for screenshot QA and the one that sets it apart from the Chrome extension.

When you have a Figma mockup (or any design reference) and an implementation, you can upload both and ask Claude to diff them visually. This produces a structured list of divergences that would otherwise require a designer's eye to catch.

How to do it:

Export or screenshot the design mockup. If it is in Figma, use the export function to get a PNG at the right dimensions. If it is a screenshot from a design review, crop it to the relevant section.
Screenshot your implementation at the same viewport width.
Upload both to claude.ai in the same message.
Use this prompt structure:

Image 1 is the design mockup. Image 2 is my implementation.
List every visual difference you can identify between them, grouped by category:

- Layout: column widths, element sizes, positioning
- Typography: font sizes, weights, colors, line heights
- Spacing: padding, margins, gaps between elements
- Color: background colors, text colors, button colors, border colors
- Missing or extra elements: anything present in one but not the other

For each difference, describe what the mockup shows vs. what the implementation shows.

This prompt regularly surfaces 8-12 specific differences on a moderately complex page, many of which would have taken multiple Claude Code iterations to find through text description alone. You take the list directly into Claude Code with file path hints and fix the whole batch.

Mobile Responsive Auditing

One of the hardest things to get right in frontend development is responsive layouts. Issues that are invisible at 1440px become obvious at 375px. Screenshot QA makes mobile testing accessible without a physical device.

Browser resize method. Drag your browser window to approximately 375px (iPhone SE) or 390px (iPhone 14/15) wide. The page reflows to mobile layout. Screenshot it. Upload.

DevTools device emulation. In Chrome DevTools, click the responsive/device toolbar icon (or press Cmd+Shift+M). Select iPhone 14 or a generic mobile width. The page renders in mobile mode. Screenshot it directly. This is more accurate than manual window resizing because it sets the correct device pixel ratio and user agent.

What to ask in your mobile audit prompt:

This screenshot is the mobile layout (375px viewport) of a page
designed primarily for desktop. Check for:
- Text that is too small to read comfortably on mobile (below 16px equivalent)
- Elements that overflow their container horizontally
- Buttons or touch targets that appear too small (should be at least 44x44px)
- Images that appear distorted or incorrectly cropped at this width
- Navigation or header elements that look broken
- Content that is cut off or hidden that should be visible

Rate severity: P0 (broken), P1 (wrong), P2 (polish).

Batch Workflow: Five Pages at Once

Screenshot QA does not require one page at a time. For a comprehensive audit of a site's current state — before a launch, after a major refactor, or as a periodic quality check — you can upload multiple screenshots in one claude.ai session and get a full report.

Workflow:

Navigate to each page. Screenshot each one. Name them clearly: home.png, about.png, pricing.png, blog-index.png, blog-post.png.
Open claude.ai. Start a new conversation.
Upload all five screenshots.
Use this prompt:

I am uploading screenshots of five pages from a website.
For each page:
- List the page name based on the content visible
- List any P0 or P1 visual issues you can identify
- Note any inconsistencies between pages (typography, spacing, color usage that differs across pages when it should be consistent)

At the end, give me a cross-page summary of any systemic issues —
patterns that appear broken on multiple pages.

The cross-page consistency check is something you almost cannot do any other way without significant manual effort. Systemic issues — an inconsistent font weight usage, a spacing scale that is applied differently across pages, a color that is slightly different in two places it should match — surface immediately when Claude sees multiple pages in the same context window.

claude.ai vs. Chrome Extension: When to Use Which

Both tools see screenshots. The decision is about workflow fit.

Use the Chrome extension when:

You are in active development and want instant, in-context inspection
You want to audit the current live state without switching apps
You are fixing a single component and want rapid feedback between iterations
You need to audit interactive state (hover effects, focus states, dropdown positions)

Use claude.ai screenshot upload when:

You want to compare your implementation against a design mockup
You are auditing multiple pages in one session
You are on a device without the extension installed
You are doing a mobile responsive audit (easier to screenshot at exact dimensions)
You want a systematic audit of an entire section of the site, not just a single viewport

They are complementary. The Chrome extension is a fast scalpel. Screenshot upload is a broader sweep.

Pasting Screenshots into Claude Code

If your version of Claude Code supports image input (check by looking for an image upload button in the terminal UI or slash command), you can skip the claude.ai step entirely and paste or drag a screenshot directly into the Claude Code session.

The prompt format works the same way:

[screenshot pasted]

This is the current state of src/components/PricingTable.tsx.
Audit it for visual issues. I know this file is at
src/components/PricingTable.tsx and the parent layout is at
src/app/pricing/page.tsx. List issues by severity and suggest
specific CSS or Tailwind class changes.

When this works, it is the most integrated option — Claude Code can see the visual issue and also read the source file in the same context, which means it can suggest fixes that are anchored to the specific classes and components present, not just generic CSS suggestions.

The Exercise

Pick a page you have built recently, or use any public page as practice.
Take a full-page screenshot (use Chrome DevTools "Capture full size screenshot" for completeness).
Upload it to claude.ai.
Use this prompt: "Audit this page for visual issues. Group findings by severity (P0/P1/P2). For each finding, describe the location on the page and what the expected behavior should be."
Take the top three findings (P0 first, then P1).
If this is your project: carry those findings to Claude Code with file path hints and a targeted fix instruction. Re-screenshot after the fix and confirm the issues resolved.
If this is a practice page: write the fix instructions yourself — what CSS property would you change, in which element, and what would you change it to? This trains the skill of translating visual observations into implementation instructions.

Common Mistakes

Taking screenshots at a non-representative viewport width. If your design targets 1440px desktop but you screenshot at your default 1280px browser window, you may see layout quirks caused by the width mismatch rather than real issues. Always screenshot at the viewport width your design targets.

Uploading screenshots that are too small or low-quality. Claude can work with smaller images, but fine details (text weights, small spacing differences, thin borders) are easier to assess at full resolution. Use PNG, not heavily compressed JPEG, for screenshots where detail matters.

Asking for a full audit and then fixing everything at once. Upload five pages, get forty findings, dump all forty into Claude Code. This produces context overload and lower-quality fixes. Triage the list: fix P0s immediately, batch P1s by file (all changes to PricingTable.tsx in one Claude Code turn), schedule P2s for a polish pass.

Forgetting that claude.ai conversations are not connected to your codebase. Claude can describe what to fix and suggest CSS, but it cannot read your files from the claude.ai interface. The handoff — taking findings from claude.ai into a Claude Code session that can read and edit your files — is a deliberate step. Build it into your workflow as a natural handoff point.

Summary

Screenshot QA via claude.ai is the universal fallback that every frontend developer should know. No extension. No special setup. Take a screenshot, upload it, ask specific questions, get structured findings. The design comparison workflow — mockup vs. implementation in one prompt — is its highest-value application. Mobile auditing, batch multi-page reviews, and cross-page consistency checks are all faster with screenshots than with any single-page live inspection tool.

What's Next

The next lesson teaches you to write visual audit reports that Claude Code can execute in one pass — the structured format that turns raw findings from any source (Chrome extension, screenshot upload, your own eyes) into Claude Code instructions that produce first-attempt fixes instead of iterative back-and-forth.