How We Vibe Code a Small Business Website in an Afternoon

Not long ago, a small business website was a six-week production. Discovery call. Wireframes nobody quite agreed on. A design mockup that went through two rounds of “can we make the logo bigger.” Then the actual build, then QA, then three weeks of back-and-forth about the contact form. Invoice lands somewhere between three and ten grand. By the time the thing goes live, the owner has forgotten what they originally asked for.

We do not do that anymore. Not because we got lazy. Because the math stopped making sense.

AI handles the stuff that used to eat all the hours — layout, component structure, responsive breakpoints, the first pass of copy. That frees us to spend real time on the things that actually move the needle: words that sound like the business owner talking, not a brochure. Speed that loads before the visitor loses patience. A phone experience that works when someone is standing in a parking lot trying to find the number.

Here is exactly how we vibe code a small business website, start to finish. No steps skipped, no magic.

Fifteen minutes of questions

We send a Google Doc with twelve questions. Business name, what they sell, who they sell to, three competitors they like, three they can not stand, phone, address, hours, brand colors if they have any, and two or three sites that feel right to them. That is the whole intake.

No discovery call. No mood board workshop. A solo dentist does not need a creative brief. They need a site that shows up when someone types “dentist near me,” loads in under two seconds, and has a phone number you can tap. The twelve questions capture everything we need to make that happen.

One question matters more than the rest: “Name three websites you hate.” Sounds weird, but it works. A plumber who despises sites with cartoon mascots and blinking “EMERGENCY” banners is telling us exactly what not to build. That single answer shapes more design decisions than any brand guideline ever will.

Five minutes to pick the prompt

Vibe coding a site well starts with the prompt, not the code. We open the prompt library and grab the closest match. Restaurant, law firm, dental clinic, yoga studio, plumber — there are 40 of them, each one running between 10,000 and 14,000 characters. That is not a one-liner. It is an entire brief: sections in order, design rules, typography, icon systems, color logic, responsive breakpoints, SEO markup, and a big fat list of things the AI must not do.

That “do not do” list is the real secret weapon. No emojis anywhere in the UI. No script fonts. No gradient blobs behind the hero. No “we are passionate about excellence” anywhere on the page. The AI is excellent at following constraints. Telling it where the ditches are works better than describing the road.

If there is no exact match — a dog groomer, say — we start from the veterinarian prompt and swap the details. A tattoo studio starts from the hair salon. The bones of a local business site are the same: nav, hero, services, testimonials, contact, footer. The soul is different, and that is what we adjust.

Two minutes to generate the first draft

This is the part people picture when they hear “vibe coding”: paste the full prompt into Claude, drop in the real business details, hit send. Two minutes later there is a complete HTML file sitting in the chat. Navigation, hero, about section, services, testimonials, contact form, embedded map, footer. Sixty to eighty kilobytes of code that actually works.

Is it finished? Not even close. It is about 80 percent of the way there. The structure is solid, the responsive behavior works, the colors are applied. But the hero copy reads like it was written for every restaurant in the country and none of them in particular. One section feels like filler. The testimonial quotes all sound like the same person wrote them. Expected. The AI builds the house. We do the decorating.

The cleanup loop: 90 minutes to 2 hours

This is where vibe coding ends and the human work starts. Four rounds, each one focused on one thing.

Round one: the words. We rewrite the hero headline by hand on every single project. Every one. The AI defaults to something like “Transform your dining experience with authentic Italian cuisine.” Delete that. Write something that only this restaurant could say. If you can swap in the competitor’s name and the headline still works, it is too generic. Start over. Then we fix the about section, kill every sentence that says nothing, and make the testimonials specific — a dish they ordered, a moment they remember, not “great service, highly recommend.”

Round two: the look. Swap the placeholder photos for ones that actually feel like this place. If the client sent real photos, those go in. If not, we pick Unsplash images that match the neighborhood and price point. Then we push the colors — the AI picks safe, flat palettes. We nudge one accent warmer or cooler, add a gradient where it earns its keep, and check that every text-on-background combination passes WCAG AA contrast. Nobody is reading light gray on white, no matter how elegant it looks in the mockup.

