vibecoding.au is the guide I kept wishing someone had handed me when people asked — usually a bit sheepishly — “How do I start with AI?”
It is not a dump of every tool logo on the internet. It is not “get rich with apps in a weekend.” It is a plain-English path, written in Australia, for people who are interested in building with AI, or making things with AI.
I noticed when speaking to people about AI and how I use it to build things, I always got the same kind of reply: “I don’t know how to do that,” or “I don’t know how to use it,” or “I wouldn’t know where to start” — and variations on that theme. Turning the site into a learning portal that teaches how to use AI tools is what it strives to do.
That is the why. The how is interesting too — Grok Build in a real folder, a ridiculous mega prompt, Gemini in the middle, Astro files, amber paint chips, games you can click. And the site has moved a long way since that first prompt. What you’re looking at now is roughly v1.2: denser real guidance, clearer path, less empty noise. This post is both stories on purpose — why the portal exists, and how it got built. The more genuine information the better — not GIGO pages that look busy and teach nothing.
Why this site exists
This personal blog is already my kitchen sink — drums, tech, whisky, detailing, the odd browser game. vibecoding.au is a different job. It’s a learning portal for people who want to build or make things with AI and keep saying they don’t know how, or don’t know where to start. Real steps. Genuine information. Not GIGO pages for search engines.
On the educational site I keep the tone calm and useful — no banner about how clever the build was. Here I can be more open about the aim: teach humans how to use AI tools without treating them like fools or wallets. Not model science. Not “pick the newest logo.” A simple relationship: speak clearly, try something small, check with your hands, don’t trust polish, only go harder when real people or money show up.
People don’t usually fail because they needed one more feature list. They get overwhelmed by tools, feel stupid, start with “build me an app,” read forever without finishing one small win, or treat a pretty demo like a finished product. vibecoding.au is built to push back on that — more than any stack choice or mega prompt.
The trap
You open a tool, type a huge vague goal, burn credits (money), and get something that looks clever in a screenshot. Poke it and it falls over. You walk away thinking you’re thick. You’re not. The first prompt was the problem.
The gap
A lot of posts sell speed. Official docs assume you already live in their product. Beginners sit in the middle with a blank box and no map. That’s a rough place to learn.
What works better
Night one: small goal, clear prompt, throwaway folder, something you can click when you’re done. That’s how people stick around long enough to get judgment — not just more screens.
The 80% wall
AI tools can spit out an impressive prototype in minutes. Turning that into something real people log into — private data, money, “why is it broken on Safari?” — is where the fun stops and the work starts. vibecoding.au names that gap on purpose. Cross it when you’re ready, or stay on the demo side until you mean it. A good demo is fine. Pretending a demo is a bank is not.
If you’ve already read how this site left WordPress or how Slice Balloon landed in under ten minutes, you know the pattern. I steer. The model types. We ship plain HTML files and move on. Same idea here — different website. The mission is the learning portal: a fairer first hour with AI for people who didn’t know where to start.
What vibe coding is (for people who don’t know)
Forget the conference talk. In kitchen-table English:
Working definition
Vibe coding means you describe what you want in normal language, an AI knocks up most of the code or app shell, you try it, then you steer — smaller asks, clearer “don’t do this,” another pass. Brilliant for demos. Risky if you never understand or check what you just accepted.
A few words that show up a lot on the site (and in this post):
| Term | Plain English |
|---|---|
| LLM | The “brain” behind ChatGPT, Claude, Grok and friends. It predicts the next bit of text (including code) from what you typed. It is not a workmate who knows your customers. |
| Prompt | What you type. Better prompts say who you are, what to build, and what not to do — not “make me an app” and a prayer. |
| IDE | Think “Word, but for code.” A desktop app where your project lives in folders (VS Code, Cursor, and that crowd). |
| Agent | AI that doesn’t only chat — it can edit files, run steps, and keep going until it’s done or stuck. More power. More reason to watch it. |
| Sandbox | A practice folder or throwaway project. Not the only copy of your live site. Not your customer database. |
| Production | The live thing real people use. Higher bar than “it worked on my laptop once.” |
The phrase “vibe coding” got loud around the Karpathy-era chat about building by feel and language instead of hand-typing every line. You don’t need the history essay to start. You need a first session that doesn’t torch your wallet or your confidence.
Tools in the loop — including Grok Build
Two lists get mixed up online, so I’ll keep them separate:
- Tools the site talks about — Lovable, Grok Build, Cursor, Claude Code, Bolt, Replit, v0, plus the “real users” path when things get serious.
- Tools that actually built the site — mainly Grok Build working in a real folder, with me calling the shots on brand, audience, and what “done” means, then the usual static-site chores (Node, Astro build, FTP upload).
Not every tool the site teaches about was used to write vibecoding.au. The site explains the family. The build used a few solid helpers — mainly Grok Build, with me calling the shots.
Grok Build (how this site got made)
Multi-step work: plan the pages, edit files, fix the build when it screamed, fatten beginner copy, bolt on demos. Not a one-line chatbot answer. AI drafts. I keep or bin.
Builders (Lovable and friends)
Great when you want “show me something I can click” without living in a code editor. The site teaches that path for beginners. It is not how every page of vibecoding.au was authored.
Editors (Cursor-style)
AI sitting inside a real project on your disk. You own the files. Dangerous if “Accept All” is a lifestyle. Different job from pure chat-to-website builders.
Terminal agents
Claude Code–style helpers that can thrash through lots of files with commands. Fine if you can live in a text window and undo with Git. Covered honestly — power with adult supervision.
Decisions the model didn’t get to invent
Some things only a human should lock:
- Public face is Ian Piggott, with a link back to this site.
- Contact is an email address via click-to-reveal, not sitting plain in the HTML for spam bots.
- Look: dark slate with an amber accent (we tried a few colours; amber stuck).
- Message: name the money trap early; path first, extras later.
- Money features: empty hooks first. Real content before wiring every affiliate slot.
On the live Grok Build tool page we even say the quiet part out loud: vibecoding.au was put together with Grok Build help. That’s the pattern I want beginners to copy — AI as a fast helper, not the owner of the product.
Design choices that actually mattered
Here’s the short version of why the site looks and works the way it does — not as a design manifesto, just as “here’s what I’d tell a mate over coffee.”
| Choice | What we did | Why a beginner should care |
|---|---|---|
| Stack | Astro static site in a site/ folder |
Pages load fast. You can upload HTML over FTP. No database on the host to babysit at midnight. |
| Look | Dark slate + amber | Not another teal “AI SaaS” clone. Amber says “pay attention” without screaming emergency. |
| Who’s behind it | Ian Piggott; link to this blog | A real person owns the tone. If something’s wrong, it’s on me. |
| Glossary | Important words first | Night-one readers shouldn’t have to scroll past rare jargon to find “prompt.” |
| Money bits | Placeholders early | Ship the path first. Price tables on tool pages always say “check the official site” so we don’t lie with last year’s numbers. |
| Games | Familiar genres, original names | Fun way to feel loops and input without nicking famous titles or assets. |
| Demos | Pages under /examples/… |
Playable bits that go through the real site routing — not random files dumped in a corner. |
Why amber, not teal
I ran a few throwaway colour demos — teal, violet, amber. Teal felt like every other AI site. Amber is the one I actually like, and it fits the message: pay attention, don’t sleepwalk into burning credits. If a button needs more punch later, we tweak a shade — not the whole brand.
What’s in the folder (the map)
If you ever open the project, it’s not magic. Rough shape:
vibecoding-au/
site/ # Astro app (this is what builds)
src/data/ # tools, prompts, projects, glossary, path…
src/components/ # GuidePathBar, PromptBlock, Header…
src/pages/ # routes (including /examples/* demos)
public/ # favicon, robots, static assets
docs/ # design notes, checklists, agent handoffs
demo-accents/ # early colour swatches (amber won)
Content in data files
Change a tool or project in a TypeScript data file, rebuild, and the hub pages update. “Last checked” dates live in one place so we’re not hunting stale price notes across fifty pages.
Not much JavaScript on the page
Copy buttons, show-the-email, a few path helpers. It should feel like a guide you can read, not a dashboard product pretending to be a book.
Build then upload
npm run build → take the contents of site/dist/ → FTP to the host. Same basic idea as this blog on VentraIP.
Same family as this site
ianpiggott.com is also Astro and static. Different look, same boring superpower: HTML files you can understand and ship without a plugin drama.
At soft launch (August 2026) there’s a glossary with the common words up front, a handful of deep tool pages, a prompt library with layered prompts, projects with steps and “don’t forget security” notes, a few longer articles, an Australia corner, legal/trust pages, and playable demos under /examples/. Enough to walk the path. Not “finished forever.”
Build phases (how it actually unfolded)
This wasn’t a clean sprint plan on a whiteboard. It was a few days of decide → generate → play → fix → decide again. Rough order of how it felt from my chair:
1 · Empty folder, dual prompts
Before any real site files existed, the job was getting a brief worth trusting. Not a clever one-liner — a long, slightly embarrassing document an agent could actually work from.
I opened grok.com in Expert mode and asked for a full professional Grok Build prompt for vibecoding.au. Something comprehensive. Something that would actually help beginners, and a monetisation path that didn’t make me sound like a late-night infomercial. Grok wrote a monster prompt. I had it save a .txt so I could carry it around without losing it in a chat scrollback.
Then I took that text to Google Gemini free — no account, no fancy setup. Free Gemini chops long pastes, so I fed it in two or three parts and told it to wait until I was done. Ask was simple: improve this for trust and E-E-A-T, put your own expertise in. After some fiddling with how Gemini behaves when you paste in chunks, it came back with a big “blueprint” — architecture, content ideas, how to deploy. Useful skeleton. The marketing language was a bit costume-party. I didn’t care. I wanted structure, not a brand slogan from a model that had never met me.
I asked Gemini for an improved prompt as a file, then walked that back into grok.com on Heavy mode. Grok didn’t pretend Gemini was rubbish. It said several bits were genuinely good, kept those, merged them into our original, and overwrote the file. What I ended up with was an over-the-top “MEGA SUPER ELITE” build prompt — the one that actually kicked off vibecoding.au. Two AIs arguing through me, one empty folder on disk. The aim never changed: a guide people can follow on a Tuesday night, not a pile of half-finished “coming soon” pages.
2 · Locking the boring decisions early
Once the prompt was “good enough,” we stopped shopping for stacks and started drawing lines in the sand. Whole site in the first pass — not a lonely landing page and a promise. Dark background so it felt like a tool, not a real-estate brochure. My name on the public pages (Ian Piggott), with a link back here. Money stuff — affiliates, ads, analytics — as empty hooks you can fill later, not fake “already making bank” chrome. And a plain independence line so nobody thinks Lovable or xAI wrote this for me. None of that is glamorous. All of it saves you from rebuilding the house because you skipped the foundation chat.
3 · Playing with colour until amber stuck
I am not a brand agency. I just didn’t want another teal “AI startup” site that looks like every other screenshot on Twitter. We knocked up some throwaway colour demos in a little demo-accents/ folder — teal, violet, amber — and looked at them like paint swatches on a kitchen bench. Teal felt safe and forgettable. Amber is the colour I actually like, and it fits the message: pay attention, don’t sleepwalk into burning credits. So amber won. If a button needs a tweak later, we tweak a shade — we don’t start a rebrand committee.
4 · Putting real pages on the bones
Then the site stopped being a prompt and became folders. Astro project under site/, colours and type in one place, header and footer that don’t change personality every page. The path pages went in: what vibe coding is, pick a tool, first session, lab, production when you’re ready. Tools hub. Prompts you can copy. Projects with steps. An Australia corner. Resources. The boring legal pages people skip until they need them. Importantly: real sentences, not “Lorem ipsum dolor” placeholders. If a page was thin, we either fattened it with genuine info or admitted it was thin — we didn’t ship GIGO filler to look busy.
5 · The “talk like a human” pass
First drafts of AI educational sites love jargon. Mine did too. So we went back through with a beginner hat on. Glossary terms sorted so the everyday words show up first — not a dictionary dump that starts at “abstraction.” Rewrote spots that sounded clever and explained nothing. Gave Grok Build its own honest tool page (including that this site was built with it). Home page stopped trying to be a brochure of every door at once and started with the question I actually hear: How do I start with AI? — and the trap of typing “build me an app” before you know what you’re doing. That pass is where the site started sounding like me talking to a mate, not a whitepaper talking to a procurement team.
6 · Games, because clicking teaches faster than preaching
Somewhere in the middle I got itchy for something you can play. Theory is fine; a browser game that works or doesn’t is honest. We wrote one-shot prompts for original games in familiar genres — no ripping off famous titles or mascots. Sky Dash is the endless flyer type (think pipes and flapping, Aussie magpie energy, our own name). Neon Grid is Snake on a dark grid with a bit of glow. Both got playable demos under /examples/ on the site. I sat and played them. Neon Grid won for me on feel. That’s not a metric dashboard talking — that’s me on a phone thinking “yeah, I’d show someone this.”
7 · Admitting what we haven’t proved
Easy trap: paste a prompt library and imply every line is battle-tested. We didn’t do that. Some prompts have been run and noted. Some are “try this, here’s how to check it.” There’s a how-to-test write-up, lab challenges with human scoring, and production hardening parked as the “when real people depend on this” chapter — not homework for your first evening. If something is still a placeholder (money hooks, lead forms, pricing that always says “check the official site”), we say so. Readers can smell bluff. Better to be slightly under-confident than full of it.
8 · The “wrong folder” scare (and why Git matters)
Here’s a lesson I want every beginner to hear before they learn it the hard way. If you open an AI coding agent in the wrong directory, it will cheerfully edit whatever project is under that path. Wrong site. Wrong files. Very polite, very thorough, very not what you meant. Neon Grid ending up on the educational site was actually welcome — but the broader point stands. Always look at the folder path before you say “go.” Keep the project in Git so “undo” is a real word, not a prayer. Agents are fast juniors. They are not psychic about which website you thought you had open.
From mega prompt to v1.2 — it didn’t stop at “ship the scaffold”
If you only read the construction story, you’d think the job ended when Astro built and FTP worked. It didn’t. The original briefs and the “MEGA SUPER ELITE” prompt sketched a full pillar site — tools, prompts, projects, production, Australia, legal, the lot. Useful bones. What they didn’t fully know yet was how a confused beginner actually walks in the door on a Tuesday night.
So the site kept evolving. Hard. Home stopped being a brochure of every door and became a pre-intro: How do I start with AI?, the money trap up front, then a path board. A sticky guide bar on the learning steps. Menu as destinations, not a numbered homework list. Lab, Projects, and Prompts stopped competing as three equal “homes” and became a practice family: try → build next → paste shelf. Production stayed the later chapter. Glossary weighted so essentials float. Copy got calmer. Version in the footer today sits around v1.2 — not because marketing needed a number, but because the product shape changed enough to deserve one.
That’s the part that mattered most after “it builds.” Not the stack. The job: help people use AI coding tools without burning money or confidence on night one. vibecoding.au just tries to do that job. The rewrites after the mega prompt were how it got there.
How the guide is meant to work (v1.2 shape)
The healthy path is deliberately a bit boring. That’s the point. Excitement is what burns the credits.
| Stage | Where | What it’s for |
|---|---|---|
| 0 · Before step one | Home | The question, the money trap, the path board — then go to step 1 |
| 1 | What is vibe coding? | Get the idea in plain English |
| 2 | Pick a tool | One tool for this session — not seven tabs of FOMO |
| 3 | First session | A short, doable first build |
| 4 | Prompt lab | Practice challenges and human scores |
| 5 · later | Production | Real users, data, money — the 80% wall |
Who it’s for
Complete beginners. Founders who want a clickable demo without hiring a team yet. Hobbyists. Developers who want AI speed without silent disasters.
Who it’s not for
Anyone hunting “get rich with AI” fairy tales. People who need official vendor support (use the tool maker’s help desk). Anyone treating a free guide like a security audit or a lawyer.
Path matcher
You pick rough skill, goal, and constraints. It points at a sensible next path. Suggestions, not commandments. You’re still the adult in the room.
Three-layer prompts
Context (who you are) + Scope (what to build) + Constraints (what not to do). Vague prompts wander. Layered ones give the model less room to invent a mess.
One more bit that confuses people: Lab, Projects, and Prompts are not three competing “homes.” Lab is practice. Projects is “build next.” Prompts is the paste shelf. Production is the differentiator versus “look what the AI spat out” blogs — the place you go when someone outside your head depends on the thing.
Games as teaching tools
Why put games on a “serious” guide? Because a score you can see beats a lecture you forget.
- Instant feedback — you click; it works or it doesn’t. No polite silence.
- Low shame — a rubbish high score hurts less than a broken login for imaginary customers.
- Real ideas under the hood — game loops, state, input buffering, collisions, difficulty ramps. Same bones as “proper” apps, smaller blast radius.
Sky Dash
Endless flyer energy — pipes, flapping, best score, works on a phone. Magpie-ish simple shapes, our own name, no nicked mascots. There’s a one-shot prompt so learners can rebuild something in that genre without copying a famous commercial game.
Neon Grid
Snake on a dark grid: walls kill you, speed creeps up, pause and restart, optional on-screen pad for thumbs. I preferred this one after playing both — feel and teaching value. Still: if you rebuild it from a prompt, play it yourself before you call it done.
Same lesson as Slice Balloon
On this personal site, Slice Balloon reminded me (again) that AI can scaffold a game frighteningly fast — and still invent a bug you only catch by playing. The vibecoding.au game prompts and demos exist so beginners feel that truth early, with lower stakes than a fake SaaS login full of pretend customers.
Later I may put Neon Grid in the Fun section here too. Until then, the proper playable demos live on vibecoding.au.
What still isn’t “done”
v1.2 is a soft-launch shape, not a finished school. Honesty beats fake polish every day of the week.
- Not every prompt has a shiny pre-built demo sitting next to it.
- Affiliates, ads, and analytics are still partly “hook ready” / waiting on real accounts and approvals.
- A lead form can look fine before the mailing list backend is exciting.
- Tool pricing always says check the official site — we refuse to publish numbers that go stale in a month.
- Home page and path copy will keep getting calmer as real beginners walk through and get lost in weird places.
- Content keeps getting fatter from real tests — pass, partial, fail — where we’ve actually run the prompt.
- It’s a solid first guide for people who are stuck at “I wouldn’t know where to start” — not a multi-week course or a personal coach. Night one is still where most people fall over, so that’s the bar that matters first.
The line to remember
Steer · sandbox · score · then scale. Production is later — when real users show up — not homework for the first evening. If someone does home plus the first few path steps and leaves knowing where to start, the site did its job.
How you can try the same approach
- Read the primer and glossary on vibecoding.au so the words stop being fog.
- Play Neon Grid or Sky Dash — feel a finished small loop before you invent a giant multi-user app on night one.
- Copy one prompt into Grok Build (or another tool) in a fresh empty folder — not the only copy of your live website.
- Use the testing write-up — how to test prompts — before you trust the output with anything you care about.
- Stop accepting mystery changes — if you don’t understand a diff, ask for a smaller one or hit reject. “I don’t know what this did” is a valid stop sign.
- When real users appear, open the production path. That’s the 80% wall. Plan for it — don’t skip past it because the demo looked good.
Deploy (boring on purpose)
From the project: cd site, then npm run build. Upload the contents of site/dist/ to the host web root over FTP. Same mental model as this blog on VentraIP. No WordPress. No mystery plugin update at 2am. Just files that either load or they don’t.
Credits and independence
vibecoding.au is an independent educational resource by Ian Piggott. It is not affiliated with xAI, Lovable, Cursor, Anthropic, OpenAI, Replit, Vercel, or any tool maker or AI lab. Tool pages exist to explain fit and risk — not to pretend partnership or official blessing.
- Site: https://vibecoding.au
- Contact: via the contact page (click-to-reveal)
- Author: Ian Piggott · built with Grok Build help · human directed
- Stack: Astro
If you’re learning AI coding in 2026, speed is the easy bit. The hard bit is still judgment: smaller goals, clearer prompts, sandboxes, and knowing when a pretty demo is not yet a product. That’s what vibecoding.au is for — a learning portal that grew from a bloated build prompt into a path people can walk, with genuine information ahead of the victory lap.