How to use screenshots with AI coding tools

1. Open the website you want to change

This works well when you are already building a website in an AI tool, or using a coding assistant with your project open. Open the page in Chrome, either on your live website or in your local preview.

Choose one change you can see: a vague button label, a heading that wraps awkwardly, an image that is too large or a section with too much empty space. You do not need to know the name of the component or the CSS property responsible.

Keep the same project open in your coding tool. A screenshot shows what the page looks like, but it does not give the assistant access to your files. If you only want advice, add a note saying “Suggest a change, but do not edit anything.”

2. Capture the page and mark your changes

Click Fully's toolbar button in Chrome. It captures the whole webpage and opens the mark-up preview. The surrounding page gives your coding tool context, so it can see the marked detail as part of the design.

Use Arrow to point to the exact detail, then Text to add a short request. For a button labelled “Learn more,” a useful note is “Change this to View our work.” Keep the words around the button visible.

You do not need to cover the page in annotations. One clear change is easier to explain and check than a whole redesign. For the capture steps, see the Chrome screenshot guide.

Put the request directly on the screenshot

Use Fully's Text tool to say what should change and what should stay. For the marked button in the walkthrough, your note could be:

The walkthrough's “Make this specific” note identifies the decision; the example above gives a concrete replacement. Add your chosen wording to your own capture before copying.

These are examples of notes on the image, not prompts to type again in chat. If the page or mobile state is not obvious, add that context as a note too. Place notes in clear space so they do not hide the detail you want changed.

3. Copy, paste and send

Review the whole screenshot and make sure your notes explain the changes you want. Click Copy full-page screenshot, return to your website project's AI chat and paste the finished PNG.

Check that the image appears, then send it. You do not need to type the same instructions again: the page gives context, the arrows show where to look and your notes say what to change.

Fully does not open the chat or send the image for you. Image input varies by tool and interface; if clipboard paste is not supported, use the destination's supported image input. Claude Code describes its options in the official image workflow.

4. Check the updated page, not just the reply

Open the preview and look at the same part of the page. For the button example, check that it now says “View our work,” still looks the same and still opens the original destination.

• Look at a narrow screen. Check that the change still fits and text is not cut off.
• Try the affected action. Click the button or link. A screenshot cannot prove it works.
• Look nearby. Make sure the tool has not changed content or layout you wanted to keep.

For bigger changes, include a note asking the coding tool to run the project's usual checks and report failures. Review the preview before approving publication; a successful build alone does not tell you whether the page looks right.

If it is not quite right, mark the remaining issue

Capture the updated page and point to what still needs attention. Add a note saying what is already correct so the assistant does not undo the useful part.

For a problem that only happens after clicking, add the steps to reproduce it as a note on the image. One still image cannot show an entire interaction.