This is the best possible starting project. The structure is conventional, you can verify the result by looking at it, and nothing can go quietly wrong the way it can with data.
An hour, start to deployed. Here’s the exact process.
Decide the Content First
The single biggest quality difference isn’t the tool — it’s whether you know what the page says before you start generating.
Write these four things down first:
- Who it’s for, specifically. “Freelance designers who invoice more than five clients a month,” not “businesses.”
- The problem, in their words.
- What you’re offering in one sentence.
- The one action you want them to take.
If you skip this and prompt “build me a landing page for my SaaS,” you’ll get beautiful generic filler you then have to rewrite entirely. The generation is the fast part; knowing what to say isn’t.
The First Prompt
Be specific about structure and stack, loose about design.
Build a landing page for a freelance invoicing tool called Billwise. Audience: freelance designers who invoice 5+ clients a month. The problem: chasing late payments eats hours every week. The offer: automatic payment reminders so you never chase again. One CTA: start a free trial.
Use Next.js with the App Router, TypeScript and Tailwind. Single page, as few files as possible.
Sections in this order: hero with headline, subhead and CTA; three-column problem/solution; feature grid with 4 features; social proof placeholder; pricing with 3 tiers; FAQ with 5 questions; footer CTA.
Mobile-first and fully responsive. Don’t add a backend yet.
Two clauses there matter more than they look. “As few files as possible” fights the urge to generate elaborate structure. “Don’t add a backend yet” stops it inventing a form handler you won’t review.
What It Gets Right
Layout, spacing, responsive behaviour, and component consistency — usually better than a hand-written first draft. Modern AI output defaults to sensible typography scales and coherent spacing, which is exactly the part that takes non-designers longest.
What It Gets Wrong, Every Time
Four things, reliably. Fix them in this order.
1. The copy is generic
You’ll get “Streamline Your Workflow” and “Powerful Features for Modern Teams.” These say nothing.
Rewrite all copy. The headline must name the specific outcome: getting paid on time without chasing. Remove every instance of “streamline”, “powerful”, “seamless”, “elevate”, and “revolutionise”. Write like one freelancer explaining this to another. Short sentences.
2. SEO is missing entirely
Nothing about metadata affects whether the page renders, so it gets skipped.
Add SEO: a title tag under 60 characters, a meta description under 155, Open Graph and Twitter card tags, exactly one h1, descriptive alt text on every image, and JSON-LD structured data using the SoftwareApplication schema.
3. The form goes nowhere
An AI form will look completely functional and quietly discard submissions.
Wire the email capture to Resend. Validate the email server-side. Show a real success state and a real error state. On error, keep what the user typed.
Test it with your own address before you believe it.
4. Accessibility is an afterthought
Audit for accessibility: colour contrast at WCAG AA, visible focus states on all interactive elements, proper labels on form fields, and full keyboard navigation. Fix what fails.
Making It Not Look AI-Generated
There’s a recognisable house style to AI output — purple-to-blue gradients, floating cards, identical rounded corners everywhere. It reads as generic immediately.
Redesign the visual style. No gradients. One accent colour only. Use generous whitespace rather than borders and shadows for separation. Vary the section rhythm — alternate full-bleed and constrained widths. Make the typography scale more dramatic: much larger headline, smaller body.
Then change the font. Swapping the default sans for something with character does more for perceived quality than any other single change.
Speed
Landing pages get judged on load time, and AI output is rarely optimised.
Convert all images to WebP with width and height attributes set. Lazy-load anything below the fold. Remove any JavaScript that isn’t needed for interactivity. Inline critical CSS.
Then check it on PageSpeed Insights. Under 2 seconds on mobile or keep going.
Deploy
Push to GitHub, connect to Vercel or Netlify, done. Both have free tiers that comfortably handle a landing page.
Add analytics before you send traffic — you can’t improve what you can’t see. Plausible or Fathom are simpler than GA4 and don’t need a cookie banner.
The Checklist
- Copy is specific to your audience, not generic
- One h1, sensible heading hierarchy
- Meta title and description written
- Open Graph image set (check how it looks when shared)
- Form tested with a real submission
- Mobile checked on an actual phone
- Under 2s load on mobile
- Analytics installed
- All links work
Next
A landing page has no data and no users, which is why it’s a good first project — nothing can leak. The moment you add either, the rules change.
If you’re adding email capture at scale, a waitlist page covers doing it properly. If this is the front of a real product, vibe code a pricing page is the natural next piece.
Related reading:
