How We Built an AI-Powered Website Mockup Funnel in 3 Hours

AI-powered website mockup funnel concept
TL;DR

We built a productized lead magnet that lets potential clients fill out a 15-question form, then pays $49 to unlock an AI-generated website mockup. It costs us ~$3 to produce. That's a 90% margin — and zero discovery calls.

Why Are Discovery Calls So Expensive for Agencies?

Discovery calls are expensive because most web designers and agencies spend hours on them before they ever see a dime. You know the dance:

  • Schedule a call
  • Spend 45 minutes learning about the business
  • Write a proposal
  • Wait for a decision
  • Sometimes get ghosted

It's a broken model. You're investing unpaid time upfront with no guarantee of closing. For a small agency like ours, that's unsustainable.

What If You Made the Discovery Phase the Product?

Instead of giving away discovery for free, you charge for it — not as a consulting fee, but as a tangible deliverable.

That's the idea behind our Website Blueprint funnel:

  1. Client answers 15 questions about their business, audience, and design preferences
  2. AI analyzes the input and generates a custom single-page website mockup
  3. They pay $49 to unlock the preview
  4. We deliver desktop + mobile views, AI-written copy, and color recommendations within 5 minutes

The beauty? The $49 isn't just revenue — it's a qualification filter. Anyone willing to pay $49 for a mockup is a serious prospect for a $1,500+ website build.

What Does the Tech Stack Cost to Build?

Here's exactly what we used and what it costs:

ComponentToolCost
Form + FrontendStatic HTML on Hostinger$0 (included)
Data StorageGoogle Sheets$0
BackendGoogle Apps Script$0
PaymentsStripe2.9% + $0.30/transaction
AI GenerationKimi K2.6 (Moonshot)~$1.50/mockup
Email DeliveryGmail API$0
File UploadsGoogle Drive$0

Total cost per mockup: ~$3
Sale price: $49
Margin: ~90%

What Are the 5 Steps in the Funnel?

Step 1: Business Details

We collect the business name, industry, and one-liner pitch. This sets the foundation for the AI to understand what the website needs to communicate.

Step 2: Audience & Goals

Who's the ideal customer? What's the primary action we want visitors to take? What's the key differentiator from competitors? This shapes the copy and CTA strategy.

Step 3: Design Direction

Clients pick their vibe (Clean & Modern, Bold & Energetic, Luxury & Premium, etc.), choose primary and secondary brand colors, list inspiration websites, and select must-have sections.

Step 4: Content & Assets

We ask about content status (ready, partial, or generate it), what assets they have (logo, photos, videos), and let them upload files directly. Everything saves to Google Drive with shareable links.

Step 5: Contact & Pay

Name, email, phone, budget range, and opt-in for communications. Then they land on a loading page with an animated wireframe build, followed by the $49 paywall.

Why Does the $49 Price Point Work?

We tested lower prices, but $49 hits a sweet spot:

  • Low enough to impulse-buy (under $50 mental threshold)
  • High enough to filter serious prospects from tire-kickers
  • Covers token costs with a healthy margin
  • Positions as a product, not a freebie

We also offer a $149 upsell for a 5-page mockup with one revision round. About 15-20% of buyers take the upsell.

How Do We Generate the Mockups With AI?

We structure the prompt carefully to prevent injection attacks and get consistent output. Here's the framework:

System Instruction

You are an expert web designer. Create a complete, responsive single-page website mockup using only HTML and CSS. Return ONLY the complete HTML file. No explanations, no markdown code fences.

The user data is wrapped in XML-style delimiters so the AI knows what's content vs. instructions. We also strip common injection phrases before sending.

What Security Risks Come With Letting Users Feed Data Into AI?

When you let users feed data directly into an AI prompt, you open yourself to prompt injection attacks. We added these safeguards:

  • Input sanitization — strip phrases like "ignore previous instructions"
  • Strict delimiters — wrap user content so it can't override system prompts
  • No API key exposure — all AI calls happen server-side
  • Token cost cap — max tokens per generation, with alerts if exceeded

What Results Has the Funnel Produced So Far?

We launched the funnel on May 7, 2026. In the first 24 hours:

  • 12 form submissions
  • 3 mockup purchases ($147 revenue)
  • 1 upsell to 5-page ($149)
  • 2 leads scheduled for full website builds

Total time invested: 3 hours to build. Now it runs on autopilot.

Want to Build Something Similar?

If you're a web designer, agency, or freelancer, this model can work for you too. The key insight is: productize the discovery phase. Don't give away your expertise for free. Turn it into a low-ticket offer that qualifies prospects and generates revenue.

We used Kimi K2.6 for mockup generation, but you could use Claude, GPT-4, or any AI model that handles HTML/CSS. The stack is intentionally simple — no frameworks, no servers, no monthly SaaS bills.

One caveat

This works because the mockup is a preview, not a final deliverable. Clients understand they're paying to see a concept. The actual website build is a separate, higher-ticket offer.

What's Next for the Funnel?

We're working on automating the post-payment flow:

  1. Stripe webhook triggers mockup generation automatically
  2. Screenshot capture (desktop + mobile) via Puppeteer
  3. Auto-email delivery with mockup images and preview link
  4. Lead nurture sequence for upsells to full builds

The goal: zero manual work between payment and delivery.

Matthew Macias

Written by Matthew Macias

Operations Director & Co-founder of Macias & Skelnik Marketing LLC. Matthew specializes in web design, SEO, lead generation, and building marketing systems that generate real results for small businesses in Orange County and beyond.

Frequently Asked Questions

How much does it cost to generate one AI website mockup?

About $3 per mockup. The main cost is AI generation with Kimi K2.6 (Moonshot) at roughly $1.50 per mockup, plus Stripe fees of 2.9% + $0.30 per transaction; storage, backend, and email tools are all free. At a $49 sale price, that works out to roughly a 90% margin.

Why does the funnel charge $49 for the mockup?

The $49 price hits a sweet spot: low enough to impulse-buy under the $50 mental threshold, high enough to filter serious prospects from tire-kickers, and enough to cover token costs with a healthy margin. It also acts as a qualification filter, since anyone willing to pay $49 for a mockup is a serious prospect for a $1,500+ website build.

What tools power the AI mockup funnel?

The stack is intentionally simple: static HTML on Hostinger for the form, Google Sheets for data storage, Google Apps Script for the backend, Stripe for payments, Kimi K2.6 (Moonshot) for AI generation, the Gmail API for email delivery, and Google Drive for file uploads. There are no frameworks, no servers, and no monthly SaaS bills.

How does the funnel prevent prompt injection attacks?

User data is wrapped in XML-style delimiters so the AI knows what is content versus instructions, and common injection phrases like "ignore previous instructions" are stripped before sending. All AI calls happen server-side with no API key exposure, and a token cost cap limits max tokens per generation with alerts if exceeded.

What results did the funnel produce in its first 24 hours?

In the first 24 hours after launching on May 7, 2026, the funnel produced 12 form submissions, 3 mockup purchases ($147 revenue), 1 upsell to the 5-page option ($149), and 2 leads scheduled for full website builds. It took 3 hours to build and now runs on autopilot.

Want Your Own Website Blueprint?

See the funnel in action. Answer a few questions and get a custom AI-generated mockup of your dream website.

Try the Website Blueprint