01
What to provide
- A clear, full-page screenshot of your own design or one you are allowed to use.
- A phone-size screenshot if available, plus notes on what each button, menu and form should do.
02
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.
03
Check the result
- Compare the screenshot and the rebuilt page side by side. Check a phone layout too.
- Click every button and menu. Submit each form and check its error states.
- Check hover, focus and empty states. Overlay the screenshot at half opacity to list visual differences.
- Send Claude the list of differences, ask it to fix each one, then repeat the checks.
04
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.