How I Built This Website with Vibe Coding

The first major fork: what tech stack? The vibe coding community was building with Next.js, Vercel, and Supabase. I went the opposite direction — and it changed everything about the economics of this project.

Why Cloudflare Over Vercel

The decision wasn't just about cost. It was about matching the architecture to the content model. Here's the comparison I ran:

Factor	Cloudflare Pages	Vercel + Supabase
Monthly cost (10K visitors)	$0	$0
Monthly cost (100K visitors)	$0	$20-40
Monthly cost (500K visitors)	$5	$150+
Edge locations	300+	~20
Cold start latency	0ms (static)	200-800ms (SSR)
Database included	D1 (free)	Supabase ($25/mo Pro)

For a content-heavy site with monetization, Cloudflare's free tier was essentially unlimited. Vercel's bandwidth limits would have forced me onto a paid plan before reaching profitability.

The Flat File vs. Framework Decision

This is the decision most developers get wrong with vibe coding. They default to Next.js or React because that's what they know — but AI tools generate significantly better output when targeting plain HTML.

Here's why: when you ask Claude to "build a pricing page," the HTML output is immediately deployable. A React component needs JSX transpilation, useState hooks for interactivity, routing configuration, and a build pipeline. Each layer adds complexity that creates failure points for AI-generated code.

I tested both approaches with the same prompt. The HTML version worked on first deploy. The React version required three rounds of debugging — import errors, hook misuse, and a hydration mismatch. For a content site, the answer was obvious.

The Zero-Cost Stack

The entire site runs at $0/month fixed cost. Revenue is pure margin minus Stripe's per-transaction fee. This is not a theoretical number — the domain registration ($12/year) is the only recurring expense.

Why This Matters for Your Project

Most side projects die because the infrastructure costs outrun revenue. A $25/month Supabase Pro plan means you need to generate $25 in revenue before you break even. With the Cloudflare stack, your first dollar of revenue is profit.

The architecture decision isn't about what's "best" in the abstract — it's about matching your stack to your business model. For a content site with subscriptions and one-time purchases, the zero-cost static stack with edge functions is the optimal choice. For a real-time SaaS with complex data relationships, you might need something heavier. The key is making the conscious decision, not defaulting to the popular choice.

The visual identity of whatisvibecode.com was built entirely through prompts. I never opened Figma. No mood boards, no style tiles, no stakeholder reviews. One prompt generated the design DNA; every component since then has inherited it.

The tokens.css Approach

Most developers skip the design token step and write ad-hoc CSS values — color: #1a1a2e here, padding: 24px there. This creates an invisible tax: every new component introduces slight inconsistencies that compound into visual noise. The fix is a single source of truth.

This generated a 120-line file with over 40 custom properties. Here's a representative sample of what Claude produced:

The clamp() typography scale is the most underrated technique here. It eliminates breakpoint-specific font sizes entirely. The heading flows from 2rem on mobile to 3rem on desktop without a single media query.

Key Design Decisions

• Dark mode only — Eliminates the entire light/dark toggle system. One palette, simpler CSS, more dramatic visuals for a developer audience that overwhelmingly prefers dark themes.
• Glassmorphism — backdrop-filter: blur() creates layered depth without heavy images. Cards feel like they float above the background.
• Scroll reveal animations — Elements fade up on scroll using IntersectionObserver. This is cheaper than scroll-linked animations and feels less "jittery" on lower-powered devices.
• Zero images in the design — Every visual effect (gradients, glows, blur, aurora waves) is pure CSS. This keeps the total page weight under 100KB and eliminates layout shift from image loading.

The Compound Effect of Tokens

Six months into the project, I had 52 pages — and every single one shared the same visual language without any manual synchronization. When I changed --color-accent-cyan from #00d4ff to a slightly warmer blue, every page updated instantly. This is the power of the tokens-first approach: it turns design consistency from a discipline problem into an architecture problem.

If you're building a content site with AI, start here. Don't write a single component until your tokens file is solid. Every prompt after that should reference var(--your-token) instead of raw values.

Content is the moat. Not the design, not the code, not the framework. Every dollar this site earns starts with someone typing a query into Google and landing on one of 52 purpose-built pages. Here's how the content architecture was designed to capture, engage, and convert.

Keyword Research Without Tools

I didn't use Ahrefs or SEMrush. For a brand-new topic like "vibe coding," traditional keyword tools have no data. Instead, I used three free signals:

1. Google Autocomplete — Typing "vibe coding" revealed: "what is vibe coding," "vibe coding tools," "vibe coding vs pair programming," "is vibe coding good." Each autocomplete is a page.
2. People Also Ask — Google's PAA boxes gave me: "Can vibe coding replace developers?" "What tools do you need for vibe coding?" "How to start vibe coding." More pages.
3. Reddit and Twitter threads — Actual questions real people were asking, often with nuance that keyword tools miss.

