A designer quoted me $8,000 for my website. I built it myself in a weekend, and I don't write code.

This is the whole playbook, start to finish. Not a teaser, not part one of a course. The entire thing I actually did, in the order I did it. By the end you'll have a real website: one that looks good, collects and sends information, and lives on your own domain for about $20 a year.

It's three phases. Make it beautiful. Make it do something. Put it live. Sixty-three percent of people building with AI coding tools right now are not developers. This is not a coding guide. It's a taste guide. You bring the taste, AI brings the hands.

One note before we start: none of this is sponsored. Not by any of the tools I'm about to name. These are just what I've been using.

Don't be scared if you don't know code. I don't either, not really. You are never going to open a file full of symbols and be expected to understand it. Your whole job is to describe what you want and react to what you get. If you can tell a contractor "the kitchen feels dark," you can do this.

1. Steal like a designer

You don't need to know what fonts you like. You need to point at things. So go find three to five websites you love, from anywhere, and screenshot them.

Drop those screenshots into ChatGPT. Then hit the microphone and word-vomit: what you liked, the feeling you want, who it's for, what you're building. Don't write a neat paragraph. Ramble. Then ask it one question.

Here are screenshots of sites I love. What do they have in common, and why do they work? Name the style for me: the fonts, the spacing, the color feeling, the vibe. Describe it like you're briefing a designer who has to match it.

It gives you the words you couldn't find. The style you can see but can't name. Now you can hand that to whoever builds it, which in this case is also AI.

2. Answer a brief like a client

Next you need a brief. Here's the reframe that made this click for me: I didn't write a brief. I answered questions like a client, and AI was the agency.

Have ChatGPT or Claude interview you. Who is this for. What do you want someone to do in the first ten seconds. What pages you need. Then make sure one thing ends up in that brief, because most people skip it and regret it: the information architecture.

Information architecture is a big phrase for a simple thing. It's your page list and how they connect. Home, About, Work, Guides, Contact. What's in the menu, what lives under what. Decide it before anyone builds a thing, or you'll be moving walls after the house is up.

Home About Work Guides Contact
Information architecture is just your page list and how they connect. Put it in the brief before anyone builds.

3. Hand it to Claude Code, then direct it like a director

Now the building. This part happens in Claude Code. You bring everything you gathered: the brief, the screenshots, the style words, the page list. Tell it to read all of it first, then build.

Read all of this before you start: my brief, these screenshots of sites I love, and this style description. These are my pages and how they connect (paste your information architecture). Build me the front end of this website to match that taste. Make it mobile-friendly from the start.

It builds. Then comes the real skill, and it isn't coding. It's directing. You look at what it made, and you talk back to it, out loud, the way you'd talk to a designer sitting right next to you.

Give feedback out loud, in plain English

Hit the microphone and just keep explaining. You don't need the right words. Move this up. This feels flat. The header is too big. I want it to feel alive. It changes it and shows you again. That back and forth is the whole job.

YOU SAY, OUT LOUD Move this section up. The header feels too big. Make it feel alive. it rebuilds you look, you react, you say the next thing
The whole job is a loop: you react out loud, it redraws, you look again. No code, just taste.
Remember: you're not writing instructions, you're reacting. "I don't love this, make the top feel calmer" is a real, useful prompt. Keep reacting until it looks like the thing in your head.

Ask for movement (this is what makes it feel expensive)

A flat page reads cheap. A page that moves a little reads like someone paid for it. So ask for it, by name. Here's close to the exact list I asked for on this site. You can paste it as is.

Add some life to this, tastefully, nothing dizzy: - Fade each section up gently as I scroll down to it. - On the buttons and cards, a small lift and shadow when I hover, and slide the little arrow to the right. - Let the hero background drift slowly, like a soft moving gradient behind the words. - Turn the row of highlights into a swipeable carousel that snaps to each card. - Type out the main headline one letter at a time when the page loads. Keep all of it smooth and slow. Elegant, not busy.

Every one of those is on my real site. The sections that rise as you scroll, the buttons that lift under your cursor, the gradient breathing behind the headline, the headline that types itself. None of it was hard. It was one paragraph of me describing what "alive" meant.

FADE UP AS YOU SCROLL rises and fades in as it enters LIFT ON HOVER rest Read the guide › hover Read the guide ›
Two tiny moves, both on this site: sections fade up as you reach them, and buttons lift with the arrow sliding right when you hover.

The pro touch nobody thinks to ask for: respect motion

Here's the one that makes it feel truly finished. Some people get motion sick, and their phone has a "reduce motion" setting turned on for exactly that reason. Ask Claude Code to honor it, and all your movement quietly holds still for those people. Same site, no headaches.

Make all the animation respect the reduce-motion setting. If someone has it turned on, hold everything still. And make sure the page still reads perfectly with no motion at all.

Then actually check it on your phone

The hot tip I learned the annoying way: say "make sure it's mobile-friendly" out loud, then open it on your phone and scroll it yourself. Most people build for the laptop and forget that nearly everyone shows up on a phone. If a button's too small or a section stacks weird, just say so, in plain words, and it fixes it.

Remember: you don't need the right words. You need to keep talking. Move this, this feels off, make it feel alive. It changes it and shows you again. That loop is the whole job.

