HUZAIFA SHOUKAT@huzaifabuildz
SITEFree guide · 1-page PDF

THE SCREENSHOT-TO-WEBSITE CHECKLIST

Give Claude the design and the behavior that an image cannot show.

No email required. Keep it for your next build.

What to provide

  1. A clear, full-page screenshot of your own design or one you are allowed to use.
  2. A phone-size screenshot if available, plus notes on what each button, menu and form should do.

The build prompt to copy

Build this page from the screenshot I've attached. Match the layout, colours, fonts, spacing and text.
Make it work on a phone screen too.
The screenshot can't show what happens when you click, so here's how it should work:
- [button]: [what it does]
- [menu]: [what opens]
- [form]: [what happens when it's sent, and the error message if a field is wrong]
- When the page is empty: [what it shows]
If anything isn't clear, ask me instead of guessing.

Check the result

  1. Compare the screenshot and the rebuilt page side by side. Check a phone layout too.
  2. Click every button and menu. Submit each form and check its error states.
  3. Check hover, focus and empty states. Overlay the screenshot at half opacity to list visual differences.
  4. Send Claude the list of differences, ask it to fix each one, then repeat the checks.

The fix prompt to copy

Here's every difference between the screenshot and your version: [list]. Fix each one, then tell me what you changed.

KEEP THE GUIDE HANDY

Save the one-page PDF for later.

Download free PDF

TRY NEXT