Blog ·How-to ·April 23, 2026 ·8 min read

How to build a landing page in 10 minutes with AI

Astro. Tailwind. AI. Cloudflare. A live URL before your coffee is cold.

TL;DR

Brief → Astro + Tailwind → 4 AI-generated components → index.astro → Cloudflare Pages → custom domain. Total time: 10 minutes if you're fast. Total cost: $9/yr for a domain. Black Box does it in 90 seconds.

What you'll learn

A 3-line brief format that makes AI copy 10x sharper
The exact Astro + Tailwind stack we ship every landing page on
Prompts for 4 components that cover 80% of landing pages
A zero-config deploy to Cloudflare Pages with a custom domain

What you need

Node 20+ installed locally (nodejs.org)
A GitHub account (free)
A Cloudflare account (free)
Access to Claude, Cursor, or v0.dev
$9 for a domain (optional)

Step 1: Write a 3-line brief

Open a text file. Line 1: who it's for. Line 2: what they get. Line 3: what you charge. Example: "Fractional CMOs / A done-for-you brand refresh / $12,000." That's your brief. The narrower the brief, the sharper the AI output. "SaaS founders" is vague. "Series A SaaS founders without a full-time marketer" is a copy prompt.

Step 2: Pick a stack

Use Astro + Tailwind. It's free, static, deploys in 20 seconds, and every AI model writes it well. Run: npm create astro@latest — pick "empty" + TypeScript strict. You'll get a working dev server on localhost:4321 in 30 seconds.

Step 3: Add Tailwind

In the new folder run: npx astro add tailwind. Accept the defaults. This gives you utility classes and a mobile-first responsive system. Every AI model on the market writes correct Tailwind; very few write correct hand-rolled CSS.

Step 4: Prompt the hero section

Paste the brief into Claude or Cursor: "Write an Astro component Hero.astro with an H1, a 2-line subhead, and two buttons (primary + ghost). Use Tailwind. Dark theme, gold accent." Paste the output into src/components/Hero.astro. Tell the model to use semantic HTML (h1, p, button) — it affects SEO.

Step 5: Prompt 3 more sections

Features (3-col grid), Pricing (3-card tier comparison), FAQ (accordion). Same prompt pattern: "Write an Astro component X.astro, Tailwind, dark theme, matches the Hero style." Always pass the Hero code back in so styles stay consistent: "Match the style of this Hero: [paste]."

Step 6: Wire them into index.astro

In src/pages/index.astro import all four components and render them in order inside a Base layout. 15 lines of code. Keep the page file tiny — logic lives in components, composition lives in the page.

Step 7: Add favicon + OG image

Generate a square logo with Midjourney or DALL·E. Save as public/favicon.png (512x512) and public/og.png (1200x630). Reference in your Base layout head. The OG image is what shows in Slack, iMessage, and LinkedIn previews. Skip it and your shared links look like 1999.

Step 8: Deploy to Cloudflare Pages

Push the repo to GitHub. On pages.cloudflare.com click Create project, connect the repo, set build command to "astro build" and output to "dist". Live in 60 seconds with SSL. Cloudflare's free tier handles 100K requests/day — enough for every early-stage site.

Step 9: Point a domain

Buy a domain on Porkbun ($9/yr). In Cloudflare Pages → Custom domains → Add. Follow the DNS instructions. Propagates in 2–5 minutes. Skip GoDaddy. Their upsells are hostile. Porkbun or Cloudflare Registrar — both at-cost.

Concrete example: a fractional CMO landing page

Brief: "Fractional CMOs / A done-for-you brand refresh / $12,000." Output after 9 minutes: a 1-page site with hero, 3 service cards, 3-tier pricing, 5-Q FAQ, live at cmo-refresh.pages.dev — then pointed at a $9 Porkbun domain. Ship cost: $9. Time: 9m 40s.

Common pitfalls + how to avoid them

Generic copy. The 3-line brief is the entire difference between "we help teams grow" and specific, quotable copy.
Skipping the OG image. Shared links with no preview look broken.
Over-customizing on iteration 1. Ship v1. Let real traffic tell you what to change.
Using a heavy CMS. You don't need WordPress for 4 sections. Static HTML is faster, cheaper, and ranks better.

Key takeaways

Brief > design. 3 sharp lines beat a Figma file.
Astro + Tailwind + AI = the fastest landing page stack in 2026.
Cloudflare Pages is free and fast. Default to it.
Ship in a day. Iterate against traffic, not assumptions.
Black Box's Landing Page Bootstrap does this in 90 seconds.

FAQ

Will this pass a design review?

For an MVP or lead magnet, yes. For a Series-A flagship site, you want a real designer afterward — but this ships the first version today.

Can I do this without knowing code?

Yes if you use v0.dev or Black Box. For the raw Astro path, knowing what a terminal and a file are is enough.

What if I don't like the AI output?

Iterate. "Make the hero tighter, 1-line subhead, reduce vertical padding by 30%." AI is a colleague, not an oracle.

Why Astro over Next.js?

Static HTML = faster Google crawl, better Core Web Vitals, cheaper hosting. Next.js is right when you need SSR or a user auth layer.