Image to Website · Your App Cloud
Build a website from an image or mockup
An image of a website shows how the pages look, not what they should say. Upload it for the layout, paste your real words and photos, give each drawn button a destination and check every page on a phone.
From a picture of a page to pages people can visit.
Keep the layout apart from the content, give every drawn button a destination, then look at the narrow screen the mockup never showed.
01
Attach the mockup, then your own photos
Attach the mockup or screenshot with the upload button above. Add the photos and logo you want on the site as separate image files, rather than letting them be cut from the mockup. In the prompt, say which file is the layout and which are content, such as 'the homepage mockup is the design; the other images are class photos'.
02
Paste the words the image only shows
A mockup carries stand-in text, and a screenshot of another site carries someone else's. Paste your own headline, section text, prices, hours and address into the prompt, under the name of the section each one fills. Then say where every menu item and button should lead.
03
Check the phone layout, then every link
Open the preview at the width of a phone and scroll the home page. Check the order in which sections stack, that the menu opens, and that any headline over a photo stays readable. Click each button, publish, then open the address on your own phone.
Reading a mockup, one part at a time.
Read across each row: something drawn in the image, what it can become on the site, and how to confirm it. The rows use a made-up example: a designer's desktop homepage mockup for Tidewater Clay Studio, a pottery studio in Long Beach, California.
| In the mockup | On the website | How to confirm it |
|---|---|---|
| A menu bar across the top: Classes, Open Studio, Gallery, Visit | A page for each item, and a menu that still fits on a phone | The mockup draws the home page only. Describe what each of the other four pages holds, or attach a mockup of each, then open every menu item in the preview at phone width. |
| A large headline, 'Your headline here', and paragraphs of 'Lorem ipsum' under each section | Your own headline and section text, typed as text on the page | Search each preview page for 'lorem', 'headline here' and 'tagline'. Every hit is stand-in copy that slipped through. Then drag your cursor across the headline: if it highlights word by word, it is real text that screen readers and search engines can read. |
| The photo behind that headline, a stock image the designer dropped in | A photo you own or are licensed to publish, attached as its own file | A photo cut from the mockup is a small copy of a copy, so attach the original. On a phone, check that the headline still stands out against the part of the photo it now covers. |
| Three class cards side by side: Wheel basics, Hand-building, Glaze night | Sections that sit in a row on a laptop and one above another on a phone | Say which card comes first on a narrow screen. Read the cards one at a time on a phone; each should make sense without the other two beside it. |
| A 'Book a class' button | A link to wherever booking happens now: your booking page, a phone number or an email address | A drawn button leads nowhere. Name its destination in the prompt, then tap it in the preview and again on the published site. |
| A contact form drawn with Name, Email and Message boxes | A form that saves each message or emails it to you, which needs a backend. On a one-page site, a button that opens an email to you instead | Send a test message from a phone and check where it lands, with the sender's address intact. If the site emails you each message, test that email before relying on it. |
| A gray circle marked 'LOGO' in the corner | Your logo from your own file, at the top of every page | Attach the logo file itself rather than a screenshot of it. Check it stays sharp on a phone and that tapping it returns to the home page. |
| Footer icons for Instagram, Facebook and a map pin, plus '(562) 555-0134' | Links to the profiles you actually keep, and your address and phone number as text | Tap each icon and read where it goes. Remove icons for accounts you don't have rather than leaving a link to nowhere, and type the address out so visitors can copy it into a map app. |
| The typeface and the terracotta and cream colors, as they look in the image | Fonts and colors named in your prompt | A screenshot shows a font without its name, and a compressed image can shift colors slightly. Copy the font names and color codes from the design tool, then compare one heading in the preview with the mockup at the same zoom. |
A mockup is a picture of a finished page.
A Word file, a PDF or a slide deck brings the words and needs a layout. An image of a site brings the layout and needs the words: its text is often a stand-in, its photos are placeholders and its buttons are drawn. Sort out what's real before you upload.
Stand-in copy and comp photos
Designers fill mockups with placeholder text and stock photos to show spacing. A watermarked preview, or a photo bought for the mockup only, may not be licensed for a public website. Check the license with your designer, or replace it with your own photo.
Your old site, before it goes offline
Screenshots of your current site record how it looked at one width on one day. They don't record where each link went or what the contact form did, and unless you captured the whole page, they miss the words below the fold. Copy the text and note every link target while the old site still loads.
Someone else's website
A site you admire can show an arrangement worth borrowing: where the menu sits, how one section leads into the next. Say in the prompt that the screenshot is a layout reference only. Their words, photos, logo and colors stay theirs, and so do menu labels that fit their business rather than yours. Read your footer and menu for anything of theirs that came along.
A sitemap sketched on paper
Boxes and lines on a whiteboard can plan a whole site before anyone draws a page. Type the plan into the prompt as a list, one line per box, with what that page holds, such as 'Visit: hours, parking, map link'. Mark which pages belong in the top menu and which only in the footer, such as a privacy page.
An illustrative starting point
Real pages behind the picture.
A page for each item in your mockup's menu, your own words and photos in the designed layout, a phone layout you checked and buttons that lead somewhere.
The layout you already approved
The section order, spacing and menu from the mockup, built as pages you can click through. Put the preview and the image side by side and list only the differences that matter to you.
Your words where the placeholders were
Headlines, class descriptions, prices and hours from your prompt, in the slots the mockup filled with placeholders. On the published pages, check prices, hours and the phone number against your own records, since those are the words visitors act on.
A phone layout nobody drew
Sections that stack in the order you chose, a menu that fits a narrow screen, and headlines you checked over their photos. Many mockups are drawn at laptop width only, so this part is yours to review.
Buttons with a destination
Each drawn button pointed at a real place: another page or section, the booking page you use now, a phone number or an email address. Plain links like these fit a one-page site. A drawn form that keeps or emails messages makes it an app with data. Tap every button on a phone once the site is published.
Together in your app cloud
The pieces behind the possibility.
Choose the models and services that support the experience you want to create.
File storage
A home for your documents and media
Email
Keep conversations moving
Security
Secure every connection
A little more context
Good questions.
Will the site match my mockup pixel for pixel?
Not at every width. A mockup is one picture at one width, while a browser window can be any width, so compare the preview with the image at the mockup's own width first. Your real words change the look too: a headline three times as long as 'Your headline here' wraps onto more lines and pushes the photo down. List the few details that must match.
Where do the words on the pages come from?
From you, not from the image. For a rebuild, copy the text from your old site while it still loads; retyping it from a screenshot invites typos in prices and phone numbers. For a new design, let the placeholder show roughly how much fits, so a two-line slot gets about two lines. Paste it into the prompt section by section, or edit the pages in Studio afterward.
My mockup only shows the desktop layout. What happens on phones?
The published site opens in a browser, including on phones, so it needs a narrow layout too. Attach a phone mockup if your designer made one. If not, say which section comes first and how the cards should stack, then read every page at phone width in the preview.
Can the building assistant write the text my mockup left blank?
You can ask it to draft a section from facts you give it, such as an About paragraph from your founding year, your classes and your neighborhood. Read every draft before publishing. Check names, prices, hours and any claim against what is true for your business today.
Does a site built from my mockup fit the Free plan?
Go through the mockup part by part. Text, photos, the menu, and buttons that link to a section, a phone number or an email address only present something, and fit a one-page site, which Free publishes. Several pages at their own addresses, a drawn contact form that keeps or emails messages, or a 'Member login' link that leads to a signed-in area make it an app, which needs a paid plan to go live.
I'm rebuilding my old site from screenshots. Can it keep my web address?
Custom domains come with Pro, so the rebuilt site can use the address people already know. The addresses of single pages, such as a menu page printed on flyers, may not match the new pages, so note them first. Leave the old site running until you have compared each new page with your screenshots and copied text, then switch the domain over.
Can the designer who made the mockup adjust the site?
Studio has one builder per Exepad account, so collect the designer's notes on spacing and type and ask for each change yourself. Review each change at phone width before publishing again. If a spacing change breaks the phone layout, use the versions available in Studio, inspect the restoration and publish after review.
What happens when the designer sends a revised mockup?
The site stays as it is until you act, because an upload is a snapshot. Upload the revision on purpose and say in the prompt what changed and what stays, such as 'new header and colors; keep every page, word and photo'. Then compare each page with the new image, at desktop width and on a phone, before publishing.
Explore Pricing for plans, included capabilities, and usage details.
Keep exploring.
Plan a simple one-page website ↗
See the outcome and the capabilities behind it.
Mockups made in Stitch or Claude Design ↗
Those two design tools each have their own guides, listed on the prototyping page, for taking a design further than a picture of it.
When the words already sit in a file ↗
The file-to-website guides start from a Word document, a PDF, a slide deck or a workbook that holds your text.
Understand data and context ↗
Give information the right place in your app.
Prepare to publish ↗
Check the experience you will share.
Your ideas, up and running
Your next idea has a home.
Build an app. Run an agent. Make it yours.
Start building