A screenshot, a mockup, a photo of a whiteboard. The AI reads the layout and builds it as responsive markup — with the caveats an image inevitably brings.
Ember & Oak is a family owned coffee shop. We serve coffee, tea, muffins and more. Come visit us today!! Click here to see our prices. We are open Mon-Sat.
Images are a genuinely useful input, and they're lossy in specific ways. Knowing which information survives the trip saves you from expecting things a picture cannot carry.
What transfers well
Structure and proportion: how many columns, what sits beside what, relative sizes, the reading order, and roughly where the emphasis falls.
This is most of a layout, and it's the part that's tedious to describe in words. A rough sketch communicates in seconds what a paragraph of specification struggles with.
What an image can't contain
Responsive behaviour — a picture shows one width, so how the layout should reflow on a phone is inferred rather than read. Interaction: what happens on hover, what a menu does when opened. Content beyond what's legible in the image, including anything below the visible area.
Expect to state these afterwards rather than assuming the image conveyed them.
Where it's most useful
Two cases. Rebuilding something you can see but can't access — a competitor's layout, an old site with no source. And turning a rough sketch into something real early, when the alternative is arguing about a description.
For redesigning a live site you can reach, a URL is the better input: it carries your actual content as text rather than as pixels.
Common questions
What image formats work?
Standard screenshot formats. Legibility matters more than format — text that's hard to read in the image will be transcribed imperfectly.
Can I use a photo of a hand-drawn sketch?
Yes, for structure. Expect to supply the real content and refine the styling afterwards.
Will the text in my image be extracted?
Legible text is read, but treat it as a draft — proofread the output rather than assuming a clean transcription.
Is an image better than a URL as input?
Only when there's no URL. A live page carries text, links and structure that a picture flattens.
Use an image when you can't reach the original, and a URL whenever you can.