Home · Business · Product & Strategy · UX & prototyping
As of 13 August 2026, AI can create a prototype from a website screenshot.
Most people should hand this to a purpose-built tool.
Can you do it?
15 minutesto a draft.
1 hourto something you’d act on.
Cost, all in£0
Skill neededpower-user
Who has to check ityou
What the alternative costsA human product designer and front-end developer are the alternative; no price figure is provided in the supplied information.
If this goes wrong: the prototype looks close in one view but misrepresents the experience on other screens or devices, so you need another design and testing pass.
What to actually do
Use a tool built for this
The route this page recommends
Hand it to a person
Second choiceA person who owns the outcome does this end to end, worth it when the failure is dear.
Do it yourself
The distant thirdA chat interface, power-user skill, and roughly 1 hour until you can act on the result.
How to actually do it
- Open the screenshot at its original resolution and gather the approved copy, logo, images, colour values, font details and any existing design files.
- Write down the user journey the prototype must demonstrate, including the starting screen, each interaction, the expected result and any screens not visible in the screenshot.
- Paste the screenshot, the gathered assets and the completed requirements into the prompt, then ask the chatbot to produce a small working web prototype rather than a static image.
- Open the generated prototype in a browser and test every button, link, form control and navigation path named in the requirements.
- Compare the prototype with the screenshot at the intended desktop and mobile widths, checking layout, spacing, text, colours, images and responsive behaviour.
- Use the tool to correct specific mismatches, then repeat the browser test and check keyboard navigation, focus states, labels and readable contrast.
- Send the tested prototype to a colleague with the written assumptions and unresolved questions, and record which visual or interaction decisions still need product approval.
Prompt
Create a clickable web prototype based on the attached website screenshot. Goal: reproduce the visible page as a realistic prototype for [product or user journey]. Use the screenshot as a visual reference, but do not copy assets or text that are not supplied here. Use these requirements: - Target users: [describe the users] - Main task the user should complete: [describe the task] - Required screens or states: [list them] - Required interactions: [list what happens when each button, link or form control is used] - Content and labels to use: [paste approved copy] - Brand colours, fonts and assets: [paste details or attach files] - Responsive requirements: [describe desktop and mobile behaviour] - Accessibility requirements: use semantic HTML, keyboard navigation, visible focus states, sufficient colour contrast and meaningful labels. Build the smallest working prototype that demonstrates the journey. Match the screenshot's layout, spacing, hierarchy, colours and component style where the requirements are clear. Where the screenshot is ambiguous, make the least-assumptive choice and list it separately instead of inventing product rules. Keep the code organised and easy to edit. Include a short list of assumptions, unresolved questions and a test checklist after the prototype is produced.
Open it prefilled in ChatGPT or Claude, or copy it into Gemini, which takes no prefill link.
What it gets wrong
- A screenshot does not reveal the intended behaviour behind every control, so AI fills gaps with assumptions.
- AI cannot know whether the recreated layout reflects your product strategy, user research or internal constraints.
- Visual similarity can hide poor responsive behaviour, inaccessible controls and incomplete states.
- It cannot supply approved copy, licensed assets or brand decisions that are absent from the screenshot.
- The prototype is not evidence that the underlying product is technically ready to build.
Even on a YES, the friction has a name: judgement under ambiguity, context depth and taste.
How we scored this
Five axes, each scored nought to two by hand: ten means AI carries the task cleanly, and the thresholds that turn a total into YES, PARTLY or NO are published in the methodology. Each axis name links to its definition.
| Axis | Score (0–2) |
|---|---|
| Output | 2 |
| Inputs | 2 |
| Verification | 1 |
| Liability | 2 |
| Effort delta | 2 |
| Total | 9 / 10 |
The methodology and its thresholds are published in full.
FAQ
- Can AI turn a screenshot into a working prototype?
- Yes. Current AI development tools can use a screenshot, written requirements and supplied assets to generate a clickable web prototype. You still need to describe the interactions because a screenshot shows appearance, not the complete user journey.
- Can AI copy a website design from a screenshot?
- It can reproduce much of the visible layout, styling and content structure. It cannot reliably infer hidden states, responsive rules, accessibility requirements or the design decisions behind the page, so compare the result with the source and test it on more than one screen size.
- What do I need to give AI to make a prototype from a screenshot?
- Give it the original screenshot, approved text, brand assets, target users, the journey you want to demonstrate and the behaviour of each control. If any of those are missing, tell it to list assumptions instead of inventing product rules.
- Is an AI prototype ready to show customers?
- It can be suitable for an early concept review after you test the links, forms, responsive layout and accessibility basics. It is not proof that the product is technically complete or that the design has been validated with users.
Nearby answers
Assessed by gpt-5.6-luna (gpt-5.6-luna) on 2026-08-13, second-checked by an independent model. Wrong somewhere? Email [email protected] and it gets re-checked.
The newsletter
AI news, new answers and product picks, straight to your inbox.