In 45 minutes, I had 52 distinct topics with clear search intent. The next step was organizing them.

Topic Clustering

I organized all 52 pages into topical clusters, with the homepage as the pillar page. Google rewards this structure because it demonstrates topical authority:

• Core Cluster (6 pages) — What, How, Why, Origin, FAQ, Getting Started
• Tools Cluster (9 pages) — Cursor, Copilot, Claude, ChatGPT, Windsurf, v0, Bolt, Lovable, comparison
• Practice Cluster (12 pages) — Prompt templates, debugging, testing, best practices, common mistakes, workflows
• Business Cluster (10 pages) — Enterprise adoption, careers, startups, education, consulting, ROI analysis
• Reference Cluster (15 pages) — Glossary, research papers, regulations, ethics, history, case studies

The Content Generation Prompt

Every page used the same 5-step prompt chain. Here's the template I followed:

Internal Linking Strategy

Every page links to at least 3 other pages within its cluster and 1 page in an adjacent cluster. The homepage links to every cluster's pillar page. This creates a web structure that Google's crawler can fully traverse in one session — critical for new sites with no backlinks.

The navigation footer automatically lists the top-level pages. The in-content links are placed contextually, not in a sidebar widget where they get ignored.

The Biggest Content Mistake to Avoid

Don't generate 52 pages of thin content. Google's helpful content update specifically punishes AI-generated pages that exist purely for SEO. Each page needs to say something the other 51 pages don't. Each page needs at least one unique insight, comparison, or practical example that justifies its existence.

Result: 52 pages, each targeting a unique keyword, all interlinked. Total writing time with AI: approximately 6 hours. Traditional approach with a content team: 2-3 months and $5,000-15,000 in freelance costs.

Here are the actual prompts I used to build the major components of this site. Each one is annotated with why it works and what to watch out for.

Navigation Prompt

Why this works: It specifies the visual structure, responsive behavior, accessibility requirements, and naming conventions. The AI doesn't have to guess anything.

Payment Integration Prompt

Key insight: Notice how the prompt specifies the exact endpoints, environment variables, database operations, and security requirements. This level of specificity produces production-ready code on the first attempt.

Content Page Prompt

The crucial detail: "Use the same layout shell as index.html — copy the structure exactly." Without this instruction, AI tools generate pages with slightly different nav structures, different font imports, or subtle CSS class name differences that create maintenance nightmares across 52 pages.

The Prompt Failure Patterns

Through building 50+ pages, I identified three patterns that consistently cause AI-generated code to fail:

1. Ambiguous scope — "Build me a nice pricing page" fails because "nice" is subjective. Specify visual structure: "3 cards in a row, center card elevated, gradient border on featured plan."
2. Missing context — "Add a checkout button" fails because the AI doesn't know your payment provider, API endpoints, or error handling requirements. Always specify the integration layer.
3. Implicit dependencies — "Use the design system" fails because the AI doesn't know which tokens exist. Always paste the relevant token names: "Use --color-accent-cyan, --space-6, --radius-lg."

The pattern that emerges: specificity inversely correlates with debugging time. A 20-line prompt that takes 5 minutes to write saves 2 hours of debugging. A 3-line prompt that takes 30 seconds produces code that needs 6 rounds of back-and-forth to fix.

The monetization engine has three layers, each building on the last. The key insight: each layer serves a different purpose in the conversion funnel, and the technology choices reflect that.

Layer 1: Free Content (Top of Funnel)

The homepage, tool comparisons, FAQ, and origin story are completely free. This captures organic traffic and establishes authority. You cannot sell a knowledge product to someone who doesn't trust you yet. The free content is the trust-building machine.

Critically, free pages are also the AdSense revenue layer. High-quality free content attracts organic traffic, which generates ad impressions, which creates passive income even from visitors who never buy anything.

Layer 2: Email Gate (Middle of Funnel)

Entering your email unlocks Chapter 1 of the guide, the prompt engineering cheat sheet, and additional workflow content. This builds the email list — the single most valuable asset in a content business.

The economics: an email subscriber is worth $3-8/year in direct revenue (from eventual conversions) and $0.50-2/year in affiliate and ad revenue from newsletter opens. At 1,000 subscribers, that's a baseline of $3,000-10,000/year before you factor in product sales.

Layer 3: Paid Content (Bottom of Funnel)

Two paid products generate direct revenue: the Pro subscription ($29/mo for ongoing access) and the Case Study Guide ($49 one-time for this deep-dive). The content gate system uses localStorage tokens verified against the Cloudflare D1 database.

The Gate System Architecture

Why Client-Side Gating Works