4. Decide: are you collecting info, or sending it?

Now it's beautiful. Time to make it do something. Every useful thing a website does comes down to two moves: it collects information, or it sends information. A contact form collects. An auto-reply sends. Most sites do both.

Here's the setup line that makes the next part make sense: the second your website collects anything, that information has to go somewhere. It travels one of two ways, and it lands in a place that stores it. Those two ways are an API and a webhook. Knowing the difference is the only technical thing you actually need, so let's do it in plain language.

5. API vs webhook, in plain words

An API is you asking. Your site sends a request, and the answer comes back. Like texting someone a question and waiting for the reply. Information goes out, and information comes back. Both directions.

A webhook is the opposite manner of talking. It's the site tapping you on the shoulder. The moment something happens, it pushes the news to you, one direction, no asking. Like a doorbell. You don't stand there checking if someone's at the door. It rings you.

API You ask. The answer comes back. Your website Another app out, and back WEBHOOK It taps you when something happens. Your website Your phone one way
An API asks and waits for an answer, both directions. A webhook is a doorbell: it rings you the moment it happens, one way.

The third word is database. That's just where the information lives once it arrives. If you host on Vercel, like I do, the database basically comes with the house.

Remember: use an API or a webhook to send information out. But if you're pulling information in, you need an API. Only the API asks and waits for an answer.

You don't wire any of this by hand. You tell Claude Code what you want to happen (someone fills the form, I get a text and they get an email) and it sets up the right one for you.

6. Get your API keys

To connect one app to another, you usually need an API key. Think of it as the password that lets your site talk to the other service. There are two ways to get one, and both are easy.

The first way: go into the platform yourself, find the API section, and copy the key. It's usually one screen. Then paste it back to Claude Code and it does the rest.

The second way, which I love: let the Chrome connector do it. Claude can take over your browser, go into the app, and pull the key for you while you watch. You just say the word and it clicks through the setup itself.

I need the API key from my Resend account to send emails from my site. Use the Chrome connector to go into Resend, find or create my API key, and wire it into the site so the contact form sends an automatic reply.

Resend is what I use for email (free up to a few thousand emails a month). For a text to my own phone, the same pattern with Twilio, which costs about a penny a text. Someone fills out my form at 2am, and by 2:01 they have an email from me. I'm asleep. Again: not sponsored, just what I use.

7. Put it live with Vercel

Right now this beautiful thing only exists on your laptop. To put it on the actual internet, you need a home for it. Mine is Vercel. It hosts the site and runs the backend from the last two steps, and the hosting is free on their starter plan.

Setting up the account is the one manual part: you make a Vercel account yourself. That's it. After that, you don't hit deploy. You don't hit anything. You tell Claude Code to do it.

Deploy this to my Vercel account. Connect it, create the project, and ship everything. If you need to click through anything in Vercel, use the Chrome connector and do it for me.

It connects, creates the project, and ships it. If there's setup to click through, the Chrome connector takes over your screen and does that too, while you watch. The word "deployment" was doing a lot of scary work for a sentence I typed in plain English.

8. Point your own domain from GoDaddy

A real website needs a real name. Go to GoDaddy, search for the domain you want, and buy it. A first year usually runs $10 to $20, then about $20 a year after that. That's the whole cost. Not a month. A year.

The domain stays held at GoDaddy. You point it at Vercel with two copy-paste settings, which Claude can walk you through or the Chrome connector can enter for you. Vercel also keeps a whole list of connectors and API endpoints in its dashboard, so this is another place you can wire up the send-and-collect pieces from step five.

Remember: after you point the domain, you refresh it like a maniac for twenty minutes while it connects. That's normal. It's not broken. Go make a coffee.

9. Measure it with your own analytics dashboard

You're live. Last move, and it's the one everybody skips: know who's actually showing up. Vercel gives you some analytics out of the box. But if you drive traffic to a site, you want to really understand it. Who's clicking, what they open, where they leave, what's actually working.

So ask Claude to build you a dashboard for exactly that. Your own analytics, showing the things you care about, not a generic chart you'll never look at.

Build me a simple analytics dashboard for my site. I want to see visitors over time, which pages they open, where they come from, and how many fill out my form. Keep it clean and put the number I should watch first at the top.

If you're going to send people to your website, measure it. A gorgeous site nobody understands the traffic to is a guess. This turns it into something you can actually run.

The whole playbook, in one breath

  • Make it beautiful. Steal from sites you love, answer a brief like a client, and direct Claude Code out loud until it feels alive. Check it on your phone.
  • Make it do something. Decide if you're collecting or sending, learn the one difference (API asks and waits, webhook taps you), and let Claude wire it up with the right keys.
  • Put it live. Host on Vercel, point a GoDaddy domain at it, and refresh like a maniac for twenty minutes.
  • Then measure it. Build your own dashboard so you know who's really there.
Designed it, made it work, put it live. One weekend, about twenty bucks.

That's the whole playbook: beautiful, working, live, and measured. If you want the thinking part first, start with turning a messy idea into a clear plan, then come back and build the real thing. The website a designer wanted $8,000 for is a weekend and about twenty dollars away.