Get the screenshot in
Crop the screenshot to one section (a hero, a pricing table, a footer). One section per prompt gives much better results than a whole page.
| Tool | How |
|---|---|
| Claude Code | Drag the image into the window, paste with Ctrl+V (Alt+V on Windows), or give the file path: "Look at ./refs/hero.png" |
| Codex CLI | Paste the image into the composer, or start with codex --image refs/hero.png "your prompt" |
Tip: keep reference screenshots in a refs/ folder in your project so you can point to them by path later.
The 6 prompts (use in order)
1. First draft
Prompt
Build this section from the screenshot in [HTML + Tailwind / a React component]. Match the layout, spacing and hierarchy. Use my brand colors [#1E3A8A, #F97316] and my own text below, not the text in the image: [paste your headline, sub-headline, button text]
2. Describe before building (for complex layouts)
Prompt
Before writing code, describe this screenshot: the grid, each element top to bottom, font sizes relative to each other, and spacing. Then build it.
3. Mobile
Prompt
Now make it work at 375px wide: stack the columns, keep the button full width, and make sure no text is smaller than 16px.
4. Match it closer
Prompt
Compare your version with the screenshot. List the 5 biggest differences in spacing, sizes or alignment, then fix them.
5. Accessibility pass
Prompt
Check this section: semantic HTML tags, alt text on images, color contrast on text and buttons, and visible focus states. Fix anything that fails.
6. Make it a reusable component
Prompt
Turn this into a reusable component with props for the headline, text, button label, button link and image, and show me one example of using it.
Rules: inspiration, not copying
- Use screenshots for layout ideas. Always swap in your own (or your client's) text, colors, logo and photos.
- Never reuse someone else's images, logos, illustrations or written copy. They are usually copyrighted.
- Combine ideas from 2–3 references so the result is clearly your own design.
Before you show it to a client
- Looks right at 375px, 768px and desktop widths
- All text and images are the client's own (or properly licensed)
- Buttons and links go somewhere real
- Passes the accessibility prompt (#5)
Checked against the official docs (Nov 2026): Claude Code docs: Work with images · Codex CLI
Need a website built properly?
We build fast, mobile-first websites for businesses, with this exact AI workflow.