Screenshot to Code
From a Picture of a Screen to an App That Works
Attach a screenshot, a mockup or a photo of a sketch, and say what the screen should do. Fabricate writes the React code for the layout and builds what the picture cannot show: the data behind it, buttons that act, and sign-in when people need accounts.
- No coding required
- Database included
- Publish on Pro
A picture shows layout, not behavior
An image tells the AI where the boxes and buttons are. It does not say what a button does, where an entry is saved, or who may see the list. Code made from the picture alone is a screen that looks right and does nothing.
The picture plus your words
Fabricate takes the layout, spacing and colors from the image and the behavior from what you write: what each button does, what gets stored, and who signs in. The result is a working app in a preview, not a static page.
Start from an example
Pick one and the builder opens with its description filled in, or open a finished template and make it yours. Change any word before you build.
Paper sketch to a sign-up app
Photograph a sketch and say what happens when someone signs up.
Build an app from the attached photo of my sketch. It is a sign-up page for a weekend running club: name, email and preferred distance. Save each sign-up, and let me sign in to see a list of everyone who has joined.
Mockup to a booking page
A designer's mockup with real opening hours behind it.
Build this booking page from the attached mockup. Customers pick a service and an open time slot and enter their details. I sign in to set my opening hours and see the bookings for each day. Match the layout and colors in the image.
Old screen to a new tool
Rebuild an internal screen your team is stuck with.
The attached screenshot is the order screen of an old system we use. Rebuild it as a clean web app with the same fields. Staff sign in, add an order, and see a list of open orders they can mark as shipped.
- Attach a screenshot, mockup or sketch; the image sets the layout of the React code
- Describe what each part does; that is what turns the screen into a working app
- Colors and spacing are estimated from pixels; paste exact values when they matter
- PNG, JPG, GIF or WebP up to 10 MB, with several screens in one message
What Fabricate takes from an image
Layout and hierarchy
Columns, cards, navigation, headings and the order of things carry over from the picture into React components.
Colors and type, estimated
Colors, sizes and spacing are estimated from the pixels. Paste exact hex values or font names as text when they have to match.
Several screens at once
Attach up to 10 images in one message, such as the list, the detail page and the form, and say how people move between them.
Hand-drawn sketches
A clear photo of a paper sketch or a whiteboard works. Label the boxes, in the drawing or in your message, so the AI knows a box is a search field and not a picture.
What a picture cannot show
Storage, sign-in and the rule behind each button come from your description, so the screen in the image is wired to real data.
Fix it by pointing
When something comes back wrong, select it in the preview and say what to change instead of attaching a new image.
How to turn a screenshot into code
- 1
Take a clear picture
A PNG, JPG, GIF or WebP up to 10 MB. Crop it to the screen you want, and leave out browser bars and other windows.
- 2
Say what it does
Describe what each part of the screen is for, what gets saved, and who uses it. This is the part the image cannot tell the AI.
- 3
Compare the preview with the picture
Open the preview beside your image and ask for the differences that matter, one or two at a time.
- 4
Keep building
Add the next screens by describing them, then publish the app on Pro.
What an Image Can and Cannot Tell an AI
A screenshot carries more information than it seems to. From pixels alone a vision model can usually work out the grid, which elements belong together, what is a heading and what is a label, roughly which colors are used, and how much space sits between things. That is enough to write the markup and styles for a screen that looks like the picture.
What the image does not carry is everything that happens after a click. A form in a screenshot has no destination, a list has no source, and a button has no rule for who may press it. Without a description the AI has to guess, and the guess is usually a static page with placeholder data. One or two sentences about who uses the screen and what it saves turn the result from a mockup into an app.
Results are better from a cropped image of one screen than from a long full-page capture, because each part gets more resolution. Several images of related screens in one message work better than one image of everything, and naming them, as in "the first image is the list and the second is the detail page", tells the AI how they connect.
Hand-drawn sketches work when they are legible. Write labels on the boxes or in the message, since a rectangle could be a photo, a text field or a chart. Treat the first result as a draft: compare it with the picture and ask for the differences that matter most.
What people start from
- Paper sketches - A first version from a photo of a notebook page
- Designer mockups - Layouts exported from a design tool as images
- Old internal screens - A cleaner rebuild of a tool you are stuck with
- Whiteboard plans - The screens a team drew in a meeting
- Wireframes - Grey boxes turned into a working first draft
- Your own site - A screenshot of a page to restyle or extend
Frequently Asked Questions
- What is screenshot to code?
- Screenshot to code means giving an AI a picture of a screen and getting back source code that reproduces it. With Fabricate the picture sets the layout and your description sets the behavior, so the result is a working app with its own data rather than a static copy of the image.
- Which image files work?
- PNG, JPG, GIF and WebP images up to 10 MB each, with up to 10 attachments in one message. A PDF of a mockup works too, up to 5 MB.
- How close will the code be to my image?
- The structure usually comes back close: the same sections in the same order with similar proportions. Exact colors, spacing and fonts are estimates from pixels and often need a correction or two, so paste exact values as text when they matter.
- Is it only the front end?
- No. The image gives the front end, and your description gives the rest: the database tables, the server routes, and sign-in when people need accounts. All of it runs in the preview while you build.
- Can I use a screenshot of another company's site?
- Use it for layout ideas, not to copy their brand. Replace their name, logo, pictures and text with your own, because those belong to them.
- How is this different from Figma to code?
- It is the same image reading. Figma to code covers the designer handoff: exporting frames and pasting exact design tokens. Screenshot to code covers any picture, including sketches, whiteboards and screenshots of existing tools. Fabricate has no Figma plugin in either case.
- Can I export the code?
- Yes. The app is React and TypeScript, and on Pro and Max you can download the source or push it to GitHub.
Related pages
Check your app before you share it
Check your app for security problems and see what search engines and AI assistants read on it. Fix what is found by aski...
Read moreInvite your team
Invite staff or a partner to change your Fabricate app by chatting, or just to view it. On Pro and Max. You stay the own...
Read moreConnect your app to the tools you use
Send each booking, order or enquiry your app collects to Slack, Zapier, Make or any webhook. On Pro and Max. No code to ...
Read moreBuild from ChatGPT or Claude
Connect Fabricate to ChatGPT or Claude and ask it to build or change your app. Nothing is published until you approve it...
Read moreAll Fabricate Features
AI code generation, databases, auth, payments and more.
Read moreAI App Builder
Describe your app and get a frontend, database, logins and a live URL in minutes.
Read moreRelated guides
Have a picture of the screen you want?
Attach it, say what it should do, and try a working app with its own data in a preview. Start free.