Product launch pages
Test a headline, an offer and a sign-up form before launch day.
AI website mockup generator
Describe a site or attach a sketch. Manus turns it into a clickable, high-fidelity website mockup for desktop and mobile.
Website mockup example: one brief, two screens
A good brief names the brand, the sections, the style and the screens. Here is one that covers all four.
An illustrative design for a made-up brand. Your mockup follows your own brief.
Website mockup generator inputs: a sentence, a sketch or a screenshot
Use whatever you already have. Add images with the + button in the box above.
Already have the design in Figma? Use Figma to code to turn a frame into a working web app.
Mockup ideas for sites, stores and apps
Pick an example to put its request in the box above, then change the details.
Online stores
See a home page, a product page and a cart before you pick a platform.
Web app screens
Show investors or engineers how the main screens should look.
Portfolios
Try a few ways to present your work before you write every case study.
Restaurants and local businesses
Put the menu, opening hours and booking button where guests look first.
Client pitches
Bring two design directions to the first client meeting.
Wireframe vs mockup vs prototype
A wireframe shows structure, a mockup shows the finished look, and a prototype shows how it behaves.
Show your site on a laptop and a phone
Turn a screenshot into a device mockup for slides, portfolios and launch posts.
Attach a screenshot and say which devices and scene you want. You get an image file for a pitch deck, a portfolio or a launch post.
- Pick the devices: laptop, desktop monitor, tablet or phone
- Describe the scene: a desk, a plain studio background or a hand
- Name the size, such as 16:9 for slides or 4:5 for social posts
Need a logo, a banner or social graphics to go with it? Try AI design.
Turn the approved mockup into a live site
The mockup is already a web page, so you can keep building it once the design is signed off.
See how the Manus website builder adds logins, databases and payments, or start a full site with the AI website generator or a single page with the landing page builder.
Frequently asked questions
What is a website mockup?
A website mockup is a realistic picture of a page before it is built: the real layout, colors, fonts, images and copy. It sits between a wireframe, which only shows structure, and the finished site.
How do I create a website mockup with AI?
Describe the page in the box at the top of this page: who it is for, the sections you need and the style you like. Manus builds the mockup as a web page you can open on desktop and mobile, then you ask for changes in the same task.
Is this website mockup generator free?
Each request runs as a Manus task, and tasks use credits. You can check credit options on the Pricing page.
Can I turn a sketch or a screenshot into a mockup?
Yes. Attach a photo of a hand-drawn sketch, a whiteboard or a screenshot of your current site, and say what to keep and what to change. Manus uses the image as the starting layout.
Will the mockup work on mobile?
Ask for a responsive page and Manus lays it out for both desktop and phone screens. Open the preview on your phone, or ask for a separate mobile mockup if you want to compare the two.
What is the difference between a wireframe and a mockup?
A wireframe uses boxes and gray placeholders to agree on structure. A mockup adds the visual design, so people can judge how the page will really look. A prototype goes one step further and lets people click through the flow.
Can I edit the mockup and keep the code?
Yes. Ask for changes in the task, or use design edit mode to adjust layout, colors, typography and spacing without code. You can download the full code at any time or keep building the page into a live site.
Can I make a device mockup of my website?
Yes. Attach a screenshot of your site and ask for it on a laptop, phone or tablet in the scene you want. Manus generates the image for you to download.
Make your next website mockup
Describe the page or attach a sketch, and review it on desktop and mobile.