Build
July 7, 2026 · 5 min read
I built a landing page with AI in one day using Claude Code, and the page itself was the easy part. By the end of the day I had a working homepage, a signup form that actually saved emails, and one real lesson about why AI-built forms break so often once they leave your laptop. Total cost: the $20 Claude Code subscription I already pay for, and nothing else. This is for anyone who wants to see the actual prompts and the actual failure, not a highlight reel. The honest catch: the page itself took a morning, and the form took the rest of the day.
I wanted one real landing page, built start to finish with Claude Code, the AI coding agent that writes and edits real code from plain-English instructions in your terminal. Not a demo, not a template gallery: one product, one page, one working signup form. The pillar guide on this site already covers the three ways to build a website with AI; this is what happens when you zoom into the coding-agent route and actually finish it, including the part where it breaks.
The fictional product was Slate, a browser extension that turns any webpage into a clean, ad-free PDF. Fictional, but the build was not. I needed a hero section, three feature cards, two pricing tiers, and a signup form that had to genuinely work, because a form that goes nowhere was exactly the mistake I wanted to avoid repeating.
The plan was one file, one form, one real test. Claude Code writes actual files on your machine, so the first goal was a single index.html with Tailwind CSS loaded from a CDN, easy to preview locally and easy to move to Vercel later. No design tool, no Figma file, just a written brief.
Build a one-page landing site for a fictional product called Slate, a browser extension that exports any webpage to a clean PDF. Single index.html, Tailwind via CDN, dark theme. Hero section, 3 feature cards, 2 pricing tiers ($0 and $4/month), and an email signup form. Make it deploy-ready for Vercel.
Claude Code had a working page on screen before I'd finished my coffee: nav, hero, three feature cards, a two-tier pricing table, and a form at the bottom. Good enough ships, and this was already something I'd show someone.
The layout came together fast, and that speed hid a problem. The signup form's action pointed at a placeholder Formspree address, a third-party form service, because I'd asked for something "deploy-ready" without saying where the data should actually land. I tested it with a direct request against that address and got back a plain HTTP 404. The form looked finished. It was not.
That's the trap with AI-built pages: they look done at first glance, and "looks done" and "is done" are two different projects.
The fix seemed obvious: skip the third-party form service and write a real backend route for it. I asked Claude Code for a small API endpoint that takes the email and saves it, and it wrote one in a few minutes: a plain function that appends each signup to a local JSON file. I ran it against a tiny local server and it worked exactly right. A valid email returned success, an empty field returned a clean error, and every signup landed in the file where I could see it.
Here's the part that isn't in most tutorials: that same code would fail the moment it actually shipped to Vercel. Vercel's serverless functions run on a read-only filesystem, with one writable exception: a temporary /tmp folder capped at 500 MB that gets wiped between requests. Writing signups to a regular file in the project folder, the thing that worked flawlessly on my laptop, would throw a read-only filesystem error in production, or silently lose every signup between invocations if I moved the write into /tmp instead. My "it works" was true and useless at the same time.
The real fix, and the one the pillar guide also lands on for its own broken form, is to never let the page's own filesystem hold anything you need to keep. Point the form at an email service or a small hosted database instead, and the AI coding agent will happily wire that up too once you tell it where the data actually needs to live.
By the end of the day, Slate's landing page was a complete, deploy-ready build: one HTML file, one working API route tested locally, three feature cards, two pricing tiers, and a signup form that saved a real entry with a real timestamp on every successful submission. What's not done yet: the actual deploy to a live Vercel URL and swapping the local JSON file for a real, persistent signup store, which is a same-day job, not a next-week one.
Two mistakes made it into the finished build's history, and both were mine, not the tool's. Claude Code wrote exactly what I asked for both times. I just hadn't asked the second question yet: does this still work once it leaves my machine?
Yes, and I'd ask the "where does this data actually go" question before writing the first line of the form, not after testing it twice. Claude Code turned a one-paragraph brief into a real, working page faster than I could have hand-coded the CSS alone. The form logic is where an AI coding agent needs the most supervision, because it will confidently write code that runs perfectly on your laptop and fails somewhere you won't see it fail. Fair enough. That's the trade for moving this fast.
Solo also isn't the only way to run this test. A colleague and I once built the exact same brief on our own, one of us leaning on AI and one of us not, and neither of us predicted who'd actually finish first.
Time: a full day, mostly on the form logic
Cost: $20 (the Claude Code Pro subscription, already running)
Tools: Claude Code, Node.js for the local test server
Difficulty: 3/5, harder than the page itself, easier than a real backend
Claude Code vs v0 vs Lovable: I gave three AI tools the same app brief. One I built and measured, two I judged on documented behavior. Here's the winner.
I measured 15 production Claude Code skills, file by file. 81% of the library stays out of the context window until it fires.
I built the same website three ways with AI in one afternoon. Here's the real decision tree for picking a coding agent, UI generator, or no-code builder.