All about the Vibes

I'd never written a line of production code before 2024. I'd spent 25 years in boardrooms, not terminals. If you'd told me I'd be shipping software 14 months later, I'd have laughed.

But here we are. And the thing that gets lost in all the breathless AI hype is how approachable this actually is, if you start with the right foundations.

This is the guide I wish I'd had on that first weekend. Not the enterprise-grade engineering stuff (that comes later, and I've written about it separately). This is about going from "I have an idea" to "I built a working thing" in a few hours, without knowing how to code.

Before we get into any of the detail below, the single most important thing to know is this: if you get stuck, confused, or don't understand something, just ask the AI.

That's it. That's the whole trick.

Don't understand what a terminal is? Ask. Don't know what an error message means? Paste it in and ask. Not sure which tool to use? Ask. Forgot a step? Ask. Want someone to walk you through this entire guide interactively? Copy and paste this article into Claude or ChatGPT and say: "Can you help me get this going please?"

The AI will walk you through it step by step, at your pace, answering every question along the way. It won't judge you for not knowing what npm is. It won't get impatient when you ask the same thing twice. It's the most patient teacher you've ever had.

This applies at every stage of the process. When you're planning, ask for advice. When you're building, ask it to explain what it just did. When something breaks, ask it to fix it and explain what went wrong. When you're not sure if your approach makes sense, ask it to critique your plan.

The people who struggle with vibe coding aren't the ones who lack technical knowledge. They're the ones who don't ask enough questions.

Now, the fastest path.

Before we get into IDEs, extensions, and proper project setup, there's something most guides skip: you might not need any of that yet.

If your idea is a single-feature tool with no database, no user accounts, and no need to remember anything between sessions, you can build it right now inside the AI you're already using. No setup. No downloads. No terminal.

Claude can create what Anthropic calls "artifacts" — fully working interactive applications rendered right in the chat window. These are single-page HTML files that can include JavaScript, CSS, styling, and even call AI features. You describe what you want, Claude builds it, and you can see it, use it, and share it via a link. All inside your existing Claude account.

ChatGPT does essentially the same thing with its canvas feature. Describe what you want, it builds a working version, you interact with it directly.

The process is simple: describe what you want, see the result, give feedback, and let it iterate. Each version gets better. You can go back and forth five, ten, twenty times until it does exactly what you need. This is multi-shot prompting in action — you're not trying to get it perfect in one go, you're shaping it through conversation.

A few examples of what works brilliantly this way:

A budget calculator. "Build me an interactive monthly budget calculator. I want to enter my income at the top, then add expense categories with amounts. Show me a running total, how much I have left, and a simple pie chart of where the money goes." Five minutes of prompting and a couple of rounds of feedback and you've got a working tool you can use immediately.

A quiz for your kids. "Create a French vocabulary quiz for a 14-year-old studying GCSE French. Use the topic of 'daily routine'. Show the French word, let them type the English translation, give immediate feedback, and track their score. Make it colourful and encouraging." This is exactly how my own journey started — building a learning tool for my daughter.

A decision matrix. "Build an interactive decision matrix tool. I want to enter options across the top and criteria down the side, weight each criterion from 1-5, score each option against each criterion, and see a weighted total that ranks them. I'm choosing between three job offers." Useful, shareable, and took zero setup.

An interactive presentation. "Create a one-page interactive explainer about how carbon credits work. Use tabs or accordion sections for different topics. Include a simple calculator that estimates a household's carbon footprint based on a few inputs." Something that would take hours in PowerPoint, built in minutes.

Each of these can be shared via a simple link. No hosting, no deployment, no Git.

When to stay here: Your idea is self-contained, doesn't need to store data between sessions, doesn't need user accounts, and is fundamentally one screen doing one job.

When to move on: You need a database. You need users to log in. You need multiple pages. You need it to talk to external services. You need it to scale beyond a prototype. That's when you need the rest of this guide.

Think of the artifact/canvas approach as your napkin sketch. You can validate an idea in 10 minutes and show it to someone in 15. If the idea has legs, you graduate to proper vibe coding with the foundations below. If it doesn't, you've lost 10 minutes instead of a weekend.

Here's an example of what Claude did with the following prompt;

"give me a super creative detailed prompt, that will create an ai-powered artefact that I can share, in html or such, so it can be played as a game. think through the most cool epic version you could possible come up with. go online to check your capabilities."

and then just "make it more epic looking with cooler features" as feedback, to get to this v2. Not at all my advice on how to create something specific!

