Compare a mockup with the test website

Supply the test site, mockup version, viewport size and page states. Use a page-viewing tool to compare them, then list differences, visual evidence and unobservable areas.

Execution environment and usage

AI / software

Claude in Chrome side panel + connected Claude Desktop

Where to operate

Claude in Chrome extension side panel in Google Chrome; keep Claude Desktop connected for browser-driving tasks.

Getting started

  1. Open the test site in Google Chrome with Claude in Chrome already installed and signed in. Click the Claude toolbar icon to open the side panel.
  2. Provide the mockup version, viewport, language and page states. Authorize only test pages; keep Claude Desktop open for page actions.
  3. Request visual and interaction differences with locations/screenshots and unobservable areas, without changing production data.
  4. If unavailable, capture matched mockup/test screenshots yourself and add them through ChatGPT + → Add photos & files. This compares supplied views, not unobserved interactions.

Setup and plan requirements

Accessible test site, matching mockup, viewport and app state; authorized test login if needed. Browser driving prerequisites differ from current-tab reading.

Prompt portability limits

Paired screenshots allow portable visual comparison. Live state changes and reproducibility checks require browser interaction; no coding change is requested.

Usage limitations

Extension retains its name; panel became Cowork, with further unified Claude rollout. Historical tool/source attribution is retained. Not hands-on tested; verify plan, region, workspace and site access separately.

Environment sources

適用情境 / When to use

Supply the test site, mockup version, viewport size and page states. Use a page-viewing tool to compare them, then list differences, visual evidence and unobservable areas. Do not change code or production data. Source record: PathFormer reports using the Claude browser extension to compare HTML mockups with an app and produce a UI differences document.

步驟 / Steps

  1. Prepare a readable test site, mockup version, viewport and nonpersonal test account.
  2. Compare specified screens and states, separating visual differences, interactions and unobservable details.
  3. Attach locations or screenshots and have a person confirm the design remains current.

提示詞 / Prompt

Compare [test site] with [mockup version] for [screens and states] at [viewport and language]. Record reproducible differences, evidence locations and unknowns. Impose no style preferences, edit no code and operate no production data.

留意事項 / Cautions

  • Intentional redesigns are not automatically defects.
  • Read test pages only; avoid payment, deletion and production submission.

來源限制 / Evidence limits

This brief user account provides no defect-detection rate or complete activity log.

流程說明 / Workflow note

These steps and prompts are original, untested exercises by this site, not the author’s verbatim workflow. Reported results do not guarantee exercise outcomes.

原始工具組合 / Original tool stack

Claude in Chrome; HTML mockups; browser app

Source checked: 2026-10-19

Do you actually use the Claude Chrome extension? If so, how?