I Gave Claude Code 60 Minutes to Build a Landing Page

I’m building a tool with a partner to help companies raise their Series A funding.

And we needed a landing page.

So I set a challenge: build a Claude Code landing page and get it live in 60 minutes or less.

No designer. No developer.

Just me, a few tools, and the clock.

The Claude Code Landing Page Stack

Here’s what I went in with for this Claude Code landing page:

  • Claude Code to write the page.
  • Screenshots of an existing website for branding ideas.
  • Netlify to host it.
  • GitHub to hold the code.
  • Spaceship, where I already own the domain.

Why Netlify?

They have a tool called Netlify Drop. You can literally drag and drop a folder of HTML files and your website is live.

It’s a speed game, right?

I also got a little risky. I used Claude Code inside the web browser.

Usually I use it in the desktop app or inside my code editor. But I wanted to get more familiar with the web version.

Step 1: Set Up the GitHub Repo

Claude Code in the browser needs a GitHub repository to work in.

So I logged into GitHub and created a new repo called “CFO tool landing page.”

I usually make things private. This one I made public. It’s just a landing page.

Back in Claude Code, the new repo showed up at the top of the list. I connected it and we were off.

Quick side note: if you’re confused by GitHub, I was too 6 months ago. A GitHub repository is basically Dropbox or Google Drive for your code.

Step 2: Give Claude a Design Reference and a Clear Goal

For speed, I didn’t build a full brand kit.

I pointed Claude at my partner Brent’s current website (he’s a CFO) and asked it to use similar fonts and colors.

Then I explained the goal of the Claude Code landing page in plain English:

  • Educate people on an upcoming product that helps businesses raise their Series A.
  • Customers give us intake information about their company.
  • We hand back a pitch deck with exactly what investors are looking for.
  • The process is built on the brain of my friend, a CFO with tons of experience helping companies raise funds.

I bumped the model up to Opus for this one and let it cook.

Then I added two more requirements:

  • Build it in plain HTML and CSS, so I can drop it straight into Netlify.
  • Add an email collection form I can tie to Google Sheets.

Want to follow along? I share what I’m building every week in my Build Income Streams newsletter. Join 3,000+ builders.

You Have to Know What You Want (or Ask)

Here’s something I noticed while it was working.

You do have to know kind of what you want.

I knew a single HTML and CSS page was fine because it just needs to look nice and have simple functionality. No database. Not a lot of interactivity.

I already knew about Netlify. I’d found the drag-and-drop feature within the last 6 months.

So where did I learn those things?

By chatting with Claude.

If you don’t know, just ask. Say, “Hey, I want to make this page, but guide me through it.”

Developers ahead of me are probably laughing at my process. That’s totally fine.

Firecrawl Pulled the Branding

Instead of dropping in screenshots, I asked Claude if it could use Firecrawl.

Firecrawl is a tool that scrapes a website. Claude used it through Composio, a connector I’ve set up that links Claude to outside tools with the permissions you choose.

It pulled all the colors (navy, cream, khaki, gold) plus the fonts and headings.

Pretty cool.

But honestly? It might have been faster to just drop in screenshots.

If I’d done more prework, like writing the marketing copy ahead of time, I would have found the faster route. I wanted this one raw.

I also gave it the details it needed: the brand name, Series A Hub (we own the domain), and that my CFO friend has more than 25 years of experience.

And for Brent’s photo? Claude found it on its own. I didn’t even have to upload it.

This is getting creepy in a good way.

Step 3: Deploy With Netlify and GitHub

Here’s where my plan changed.

Instead of dragging and dropping files, it made more sense to create a new Netlify project and connect the GitHub repository.

That way, every change Claude pushes goes live automatically.

I imported the repo, picked the branch, skipped environment variables, and hit deploy.

The funny part?

I hadn’t even seen the landing page yet. The first time I saw it was as a live website.

Step 4: Review and Iterate on the Live Page

The first version of the Claude Code landing page was pretty amazing.

“You’re not buying software, you’re buying experience.” I liked that.

But I had notes. This is how I make updates. I literally just paste in what I’m seeing:

  • The font was hard to read. Make it more modern.
  • I didn’t like the headline. Give me some ideas.
  • The spacing gaps were too wide.
  • We don’t need a waitlist button that just scrolls to the section right below it.
  • Move the section about Brent and his experience further up.
  • Fix the contrast on the button in the top right. You can’t read the text.

I asked it to push back on me if it disagreed. It did, and I appreciated that.

Claude gave me headline options. One I liked: “Investor-ready pitch decks built on a CFO’s playbook.”

Side note: normally I build single-page sites like this on Carrd. I have a dozen sites there, and it might have been faster. But that’s not how I wanted to build this one.

Step 5: Forms and the Custom Domain

For the email form, Claude told me exactly what to do: create a Google Sheet, open the script editor, paste in the script, and emails get added to the sheet.

I saved that for after launch.

Then the domain.

DNS records are not my forte. In Netlify I added the domain I already own, then went into Spaceship to update the records.

I’ll be honest, I struggled here. I was running out of time.

So I opened another site I host on Netlify to see how I’d set it up before. That showed me I needed the www record.

And boom.

Live in Just Under an Hour

seriesahub.com was live, just under the hour. My Claude Code landing page was done.

The SSL certificate still needed to finish setting up, and I had the Google Sheet piece left to connect. But the page was up and ready to collect emails.

If you want to build your own Claude Code landing page:

  • Know the goal of the page before you start.
  • Write your copy and grab screenshots ahead of time. It’s faster.
  • Use plain HTML and CSS for a simple one-page site.
  • Connect GitHub to Netlify so every change goes live.
  • When you get stuck, ask Claude to walk you through it.

If you’ve been wanting to start your own website, this is a fast way to get something real online. And if you want to see what a bigger build looks like, watch me build my website in public. I also used Claude Code on the site rebuild in my AI domain investing experiment.

Want to follow along? I share what I’m building every week in my Build Income Streams newsletter. Join 3,000+ builders.

Disclosure: This article might contain affiliate links to the resources I refer to. It's at no cost to you, and it's how we pay the bills. Get more info here.

Brooks Conkle Banner Image
Brooks Conkle

Brooks has over 15 years of experience as an entrepreneur after graduating with a Finance degree from Auburn University. Addicted to starting new business projects, he believes in creating multiple income streams and a life of flexibility. Business should work around your life, not the other way around. Every week, he shares his projects to help other hustlers in marketing, personal finance, and online business. 

97 Money-Making Ideas — Rated

Cost to start, speed to first dollar, and ceiling — with notes on the ones I’ve actually done.

Free. Unsubscribe anytime. By subscribing you agree to our Privacy Policy.