(this is how it responded to my second prompt: "Let me go all-in on this. I'm going to add cinematic transitions, a suspect pressure system, a detective notebook, visual mood indicators, film grain effects, an evidence connection board, question limits for tension, and a detective rating system.")

Noir Detective Game

Step 1: Know What Problem You're Solving

This sounds obvious. It isn't.

The biggest mistake people make with vibe coding isn't a technical one. It's starting to build before they've figured out what they're building and why. AI tools are so responsive that it's tempting to just start prompting and see what happens. You'll end up with something, but it probably won't be the right something.

There are really two starting points:

Personal need. You want something that makes your life more efficient or more effective. A tool that saves you time. A dashboard that organises your chaos. A game for your kids. A heating controller that talks to your smart home. These are great first projects because you are the user, so you know exactly what "good" looks like.

Market need. You've spotted a gap. Something that should exist but doesn't, or exists but is terrible. If this is your starting point, you need to do a bit more homework first. Research what's already out there. Understand the competitive landscape. Talk to potential users. This doesn't need to take weeks. A couple of hours with a deep research tool (ChatGPT, Gemini, Perplexity, Claude) will give you a solid picture of what exists, what's missing, and where your idea fits.

Either way, you need clarity on the "job to be done" before you touch any tools.

Step 2: Create a Project Requirements Document (By Talking)

This is the step that separates "I had a go at vibe coding" from "I actually built something useful." You need a document that describes what you're building. In the professional world, this is called a PRD (Project Requirements Document). Don't let the jargon put you off. It's just a structured description of your project.

Here's the trick: you don't have to write it. You can talk it.

Open ChatGPT, Claude, or Gemini in voice mode. Say something like:

"I want to create a project requirements document for an app. Can you give me 10 questions I should answer to create a really good one?"

The AI will give you questions like: Who is this for? What's the core problem it solves? What are the must-have features versus nice-to-haves? What does success look like?

Then just talk through your answers. Ramble. Think out loud. The models are remarkably good at taking your stream of consciousness and turning it into structure. If you're not sure about something, say so. Ask the AI for suggestions and best practices.

When you're done, ask it to create a clean document. This becomes your source of truth: the scope, the features, the priorities, the constraints. Everything your AI coding tools need to actually build the right thing.

A good PRD typically covers:

The problem you're solving and who it's for
Core features (the must-haves for a first version)
Nice-to-haves (things to add later, not now)
User flows (what does the user actually do, step by step?)
Technical constraints (does it need to work on mobile? does it need to store data?)
What success looks like (how will you know it works?)

Spend 30 minutes on this. It will save you hours of going in circles later.

Step 3: Set Up Your Toolkit

You need four things. Some are free, some need a paid subscription. Here's the minimum:

An AI assistant for thinking and planning

You likely already have this. ChatGPT, Claude, or Gemini. Use it for brainstorming, creating your PRD, and strategic decisions. Voice mode is genuinely useful for the planning phase because talking is faster than typing when you're working through ideas.

A code editor (IDE)

An IDE (Integrated Development Environment) is where your code lives as actual files and folders. Think of it like Microsoft Word, but for code. The most popular option is VS Code (free, from Microsoft). Download it from code.visualstudio.com. It's where you'll see the files your AI creates, the errors it finds, and the project structure as it grows.

Other options include Cursor (an AI-focused fork of VS Code, so it looks and works almost identically) or browser-based environments like Replit if you want zero setup.

AI coding agents (installed as extensions)

This is where the magic happens. An extension is a plug-in that adds new capabilities to VS Code. Think of it like installing an app on your phone: you search for it, click install, and it just works.

To install an extension in VS Code:

Open VS Code
Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open the Extensions panel
Search for the extension name
Click Install on the official one (check the publisher name to avoid knockoffs)
Restart VS Code if prompted

The two I recommend installing:

Claude Code (by Anthropic). Search for "Claude Code" in Extensions and install the one published by Anthropic. Once installed, a Spark icon appears in your sidebar. Click it to open the Claude Code panel. You'll need to sign in with your Anthropic account. Requires a Claude Pro or Max subscription (from $20/month). Claude Code is excellent at understanding your full project, making multi-file changes, and writing thorough code. It's my primary tool for building features.

Codex (by OpenAI). Search for "Codex" in Extensions and install "Codex — OpenAI's coding agent" published by OpenAI. Once installed, a Codex icon appears in the top-right. Click to open, then sign in with your ChatGPT account. Requires ChatGPT Plus, Pro, or Business subscription ($20/month and up). Codex is strong at big engineering tasks, complex reasoning, and refactoring.

