We Built This Website With AI — Here's Exactly How
This Website Was Built With AI
Not partly. Not "AI-assisted in some vague way." The site you're reading right now — kingtide.nz — was built using Claude Code, an AI coding tool from Anthropic.
Every page. Every component. Every animation. The blog system, the contact forms, the location pages, the analytics tracking. All of it was built by describing what we wanted and letting AI write the code.
It's called vibe coding. And it's changing how websites get built.
What Is Vibe Coding?
Vibe coding is exactly what it sounds like — you describe the vibe you're going for, and AI writes the code to make it happen.
Instead of writing div className="flex items-center justify-between" by hand, you say: "Build me a hero section with a bold headline, a subtitle, and a green call-to-action button." The AI writes the code. You review it. You refine it. You ship it.
The term was coined in early 2025 and it's taken off because it genuinely works. Not for everything — but for websites, it's a game-changer.
The Tools We Used
Let's get specific. Here's the exact toolset behind kingtide.nz:
- Claude Code — the AI that writes the code. It's Anthropic's coding agent that runs in your terminal. You describe what you want in plain English, it writes the code, edits files, and runs commands. This is the engine.
- Next.js — the web framework. Think of it as the skeleton of the site. Claude knows it inside and out, which means it writes clean, production-ready code with it.
- Tailwind CSS — the styling system. Instead of writing custom CSS from scratch, Tailwind uses utility classes. Claude handles these natively.
- GitHub — version control. Every change gets saved, tracked, and can be rolled back. It's your safety net.
- Digital Ocean — hosting. The site auto-deploys every time we push a change to GitHub. Total cost: around $5/month.
You don't need to understand all of these deeply to get started. But you do need to set them up. Here's how.
The Setup — Step by Step
1. Get a GitHub account
Go to github.com and create a free account. GitHub is where your website's code lives. Think of it like Google Drive for code — it stores everything, tracks every change, and lets you roll back if something breaks.
Create a new repository (that's just a project folder). Call it something like my-business-website. This is where all your code will be pushed to.
2. Install the basics on your computer
You need three things installed:
- Node.js — the runtime that makes your website work locally. Download it from nodejs.org.
- Git — the tool that connects your computer to GitHub. It comes pre-installed on most Macs. On Windows, download it from git-scm.com.
- A code editor — we use VS Code (free) or Cursor (AI-enhanced editor). Either works.
3. Set up Claude
You have two options here:
Option A: Claude Code (what we use) Claude Code runs in your terminal. You install it, open your project folder, and start talking to it. Say "create a Next.js website with Tailwind CSS" and it sets up the entire project structure for you. It can read your files, write code, run your dev server, and fix errors — all from a conversation.
Option B: Cursor Cursor is a code editor with AI built in. It looks like VS Code but has Claude (or other AI models) integrated directly. You highlight code, ask it to change things, or use the chat panel to describe what you want. More visual than Claude Code, but similar results.
Both work. We prefer Claude Code because it's faster for building full pages and features. Cursor is great for smaller edits and when you want to see the code as it's being written.
4. Create your site
Once Claude is set up, the conversation goes something like this:
"Create a Next.js website with Tailwind CSS. Set up the project structure with a homepage, about page, and contact page."
Claude creates the entire project — file structure, configuration, starter pages — in under a minute. Then you start refining:
"Build me a hero section with a dark background, a bold headline that says 'Marketing is about to be your greatest asset', and a green call-to-action button that links to /contact."
"Add a testimonials section with a carousel. Here are the three quotes..."
"Create a blog system that reads markdown files from a /content/blog folder and generates a page for each one."
Each instruction gets you closer to the finished site. The AI writes the code, you review the result in your browser, and you keep going.
5. Preview locally
Run npm run dev in your terminal and your site appears at localhost:3000 in your browser. Every time Claude makes a change, the site updates in real time. You can see exactly what you're getting before anything goes live.
6. Push to GitHub
When you're happy with a set of changes, you push them to GitHub. In the terminal:
git add .
git commit -m "Add homepage hero and testimonials"
git push
That saves your changes to GitHub. Every commit is a snapshot you can return to if needed.
7. Deploy
Connect your GitHub repository to a hosting platform. We use Digital Ocean App Platform, but Vercel and Netlify are also popular choices (and have free tiers).
Once connected, every time you push to GitHub, your live site updates automatically. No FTP, no manual uploads, no waiting. Push the code, site updates in about 60 seconds.
How We Actually Built kingtide.nz
With the tooling explained, here's how the actual build went.
Strategy first, code second.
Before we opened Claude Code, we had our positioning locked in. Who we're for. What we offer. How we're different. The Impact Marketing Framework. Our approach.
AI can't do this part for you. It doesn't know your market, your customers, or your competitive advantage. If you skip this step, you'll get a beautiful website that says nothing.
Section by section, not all at once.
We didn't say "build me a marketing agency website." That gives you something generic. We went page by page, section by section, giving Claude specific direction on content, layout, and functionality.
The AI gets you 80% of the way in minutes. The last 20% — the brand feel, the copy tweaks, the spacing adjustments — that's the human work. You say things like "make that heading bigger," "change the green to match our brand colour," "add more space between those sections." Claude makes the change instantly.
Iterate relentlessly.
This is where AI building really shines. Want to change the layout? Describe it. Want to add a new page? Describe it. Want to restructure the navigation? You get the idea.
Changes that would take a traditional developer hours take minutes. Our Our Approach page went from idea to live in under 20 minutes. The nine location pages across the Waikato were built in a single session.
Commit often.
Every meaningful change gets committed to GitHub with a clear message. This means we can see the full history of how the site evolved, and if something breaks, we roll back to the last working version. It's happened maybe twice — both fixed in under a minute.
What AI Is Genuinely Good At
Let's be honest about where AI excels with website building:
Speed. A full marketing website in days, not weeks. New pages in minutes, not hours. This site has over 30 pages and was built faster than most agencies would build five.
Consistency. Once the AI understands your design system — your colours, fonts, spacing, component patterns — it applies them perfectly across every new page. No drift, no "the intern built this page" moments.
Technical features. Things like SEO metadata, structured data markup, RSS feeds, analytics integration, form handling — the AI handles these flawlessly because they're well-documented patterns.
Iteration. Client doesn't like the layout? Change it in two minutes. Want to A/B test a different headline? Done. The cost of experimentation drops to almost zero.
What AI Is Bad At
Here's where people get it wrong:
Brand strategy. AI doesn't know your customers. It doesn't know what makes you different. It can write words, but it can't decide what those words should say. The positioning work that makes kingtide.nz effective? That came from years of marketing experience, not a prompt.
Design taste. AI can replicate design patterns it's seen before. But that original creative spark — the decision to keep the Our Approach page deliberately minimal, the choice of colour palette, the feel of the brand — that's human judgment.
Knowing when to stop. AI will happily add features forever. More animations, more sections, more complexity. Good websites know when to stop. Restraint is a human skill.
Copy that actually converts. AI can write competent copy. But the lines that make someone pick up the phone? Those come from understanding the reader's real problem, not from pattern matching.
Who Should Build a Website With AI?
This is for you if:
- You're a business owner who knows what they want to say but can't code
- You have clear positioning and a solid offer
- You want to move fast and iterate
- You're comfortable reviewing output and giving feedback
- You want a high-performance site without the $15-20k agency price tag
This probably isn't for you if:
- You don't have a clear idea of your brand or messaging yet (do that first)
- You need a complex web application, not a marketing website
- You're not willing to learn the basics of reviewing and deploying code
- You want someone else to own the entire process end-to-end
The Cost Difference
Traditional agency website for an NZ SME: $8,000 – $25,000 and 6-12 weeks.
AI-built website with the right guidance: a fraction of the cost and live in days. Ongoing changes cost almost nothing because you're not paying hourly rates for every text change.
The King Tide website would have cost us tens of thousands to build through a traditional agency. And every time we wanted to add a blog post or tweak a page, we'd be waiting on someone else's timeline and paying for the privilege.
How King Tide Can Help You Do This
We're not keeping this to ourselves. Part of what we do at King Tide is teach business owners how to use these tools — including AI-assisted website building.
Through our Coaching Accelerator, we can walk you through the entire process:
- Setting up GitHub, Node.js, and Claude Code on your machine
- Building your site together in live coaching sessions
- Teaching you how to prompt effectively — the difference between "build me a website" and a prompt that gets you exactly what you want
- Setting up auto-deployment so your site updates every time you push
- Teaching you to add pages, blog posts, and features on your own after we're done
We can also build the whole thing for you through our Full Service Accelerator — then hand over the keys with a CLAUDE.md file (a set of instructions that tells AI how your site works, what to change and what not to touch) so you can maintain and grow it yourself.
The goal is the same as everything we do: build the machine, teach you to run it, and step back.
Once You're Live, the Real Fun Starts
Here's what most people don't realise: launching the website isn't the finish line. It's the starting line.
With a traditional agency-built site, every change after launch costs money and time. Want to add a landing page? That's a quote. Want to test a new headline? That's a ticket. Want to build out a whole content strategy? That's a project.
With an AI-built site, the cost of iteration is practically zero. And that's where the real value kicks in.
Since kingtide.nz went live, here's what we've built and optimised — all using the same AI workflow:
- Nine location pages across the Waikato — Hamilton, Cambridge, Te Awamutu, Matamata, Morrinsville, Raglan, Huntly, Otorohanga, and Te Kuiti. Each with unique content, local FAQs, and structured data. That's programmatic SEO that would have cost thousands through a traditional build.
- A full blog system with eight articles (including this one), cross-linked for SEO, with article schema markup so Google can show rich results.
- RSS feed that auto-generates from our blog posts — picked up by feed readers and aggregators.
- Google Analytics and conversion tracking — we know exactly which channels drive enquiries, right down to the UTM source.
- Attribution tracking on every form submission — when someone fills out our contact form, we see whether they came from Google, social media, a referral, or a direct visit. That data flows straight into our reporting.
- Structured data across the entire site — LocalBusiness schema, Article schema, FAQ schema on location pages — all the signals Google looks for.
- Sitemap kept up to date with every new page we add.
Every single one of these was built in the same way as the site itself — describe what you want, AI writes the code, review, ship. No waiting. No agency quotes. No three-week timelines for a blog post.
This is the real selling point of AI-built websites. It's not just that the initial build is faster and cheaper. It's that your website becomes a living, evolving asset that you can continuously improve without breaking the bank. The optimisation never stops — and it never has to.
The Bottom Line
AI didn't build this website. We built this website with AI.
That distinction matters. The strategy, the positioning, the brand, the copy decisions, the design restraint — that's all human. The code? That's where AI earns its keep.
If you're a business owner in New Zealand thinking about a new website, this is worth exploring. Not because AI is magic — but because it removes the biggest barriers: cost, time, and dependence on developers for every small change.
Your website should work as hard as you do. And now, building one that does is more accessible than it's ever been.
Want to explore whether AI-assisted website building is right for your business? Book a free call and we'll walk you through what's possible.
Ready to turn marketing into your greatest asset?
Book a free call with the King Tide team.
Get in Touch →