Which AI code agent did you use?

Claude Code, with Next.js for the site, Airtable as the content database, GitHub for the code and Vercel for hosting. The method works with any capable code agent.

How much does it cost to run?

Free hosting on Vercel's hobby tier plus about €12 a year for the domain, instead of a monthly website-builder subscription.

Why not just prompt the agent to build the whole site?

Because the output looks like every other AI demo. The discovery and design-system steps give the agent a point of view, so the site looks like you.

How do I update content without touching code?

Content lives in Airtable. Editing a row updates the page within a minute, and layout changes are a plain-English request to the agent.

How do I know a change is really live?

Check the live URL and the host's deploy status, not the local build. A site that builds on your laptop can still fail on the host.

← How-to/ship-your-own-website-with-an-ai-code-agent

Ship your own website with an AI code agent

I left Framer's €24/month to build my own site with an AI agent — full design control, near-zero cost.

▶ 3 min·Jun 2026·Business operation · AI · NoCode Development·●●● lvl 3·Free

By Jin Longyu·Published 8 Jun 2026·Updated 21 Oct 2026

TL;DR

Ask an agent to "build me a website" and you get a generic AI-looking site. Instead run a process: discovery (what and who the site is for), a design system (fonts, colour, spacing), a throwaway HTML demo to judge the look, then build and deploy with the agent writing the code. The result is a site you own, hosted free, that changes in a minute when you describe the change.

01 · Story

Story behind

I used to pay for Framer to host this site.
Pretty, but high-effort, and its built-in AI wasn't good enough.
So I rebuilt the whole thing with an AI code agent.

But ask an agent to "build me a website" and you get something generic.
You can tell straight away it's AI-vibe-coded.

So how do you get a site that looks like you,
not like every AI demo?

It's a process, not a prompt:

Discovery — what the site is for, and who it's for
Design system — the fonts, colour, and spacing that keep it consistent
HTML demo — a quick mockup to judge the look before building
Build and deploy — the agent writes it, and it goes live

I direct each step in plain words.
The agent writes the code —
and every change ships live in a minute.

02 · Why

Why this helps you

You own it — the code, the content, and the domain are yours. No platform can raise rent or sunset a feature you depend on.

Custom, not template — a real point of view in the design system means it looks like you, not like every other AI-built site.

Cheap to run — free hosting to start and a ~€12/year domain replace a recurring builder subscription.

Editable forever — describe a change in plain English and it ships in a minute; update content by editing a row.

A repeatable method — discovery to deploy works for the next site, and the next client's, too.

03 · Steps

How to

Grab it from "Try it yourself" — it runs the whole discovery-to-deploy process.

Give the agent your content — a Google Drive or Notion folder with your projects, writing, and brand — so it understands you first.
Skip the tech for now — no repo or accounts until you publish.

Kick off the build and let it lay out the plan and the pages.

Let it interview you: who the site is for, what each page must do, the goal.
Describe the look you want — the skill drives these questions.

Review the design system it proposes — fonts, colour, spacing.
Judge the local HTML mockup before any real code — give feedback to iterate.

Ship it — approve, and it publishes on the stack you choose. For me:
- Code: GitHub
- Hosting: Vercel
- Content: Airtable

04 · Notes

Good to know

Judge the demo, not the promise — never approve a look from a description. Make the agent show you the HTML first.

Verify the deploy, not the local build — a site that builds on your laptop can still fail on the host. Check the live URL, not just the green checkmark.

The demo is your safety net — flat HTML is throwaway-cheap to iterate. Spend your opinions there, before there's code to refactor.

Design tokens are the multiplier — decide colour, type, and spacing once, name them, and every page inherits consistency for free.

05 · Try it yourself

Copy the skill

Build your website with an AI code agent

Paste it to your agent as the first message.

06 · FAQ

Questions, answered

Which AI code agent did you use?: Claude Code, with Next.js for the site, Airtable as the content database, GitHub for the code and Vercel for hosting. The method works with any capable code agent.
How much does it cost to run?: Free hosting on Vercel's hobby tier plus about €12 a year for the domain, instead of a monthly website-builder subscription.
Why not just prompt the agent to build the whole site?: Because the output looks like every other AI demo. The discovery and design-system steps give the agent a point of view, so the site looks like you.
How do I update content without touching code?: Content lives in Airtable. Editing a row updates the page within a minute, and layout changes are a plain-English request to the agent.
How do I know a change is really live?: Check the live URL and the host's deploy status, not the local build. A site that builds on your laptop can still fail on the host.

07 · Keep going