You can use both. I do. Different tools for different jobs. Claude Code for daily feature building, Codex for heavy engineering lifts.

The basic alternative? You can copy code between ChatGPT's chat and files on your computer. It works, but it's slow and error-prone. A proper coding agent inside your IDE saves enormous amounts of time because it can see your full project, run commands, and iterate automatically.

Version control (Git + GitHub)

Think of this as "save points" for your project. Every time you make a set of changes that work, you commit them. If something breaks later, you can go back to the last working version.

Set up a free account at github.com. Your AI coding agent can help you with the Git commands. You don't need to memorise them. Just commit regularly. I commit after every meaningful change. It's your safety net.

Step 4: Understand the Key Concepts

Before you start building, there are a handful of concepts that will make everything else make sense. You don't need to master these. You just need to know they exist and roughly what they do.

Development vs Production

Development (or "dev") is your local workspace. It's where you build and test things on your own computer. Nobody else can see it. You can break things freely.

Production is the live version that real users see. It's deployed on a hosting service (more on that in Step 7). The goal is: build in dev, test it until it works, then push to production. Never experiment directly in production.

Key commands

Your project runs on a tool called a package manager. The three main ones are npm, pnpm, and yarn. They all do essentially the same thing, just slightly differently. Your AI agent will recommend one when it sets up your project. Here are the commands you'll use constantly (shown for pnpm, but npm and yarn equivalents are nearly identical):

pnpm install — downloads all the packages (libraries of code) your project needs. Run this when you first set up, or whenever someone adds a new dependency. Think of it as "get all the ingredients before you start cooking."
pnpm dev — starts your project in development mode. Opens it in your browser so you can see it live, and auto-refreshes when you make changes. This is the command you'll run most often.
pnpm build — compiles your project into a production-ready version. Optimises and bundles everything. Run this before deploying.
pnpm test — runs your automated tests to check nothing is broken.
pnpm lint — checks your code for style and quality issues.

Your AI agent can run all of these for you. But knowing what each does helps you understand what's happening when the agent says "running build" or "dev server started."

package.json — your project's manifest

Every project has a file called package.json at its root. It's essentially a manifest that lists everything about your project: its name, what packages it depends on, and what commands are available.

Packages (also called dependencies or libraries) are pre-built blocks of code that give your project specific capabilities. Need to talk to a database? There's a package for that. Need to format dates? There's a package for that. Need to send emails? Package. Instead of building everything from scratch, you use packages that thousands of other developers have already built and tested.

When you ask your AI agent to add a new capability, it will often suggest installing a package. For example: "I'll install mongoose for MongoDB database access." It handles the installation automatically.

A good practice: when your agent suggests a package, ask it why that specific one, and whether there are alternatives that better fit your architecture. AI agents will sometimes default to what's most popular rather than what's most appropriate.

tsconfig.json — your TypeScript settings

If you're using TypeScript (and you should — more on that in Step 5), there's a file called tsconfig.json that controls how strict the language checking is. The key setting is "strict": true, which catches many common errors before they become bugs. Your AI agent will set this up, but it's worth knowing it exists so when the agent mentions "TypeScript errors" you understand that's a good thing: it caught a problem before your users did.

Step 5: Set Up Guardrails Before You Build

This is where most vibe coding guides skip ahead to "start prompting!" That's a mistake. Ten minutes of setup here prevents hours of pain later.

Ask your AI coding agent to set up the following in your project:

TypeScript in strict mode. TypeScript is like JavaScript but with safety rails. Strict mode catches errors before they happen. You won't understand all the error messages at first, but your AI agent will, and it can fix them.

A test framework. Vitest or Jest. These run automated checks on your code. When your AI builds a feature, it should also write tests that prove the feature works. If you change something later and it breaks, the tests catch it.

A linter (ESLint) and formatter (Prettier). ESLint enforces code quality rules. Prettier makes the code consistently formatted. Think of them as a spell-checker and grammar-checker for code.

A CLAUDE.md and/or AGENTS.md file. This is crucial. These are plain text files in the root of your project that your AI agent reads at the start of every session. They contain your project's rules, conventions, and instructions.

CLAUDE.md is read by Claude Code. AGENTS.md is the open standard used by Codex, Cursor, and other tools (Claude Code also reads it as a fallback). Both filenames are fully capitalised.

Include things like:

"Always write tests for new features."
"Use TypeScript strict mode."
"Don't delete existing tests."
Your project's build and test commands
Architecture decisions ("API routes go in /src/api/")