This is deliberately client-side. The content exists in the HTML (good for SEO — Google can index the premium content, which drives organic traffic to the gated sections). A determined user could bypass the gate by inspecting the HTML.

But here's the counter-intuitive math: the cost of server-side rendering for 52 pages with personalized gating (Vercel Pro at $20/mo) exceeds the revenue lost to the tiny fraction of visitors technical enough to open DevTools and motivated enough to read raw HTML instead of paying $29. The friction balance is right for a knowledge product at this price point.

Stripe Checkout Flow

The payment flow uses Stripe Checkout Sessions, not a custom payment form. This is a deliberate trade-off:

• PCI compliance — Stripe handles all card data. No sensitive data touches our servers.
• Conversion rate — Stripe's hosted checkout converts 3-5% higher than custom forms because users recognize and trust the interface.
• Mobile optimization — Stripe's checkout already supports Apple Pay, Google Pay, and one-tap payment methods.
• Fraud prevention — Stripe Radar handles fraud detection automatically. Building this yourself is a multi-month engin

  Chapter 7

  Email Funnel Architecture & Delivery

  Email is the highest-converting sales channel for digital products. Social media algorithms bury links, but an email lands directly in the user's inbox. Here is the exact architecture I built using a custom Python Discord bot (Garnet Bot) running locally on a Mac Mini, pulling leads from a serverless Cloudflare Worker API for a completely owned, cost-free email funnel.

  Capture Points & The Opt-in Flow

  Every page on the site is an entry point to the funnel. I use three primary capture mechanisms:

  • The Lead Magnet CTA — "Get 50+ Prompt Templates" featured prominently on the guide page. This converts at the highest rate because it solves an immediate, painful problem for the user.
  • The Content Gate — Unlocking Chapter 1 of the guide requires an email address. This is the "freemium" entry point.
  • The Footer Newsletter — A passive capture form on every single page across the 52-page SEO cluster.

  The Local Automation Stack

  Instead of paying $30/month for Mailchimp or relying on third-party API limits, I built a local bot on a Mac Mini in my office. The Garnet Bot polls a simple Cloudflare Worker endpoint, pulls down any pending queued emails, and sends them directly via an iCloud+ custom domain relayer. Total cost: $0.

  bot_scheduler.py

  # Garnet Bot polling the edge queue on the Mac Mini async def process_drip_emails(): response = await httpx.get('https://whatisvibecode.com/api/drip-queue') data = response.json() for email_job in data.get('emails', []): await EmailService.send( to_email=email_job['email'], subject=get_drip_subject(email_job['drip_day']), html_body=get_drip_content(email_job['drip_day']) ) # Ping the API back to mark as sent await httpx.post(f"https://whatisvibecode.com/api/drip-queue/{email_job['id']}/sent")

  The Automated 7-Day Sequence

  Once an email is captured and stored in the Cloudflare D1 database, a Cron Trigger kicks off the drip campaign. The sequence is specifically designed to build trust before asking for the $29/mo sale.

  1. Immediate (Delivery) — The requested lead magnet. No sales pitch. Just delivering value.
  2. Day 1 (Value-first) — "3 Prompts That Changed How I Code." Sharing a personal failure and how prompt engineering solved it.
  3. Day 3 (Education) — "The Architecture Mistake 90% of AI Coders Make." Explaining why relying purely on AI without understanding the underlying architecture leads to unmaintainable code logs.
  4. Day 7 (Conversion) — "Unlock the Full Guide." The hard pitch. Offering a time-sensitive bonus to create urgency.

  Each email is plain-text formatted. HTML-heavy emails with large images are often flagged by Gmail's Promotions tab filter. Plain-text emails look like they came from a friend, significantly boosting open rates and deliverability.

  Chapter 8

  Mobile-First & Progressive Enhancement

  Over 70% of organic search traffic for AI coding terms comes from mobile devices. If the site breaks on a 375px wide screen, we lose the majority of our potential revenue. Here is how I ensured flawless multi-device execution.

  The 13D Soul Audit Framework

  Automated tools like Lighthouse are great for catching basic accessibility and performance issues, but they cannot assess "feel." I used a proprietary 13-Dimension Audit to test the site's resilience on real mobile devices:

  1. Visual Fidelity (375px) — Are layouts stacking correctly? Are padding values shrinking proportionally?
  2. Touch Targets — Are all interactive buttons, including the hamburger menu and accordion toggles, at least 44x44px to comply with Apple's HIG?
  3. Scroll Jitter — Do `position: sticky` elements behave smoothly without causing layout shifts on mobile Safari?
  4. Navigation Race Conditions — If a user taps the hamburger menu rapidly, does the JavaScript toggle state break?
  5. Typography Scaling — Is the `h1` readable on an iPhone SE without breaking into awkward 4-line wraps?

  Fluid Typography with CSS Clamp()

  Instead of writing dozens of `@media` queries to change font sizes, the site uses CSS `clamp()` for fluid, mathematically perfect scaling across viewport sizes.

  typography.css

  /* Font sizes scale fluidly between the minimum and maximum based on viewport width */ --text-step-0: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem); /* Body */ --text-step-3: clamp(1.73rem, 1.54rem + 0.96vw, 2.25rem); /* H3 */ --text-step-5: clamp(2.49rem, 2.08rem + 2.04vw, 3.65rem); /* H1 */

  This approach guarantees that the typography feels native to the device it is being viewed on, from an Apple Watch up to a 4K monitor. The audit caught several issues: a background glow effect that caused horizontal scrolling on mobile, and a `z-index` bug where the mobile navigation overlay was appearing beneath YouTube iframe embeds.

  Chapter 9

  Performance, Security & Edge Delivery

  When you use AI to build applications quickly, security is often the first thing sacrificed. AI models are trained to provide functional code, not necessarily secure code. My deployment architecture uses Cloudflare's Edge network to harden the application globally.

  Edge Caching & Performance

  The entire site is served via Cloudflare Pages. Because the output is flat HTML/CSS/JS (no Node.js server to spin up, no database calls required for un-gated content), the site benefits from instantaneous Edge Caching. Every asset is cached at Cloudflare data centers 10 milliseconds away from the user.

  Strict Security Headers

  I enforced a strict security policy using a `_headers` file injected during build time to prevent cross-site scripting (XSS), clickjacking, and MIME-sniffing.

  _headers

  /* X-Frame-Options: DENY X-Content-Type-Options: nosniff Referrer-Policy: strict-origin-when-cross-origin Permissions-Policy: camera=(), microphone=(), geolocation=() Strict-Transport-Security: max-age=31536000; includeSubDomains

  API Security & Cloudflare D1 Hardening

  The backend logic runs on Cloudflare Workers, handling the sensitive Stripe token generation and email list insertion. The security measures include:

  • Rate Limiting — Cloudflare WAF rules automatically block IPs making more than 5 requests per 10 seconds to the `/api/` endpoints, preventing brute-force token harvesting.
  • Cryptographic Webhook Verification — The Stripe Webhook endpoint uses `env.STRIPE_WEBHOOK_SECRET` to verify the HMAC signature of incoming requests, guaranteeing that only Stripe can alter a user's subscription status in the D1 database.
  • Environment Variable Isolation — Secrets are never hardcoded. They are injected via `wrangler secret put` and bound exclusively to the Worker runtime.

  Chapter 10

  Going Autonomous — Revenue While You Sleep

  The ultimate goal was never just to build a static website. It was to forge an autonomous economic engine — a machine that captures leads, nurtures prospects via email, processes global payments, and dynamically grants access to premium content, completely free from manual intervention.

  The Complete Autonomous Architecture

  Here is how the disparate layers integrate into a unified revenue loop:

  • Traffic Generation (AdSense) — 52 deeply clustered SEO pages rank organically over time. Passive ad revenue offsets the zero-fixed-cost hosting budget, theoretically making the site profitable even with zero software sales.
  • Automated Nurture (Garnet Bot Polling) — A local Python bot (Garnet Bot) running on a Mac Mini in the office polls a Cloudflare Worker endpoint to pull down any pending queued emails, sending them directly via an iCloud+ custom domain relayer.
  • Frictionless Checkout (Stripe) — When trust peaks, the webhook architecture handles the conversion. Stripe processes the payment, alerts the Cloudflare Worker, which instantly generates a cryptographically secure token and grants Pro access.
  • Telemetry (GA4 + Web Analytics) — `begin_checkout` and `purchase` events flow directly into Google Analytics 4, allowing me to measure the conversion rate of specific long-tail landing pages and scale what works.

  What "Autonomous Vibe Coding" Really Means

  Traditionally, launching an end-to-end SaaS or premium content platform required spinning up Postgres instances, managing Redis queues for emails, handling OAuth, and constantly nursing server health. If the server crashed on a Sunday night, revenue stopped.

  By leveraging AI for the boilerplate code and strictly adhering to a serverless, flat-file, edge-computed architecture, the system achieves true autonomy. After this initial setup, the only ongoing task is injecting new content.

  The payment processing, access control gates, email nurture sequences, and advertising syndication all execute silently on the edge. This is the promise of vibe coding: not just coding faster, but building robust systems that sustain themselves.

  Thank you for reading the deep dive. If this architectural case study provided clarity, share it with another developer or founder exploring AI workflows. When you are ready to implement these exact systems in your own product, unlock the Complete Pro Playbook.