Layout correction
Focus on the marked pricing cards. Make their button rows align without changing the card copy or page colours.
How to create a visual prompt for website changes in ChatGPT
With Fully McFullface, a visual prompt can show ChatGPT the whole webpage and point to the exact part you want to improve. Put your instructions directly on the screenshot with arrows and notes, copy the finished PNG, paste it into ChatGPT and send it.
What is a visual prompt for website changes?
Here, a visual prompt is a screenshot used as part of an instruction to an AI tool. The webpage provides visual context. Your arrows show where to look and your notes explain the result you want. The finished image is the visual prompt.
This is different from asking ChatGPT to write a prompt for generating a new image. You are giving it a real webpage to inspect, explain or help you improve.
OpenAI recommends marking up an image when you want to draw ChatGPT's attention to a particular area. See the ChatGPT image input guidance.
A website-change visual prompt
Imagine this fictional studio page has a vague call to action. The full page preserves the design context, while the arrow and note turn a general request into one specific change.
Create the visual prompt in four steps
- Capture. Open the webpage in Chrome and click the Fully McFullface toolbar button. Fully captures the complete page and opens it in the mark-up preview. Read the full-page screenshot guide for the complete capture workflow.
- Mark up. Point to the exact component, text or spacing problem. Add a short note saying what should change and what should stay.
- Copy. Review the complete image, then copy the finished PNG to your clipboard.
- Paste. Open ChatGPT, paste the image into the message box and send it. There is no need to retype the instructions you put on the screenshot.
Write useful notes directly on the image
Use Fully\'s Text tool to add the outcome you want and anything that must stay unchanged. Write these notes before copying, so the finished image contains the request.
Add an arrow to the detail, then a note beside it:
Focus on [the marked area].
[Describe the outcome you want.]
Keep [important constraint] unchanged.
Design feedback
Focus on the marked navigation. Make the active page easier to identify while keeping the header restrained.
Copy improvement
Focus on the marked button. Replace the vague label with a short action that tells visitors what happens next.
When is a visual prompt useful?
If you want an assistant to change the website you are building, use the AI coding guide to prepare the image-based request and check the updated preview.
Use one when the position, hierarchy, spacing or surrounding design affects the answer. A full-page screenshot is useful when a change must make sense within the rest of the page, not only inside one cropped component.
Use text alone when the request does not depend on appearance. If the full page contains distracting or irrelevant material, simplify the annotations or provide a closer image as well.
Sharing the image with a person rather than an AI tool? Read how to give clear website feedback with an annotated screenshot.
Check privacy before you paste
A full webpage can include names, email addresses, account details or private work outside the marked area. Review the entire screenshot and cover anything ChatGPT does not need. Fully processes the capture on your device and does not automatically upload it. The destination's own privacy terms apply when you choose to paste the image there.
Use the screenshot privacy guide to review and cover private details before sharing. Read the Privacy Policy for Fully's exact storage, retention and permission boundaries.
Show the page. Point to the change.
Fully McFullface is available in the Chrome Web Store. It captures the whole page, lets you mark up your changes and copies one finished PNG for you to paste where you choose.