This file is your project's memory. Without it, every new session starts blank and your agent will make the same mistakes you've already corrected. With it, the agent knows your conventions from the first prompt.

You can set all of this up with a single prompt to your AI agent:

"Set up a new TypeScript project with strict mode, Vitest for testing, ESLint, Prettier, and a CLAUDE.md file with sensible defaults for a solo non-coder building a web app."

Two minutes. Done.

Step 6: Build with the Prototype Loop

Now you can start. Point your AI coding agent at your PRD and say something like:

"Read this PRD. Let's start with the first core feature. Propose an approach before writing any code."

That last sentence matters. You want the AI to think before it acts. Review its plan. Does it make sense? Ask questions if it doesn't. Then let it build.

The prototype loop

This is the rhythm that makes vibe coding actually work:

1. Build a thin feature slice. Don't try to build the whole app at once. Pick one feature. Ask your agent to build just that.

2. Test it in the browser. Run pnpm dev (or ask your agent to run it). This starts a local version of your app in your browser. Click around. Does it do what you expected? Does it look right?

3. Feed back what's wrong. Tell your agent what doesn't work. "The button should be on the right." "It's not saving the data." "The colours are wrong." The agent will iterate and create a new version.

4. Let the agent read its own errors. When you run pnpm dev or pnpm build, the development console shows error messages. If you ask your AI agent to build or run your project, it can see these logs directly and fix the issues automatically. This is one of the biggest advantages of using an agent inside your IDE rather than copy-pasting code from a chat window.

5. Commit when it works. Once the feature works as expected, commit it to Git. This is your save point. Then move to the next feature.

Repeat. Feature by feature, commit by commit, your app grows. Each piece is tested and saved before you move on.

Principles learned the hard way

Ask the AI to critique its own work. After it generates code, prompt: "Review the code you just generated for bugs, edge cases, and anything you'd do differently." It often catches issues in review that it missed during generation. Ask it if the code is DRY (do not repeat yourself) and SSoT (single source of truth) to avoid duplicates everywhere (good hexagonal architecture helps that).

Use multiple AI tools for different jobs. I use Claude Code for building features, Codex for big refactors and engineering tasks, and ChatGPT or Claude's chat interface for strategic thinking and creative decisions. Each has different strengths. Experiment and find what works for you.

When something breaks, paste the full error message back. Don't try to interpret it yourself. Give the complete error to your AI agent. It will usually know exactly what went wrong.

Don't let the AI go on a rampage. If it starts suggesting massive rewrites or touching files you didn't ask about, stop it. Be specific about what you want changed and what should be left alone. Your CLAUDE.md or AGENTS.md file can include rules like "never modify files outside the current feature" to help with this.

Step 7: Deploy (Show It to Someone)

You've built something. It runs on your laptop. Now put it on the internet.

Free hosting options:

Vercel — excellent for web apps built with React or Next.js. Connects directly to your GitHub. Every time you push code, it automatically deploys. Free tier is generous.
Netlify — similar to Vercel. Good free tier, easy setup, works with many frameworks.
GitHub Pages — simplest option for static sites (no backend/database needed).

Your AI agent can walk you through the deployment process. It's usually a few commands or a few clicks connecting your GitHub repository to the hosting service.

The moment someone else uses something you built is genuinely electric. Ship early. Ship rough. Get feedback.

The Mindset Shift

Vibe coding works because the AI handles the syntax and you handle the thinking. Your job is to be the product person: what should it do, who is it for, what does "good" look like.

If you have domain expertise in anything (and after a career, you do), you have an unfair advantage. You know what problems are worth solving. You know what good looks like in your field. The AI doesn't know that. It just writes code really fast.

As Ethan Mollick observed about his vibefounding students at Wharton: "People with experience in an industry have a huge advantage as they can build solutions that have built-in markets and which solve known hard problems."

Your experience is the moat. AI is the accelerant.

What Comes Next

This guide gets you from zero to "I built something and it's live." That's a big deal.

But if you want to go beyond a weekend project and build something production-grade, the game changes. You need contracts, drift gates, CI pipelines, cost invariants, and all the boring engineering that stops your creation from becoming a house of cards at scale.

I've written about exactly that in the companion piece (link below if you get REALLY serious!)

Trust the vibes to get started. Build the guardrails to go further.

Industrial Enterprise Grade AI Coding: The Non-Coder's Guide to Production →

Vibe-Coding Fundamentals: A Weekend Guide for Non-Coders

The Golden Rule: Just Ask

The 10-Minute Version: Just Use the AI You Already Have

From Here: Building Something Real