A landing page with AI, online in an afternoon

The plan is simple: Astro creates the skeleton of the site, Claude Code writes the content and the design while you explain what you want, and Vercel puts it online with a URL. Three tools, one afternoon, and no paid templates.

The shift worth noticing: you're not coding the page, you're directing it. Astro hands Claude a clean project to work in, the dev server shows every change the instant it lands, and that tight look-say-look loop is what lets you shape a whole site by talking. The skill that matters stops being syntax. It becomes saying what you want clearly enough that the build matches the picture in your head.

1. Create the project with Astro

Astro is a framework for building fast websites. You don't need to know how it works under the hood: a single line sets up the whole project. In the Terminal:

npm create astro@latest my-landing

It'll ask you a couple of questions. To start, pick the empty template (Empty), and say yes to installing the dependencies and initializing git. When it's done, go into the folder:

cd my-landing

2. Open it with Claude Code and describe the page

Here's the trick to all of this. Open Claude Code in the folder and, instead of programming, tell it in plain language what site you want:

claude

And you write something concrete. The more detail, the better it comes out. For example:

> Build me a landing page for a photography studio.
  A hero with a big headline and a "Book a session" button,
  a section with three services, a gallery of 6 photos,
  and a footer with the contact email. Clean aesthetic,
  light background, elegant typography.

Claude creates and edits the project files on its own. You don't touch the code: you review what it proposes and give the go-ahead.

3. See it in your browser

To see the site while you build it, start the dev server:

npm run dev

Astro tells you where it's running:

  astro  v6.1  ready in 412 ms
  ┃ Local    http://localhost:4321/

Open http://localhost:4321 in the browser. There's your page, live. Every change Claude makes updates on its own, no reload. Keep this tab next to your terminal: it's the feedback loop the whole build runs on.

4. Refine it by talking

Building here is a conversation. You look at the page, something feels off, you say so, and it changes. One thing per message works better than ten:

• "The hero is too small, make it full screen."
• "Change the accent color to an olive green."
• "Add a pricing section with three plans."

Sometimes it overshoots or breaks something. No drama: you tell it what went wrong and it fixes it. That way, in a couple of hours, you have a page that looks like what you had in your head.

5. Push it to GitHub

Once you like it, save it and push it. Astro already started git when it created the project, so you just have to save the first version and create the repository on GitHub. If you've never done it, it's step by step in Git and GitHub from scratch:

git add .
git commit -m "first version"
gh repo create my-landing --source=. --public --push

6. Put it online with Vercel

Vercel takes your GitHub repository and publishes it on the internet, free. Go to vercel.com, create an account with your GitHub, and hit Add New → Project. Pick your my-landing repository from the list.

Vercel recognizes on its own that it's an Astro project, so you don't have to configure anything: press Deploy. In about a minute it gives you a public URL and your site is online. From there, every git push updates it automatically.

When something breaks

It will, a little. The four you're most likely to hit, and the fix for each:

• "command not found: npm". Node isn't installed yet, or the terminal needs reopening after installing it. Sort it in install Node, then run the command again.
• Claude broke the layout. It overshot. You don't fix this by hand: tell it "that broke the header, undo it and try again," or roll back to the last good version with git restore ..
• "Port 4321 is in use". A dev server is still running in another tab. Close it, or run npm run dev -- --port 4322.
• Vercel build failed. Open the deploy log on Vercel. It's almost always a missing dependency or the wrong Node version. Paste the error into Claude Code and it'll hand you the one line to change.

Now try this

The page is live. A few ways to push it further, each one prompt or one click away:

• Put it on your own domain. Buy one, add it under the project's Domains tab in Vercel, and point the DNS where Vercel tells you.
• Capture emails. Add a signup form that actually stores the address, the way this site does it: wire the form to n8n.
• Make it bilingual. Ask Claude for an /es version of the page and a language switch in the header.
• Keep it fresh. Every later change is still just a sentence and a git push; the live site updates itself.

What you just did

A real site, on a real URL, in one afternoon. What matters isn't Astro or Vercel: it's that you didn't write the page, you described it. The tool stopped being the barrier. What makes the difference now is knowing how to ask for what you want.