Claude·4 min read

Screenshots and previews: let the assistant look at your site

The assistant opens your site in a real browser on the server and shows how it looks on desktop and mobile. How to ask, and how to read it.

I just changed the colours on my home page. Take a screenshot on desktop
and on mobile and tell me whether anything looks wrong.

An assistant that writes code and then says "done" is only half the job. The other half is checking that it also looks right. The assistant on your hosting account can do that itself: it opens your website in a real browser on the server and puts the result in the conversation as an image. You do not have to open anything or log in anywhere.

What happens when you ask

There is a browser without a window on the server. The assistant loads your page in it, waits until everything has settled, and takes a picture. That picture appears in the chat, stored inside your own account and not in your web root. Your visitors never see any of it.

One thing matters here: it is a real browser, not a prediction of how the page ought to look. If something overlaps, a button falls off the screen or an image is missing, the assistant sees it just as plainly as you would.

The two sizes

Size Dimensions For
Desktop 1280 by 800 laptop and monitor
Mobile 390 by 844 an average size phone

Ask for both and you get two images side by side. Make that your default for anything a visitor sees. Most of the mistakes in a new theme are on mobile, because a wide table or a menu that does not collapse shows up there straight away.

You can also ask for the whole page instead of just the first screen. That helps with a long home page: you then also see the sections at the bottom that you would otherwise have to scroll to.

What comes with the picture

Three things arrive with every screenshot, and they are often more useful than the picture itself:

  1. The status of the page. A 200 means fine. If you see a 404 or a 500, you are not looking at your new design but at an error page.
  2. The page title. That is the text that shows in Google and on the browser tab. If it still says "My WordPress site", you know what to fix first.
  3. Errors in the browser console. A script that fails to load, or a piece of JavaScript that breaks. You often cannot see those on the page itself, while they can quietly stop a form or a slider from working.

That last point is the reason to ask for a screenshot even when the page looks fine to you. A page that looks right with three console errors is a page with work still to come.

Four requests you can copy

After a change to your theme:

Take a screenshot of the home page and the contact page on desktop and
mobile. Tell me per page what looks wrong, then fix it.

A visitor reports something broken:

A customer says the menu does not open on his phone. Take a mobile
screenshot and check whether there are console errors.

Walking through a long page:

Take a screenshot of the entire home page, top to bottom, on mobile. Look
for sections that are too narrow or too wide.

Before and after an update:

First take a screenshot of the home page. Then update the plugins and take
another screenshot. Compare the two and tell me what changed.

That last pattern is worth remembering. An update that quietly breaks something stands out when you have a picture from before.

Previews: the same thing, on a copy

If you would rather not rebuild on your live site, you can work on a preview address: preview.yourdomain.com, with its own files and, for WordPress, its own copy of the database. Screenshots work exactly the same there; you just name that address in your request. You publish later yourself, and publishing starts by making a safety copy of the live site.

Common mistakes

"It says everything looks good, but not on my phone." Then ask for mobile explicitly. Without that, the assistant often looks at desktop size only, and a layout that works at 1280 pixels can shift completely at 390.

"The screenshot shows the old version." That is nearly always the cache. LiteSpeed Cache serves the stored page to a browser that is not logged in. Ask it to purge the cache and look again.

"I wanted a picture of my admin screen." Pages behind a login cannot be captured; the browser is not logged in. Ask about the setting itself instead, for example which plugins are active.

"I asked for twenty screenshots and it took ages." There is one browser per account, and every picture costs a few seconds plus memory. Keep it to a handful per request; for a whole site it is better to work page by page.

"It took a screenshot after a change in a text file." That is wasted time. Ask for one after changes a visitor sees, not after an edit to a script or a setting.

If you would rather let the assistant decide when looking is useful, that is part of the platform knowledge that is always on. See Skills on and off for what you can and cannot choose.

MK
Maarten Keizer

Founder of Invoker. Over twenty years in hosting, system administration and web development; builds the Claude hosting himself and tests everything on our own servers first.

about maarten