Round three: the phone test. Not the responsive preview in Chrome. An actual phone. Thumb through every section. Tap every button. Is the phone number a real tap-to-call link or just text sitting there? Does the sticky CTA cover anything important on a small screen? Then we run Lighthouse. The targets: Largest Contentful Paint under 2.5 seconds, Cumulative Layout Shift under 0.1, Interaction to Next Paint under 200 milliseconds. Static HTML on a CDN hits those numbers almost automatically, but the AI sometimes forgets to lazy-load images or set explicit width and height on photos. Five-minute fix. Turns a 72 Lighthouse score into a 96.

Round four: the accessibility pass. Tab through the entire page with a keyboard. Does every link and button show a focus ring? Run a screen reader for 60 seconds. Does the heading order make sense or did the AI jump from H1 to H4? Check every image — is the alt text “image” or is it “chef preparing wood-fired pizza in open kitchen”? Fifteen minutes, covers 90 percent of accessibility problems.

Five minutes to go live

Save the file as index.html. Drag it onto Cloudflare Pages or Netlify. Twenty seconds later there is a live URL. Free hosting, free SSL, global CDN. The site loads faster than 95 percent of competitors in any local market because it is literally one file on an edge server, no database, no PHP, no round trips.

Custom domain? Another ten minutes while DNS propagates. The client sees a live site the same afternoon they filled out the intake document.

The three things AI still can not do

After doing this across dozens of sites, there are exactly three things we never skip:

• The first sentence. The hero headline is the most important line on the site. The AI writes for the average business. We write for this one. A bakery in a converted firehouse gets a different headline than a bakery in a strip mall, even if everything else is identical.
• The speed and accessibility pass. AI does not reliably optimize for Core Web Vitals. It forgets lazy loading, omits image dimensions, inlines fonts that should be deferred. Five minutes of cleanup. But skip it and Google notices, and so does the person on a slow phone.
• The judgment calls. Should the phone number or the booking form be the primary CTA? Is this owner the kind of person whose face should be on the homepage, or would they rather stay behind the counter? Does this neighborhood respond to warm and folksy or sharp and minimal? No AI in the world can answer those questions. A two-minute phone call can.

The math

Total: about three hours. Fifteen minutes on questions, five on picking the prompt, two on generation, 90 minutes to two hours on cleanup and polish, five on deployment.

The part that surprises people: generation is two minutes. The other two hours and fifty-eight minutes are thinking, writing, testing, and deciding. Skip those — like a lot of people do — and the site looks AI-made. Do them and it looks like you spent two weeks.

That gap — not the vibe coding, but the hours after it — is where the job actually lives now.

Rather have someone else do it?

Same process, same prompts, our hands instead of yours. That is the Hire Us page. Flat fee, real deadline, code is yours on GitHub.

How long does it take to build a website, really?

The honest market answer: anywhere from one afternoon to three months, and the spread has almost nothing to do with typing speed. Agencies quote six to twelve weeks because of queues, feedback rounds, and meetings about meetings. A freelancer quotes three to eight weeks for the same reason minus some meetings. The build itself — the part where code gets written — has always been the small slice in the middle, and AI just shrank it again.

Here is where an afternoon actually goes when we run this process, minute by honest minute:

Call it three and a half focused hours for a static small-business site when nothing surprises you — and something usually surprises you, which is why we tell clients “days, not hours” and then look good when it lands early. WordPress builds run longer because a CMS has more moving parts; that math lives in our WordPress pricing breakdown.

Questions we get about build speed

How long does it take to build a website with AI?

A focused afternoon for a static small-business site if someone experienced is driving, a weekend if it is your first time and you are following our beginner walkthrough. The generation is minutes; the finishing is the real clock.

Why do agencies quote six weeks for the same thing?

Queues and process, mostly. Your project waits behind other projects, every revision waits for a meeting, and the invoice needs enough line items to justify itself. The actual keyboard time inside those six weeks would shock you.

What slows a build down the most?

Content, every single time. Not code — photos nobody took, opening hours nobody confirmed, and the “quick paragraph about us” that takes eleven days to arrive. Have those ready and you are most of the way to the afternoon timeline.