Full Webpage Screenshot How-to
Reference Sheet
Use this page as a simple reference for the basic web design review loop in Claude. Follow the steps in order to inspect a page, capture a full-size screenshot, reduce the image size, and copy the page styles for the next iteration.
01
Go to the website page
Open the target page in your browser before starting the review loop.
Open the website page you want to inspect and iterate on.02
Open DevTools
Launch the browser inspector so you can review elements and styles.
Press Ctrl + Shift + I, or right click the page and choose Inspect.03
Set viewport size
Switch the responsive dimensions to a standard desktop review size.
Set the viewport to 1920 × 1080.04
Open the command menu
Use the DevTools command prompt to quickly access screenshot tools.
Press Ctrl + Shift + P.05
Capture a full size screenshot
Search for the screenshot action and capture the full page.
Type Screenshot, then choose Capture full size screenshot.06
Resize the PNG
The screenshot file may be large, so shrink it before reuse.
Resize the PNG to 50% of its original dimensions.07
Copy the styles
Use the Elements tab to capture style information from the page.
In the Elements tab, right click the body tag, then choose Copy → Copy styles.