How to create a professional website mockup in 2 minutes (free)

Why mockups still matter

Screenshots are utilitarian. They show what a site looks like, but they say nothing about how it feels to use - and they do nothing to frame the work as deliberate, designed, polished.

A good mockup does two things a raw screenshot cannot: it provides context (this is a web product, rendered on a real device) and it signals craft. When you wrap your site in a MacBook frame with a clean background and a short headline, you are telling the viewer "I thought about how to present this" - and that matters whether you are preparing a portfolio, pitching to a client, or posting to Product Hunt.

The old problem was that making that mockup took time. You needed a Figma template, a Photoshop smart object, or a paid tool subscription. This guide shows you how to do it in under two minutes using GenMockups, at no cost.

Step 1: Enter your URL

Open mockups.sevenlabs.site and paste your URL into the input field at the top of the page. Click Capture.

The tool dispatches a headless Chromium browser that loads your page at a 1440 px viewport, waits for assets to settle, and takes a full-page screenshot. This typically takes 5–10 seconds depending on how many images and scripts your page loads.

Tips for better captures:

• Make sure your page is publicly accessible - the headless browser cannot log in or bypass a paywall
• If your site loads slowly, give it a moment to finish before clicking Capture
• If you are capturing a page that uses lazy-loading for hero images, the capture may miss them - consider disabling lazy-load on a staging URL first

If your site uses bot-detection (Cloudflare, Vercel's bot protection, etc.) the capture may fail. In that case, use your browser's built-in full-page screenshot feature or an extension like GoFullPage, then use the Upload screenshot option to skip the automated capture entirely.

Step 2: Let the smart scan run

While the screenshot is being taken, GenMockups makes a second lightweight request to fetch your page's HTML. It extracts:

• The headline - from og:title or the <title> tag
• The subheadline - from og:description or the meta description
• The brand color - from the theme-color meta tag, or from dominant color extraction on the screenshot itself

These values are pre-filled into the editor. Review them and edit if needed - they are just a starting point.

Step 3: Choose your device

GenMockups offers four device types, each in flat and angled variants:

• Mobile phone - best for apps, landing pages optimized for mobile
• Tablet - good for editorial content, news sites, iPad-focused apps
• Laptop (MacBook-style) - the most versatile; works for almost any web product
• Desktop monitor - best for wide-layout dashboards or full-width marketing sites

General recommendation: if you are not sure which to use, start with the angled laptop. It is the most recognizable frame for web products, and the slight perspective gives the image energy without being distracting.

Step 4: Edit the headline and subheadline

The canvas editor loads with the auto-extracted headline and subheadline already placed. You can:

• Click any text box to edit the copy
• Drag the text boxes to reposition them
• Delete either text box if you want a cleaner composition without text overlay

Keep headlines short - under 8 words works best. The mockup image should do most of the communicating; the headline just needs to name the product or the benefit.

Good: "Project management for small teams" Too long: "The all-in-one project management solution built specifically for small and growing teams"

Step 5: Add callout annotations (optional)

If you are creating a mockup for a case study or a feature highlight, you can add callout annotations - small labeled arrows that point to specific parts of the screenshot. Click Add callout, drag the resulting annotation to the element you want to highlight, and edit its label.

This feature is especially useful for onboarding flows, dashboards with multiple panels, or any screen where a viewer might not know where to look first.

Step 6: Export

Click Export PNG to download the final file. The output is a full-resolution PNG with a transparent background, sized to fit the device frame at high DPI.

The transparent background means you can drop the image directly onto a colored slide, a dark landing page, or a Notion doc without any white box appearing around it.

Common mistakes to avoid

• Capturing a page at the wrong scroll position - the capture always starts at the top of the page, so make sure your above-the-fold section looks good before running the capture
• Using a local URL - localhost is not accessible to the capture server; use a staging URL or a publicly accessible deployment
• Choosing the desktop frame for a mobile-first site - a site designed for mobile will look stretched and wrong in a wide desktop frame; use the phone frame instead
• Forgetting to review the auto-extracted text - the smart scan does its best but it will occasionally pull in the wrong title or an unhelpful description; always glance at the pre-filled text before exporting

What to do with the mockup

Once exported, your mockup PNG is ready to use in:

• Portfolio case studies - embed in a Notion page, Webflow portfolio, or Behance project
• Product Hunt gallery - Product Hunt recommends 1270 × 760 px images; the GenMockups export is sized appropriately
• Pitch decks - paste directly into Google Slides or Figma
• Social media - crop to 16:9 for Twitter/X or LinkedIn; to 4:5 for Instagram

Two minutes, zero cost, no account. That is the point.