Vibe Coding for PMs

A step-by-step guide to building your first app using AI-powered development. No prior coding experience required.

Part 1

Setting Up Your Tools

Before you can vibe code, you need a few tools installed. Follow these steps carefully and you'll be ready in under 30 minutes.

Install Homebrew

Homebrew is the "App Store for the Terminal." It makes installing things like Git, Claude Code, Node.js, and Python much cleaner.

Paste this into your Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

It'll ask you to enter your password. Enter your computer password (if you are the Administrator).

Click Enter/Return to start the downloading process.

You will get a message with "Installation Successful!" and next steps.

Next Steps (this part is crucial for a successful install). On modern Macs, Homebrew usually requires two or three extra commands to actually "activate" it. These will be listed under a section called Next Steps.

How to do it correctly:

1. Copy the first two lines starting with echo and paste them into your terminal, then hit Enter.

2. Copy the third line starting with eval and paste it, then hit Enter.

Note: Don't ignore these! Without running those lines, the brew command won't work in the next step.

The final confirmation — run this to make sure everything is connected properly:

brew doctor

If it says "Your system is ready to brew," you are officially done with the hardest part! Any other messages are usually just "housekeeping" suggestions you can ignore.

Install Git

Why Git matters for Vibe Coding

Think of Git as the "Save Game" system for your code.

Commit: Saving a snapshot of your progress.
Branch: Creating a "sandbox" to try a crazy idea without breaking your main app.
Push: Sending your code to the internet (GitHub/Vercel) so your app goes live.

Install Git using Homebrew:

brew install git

Verification — run this test:

git --version

Introduce yourself to Git — replace the placeholder text with your own info:

a. User Name (e.g., Jane Doe):

git config --global user.name "Your Name"

b. User Email:

git config --global user.email "yourname@example.com"

Note: If you plan to use GitHub (recommended), use the same email for both. This allows GitHub to correctly link your local work to your online profile.

How to Check if it Worked — the above commands don't return anything in your terminal, so don't panic! Run this to verify Git "remembered" you:

git config --list

You should see your name and email listed in the output.

Install Node.js

Node.js is the runtime environment that allows your computer to execute JavaScript outside of a web browser — required for most modern development tools.

Install Node.js using Homebrew:

brew install node

Verification:

node -v

Should show a version like v20.x.x or higher — it might take a few seconds to appear.

Install GitHub CLI

The GitHub CLI (gh) is the tool that lets your terminal securely "talk" to your GitHub account without needing a password every time.

Go to GitHub.com and create a free account if you don't have one already.

Vibe Tip: Use the same email address you used when you introduced yourself to Git in Step 2. This ensures your local "vibes" and your online profile match up perfectly.

Install GitHub CLI with Homebrew:

brew install gh

Kick off the Authentication Process:

gh auth login

Recommended Settings:

What account? GitHub.com
Preferred protocol? HTTPS
Authenticate Git? Yes
How to authenticate? Login with a web browser — then follow the steps to grant permission.

Install Vercel CLI (Optional)

The Vercel CLI is the "remote control" for your website, allowing you to deploy code directly from your terminal to the internet. Only needed if you plan on shipping online.

Install with npm:

npm install -g vercel

The Handshake (Authentication):

vercel login

The Process:

Choose your preferred login method (usually GitHub to match your other accounts).
This will open a browser tab where you simply click "Authorize" to link your Mac to your Vercel account.

Install Claude Code

The official Claude CLI. This tool lets you "vibe code" by giving natural language instructions directly to an agent that can edit your files.

Note: If you already have the Claude app downloaded, skip sub-step 1 and just verify with the command in sub-step 2.

Run this command:

npm install -g @anthropic-ai/claude-code

You'll see a "funding" message — safely ignore it.

Note: If you get a "permission denied" error, type sudo before the command and enter your Mac password. When you type your password after 'sudo', you won't see any stars or dots — just keep typing and hit Enter.

Verification:

claude --version

Part 2

Setting Your Project

Now that your tools are ready, create a dedicated home for your app on your Mac.

Create Your Project Folder

Run these two commands one at a time:

a. Create the folder:

mkdir my-final-project

b. Go into the folder:

cd my-final-project

Note: These commands don't return any output in your terminal — that's completely normal!

Verification (optional)

To verify that your project folder was created and that you are currently "inside" it:

Check Your Current Location:

pwd

Stands for "Print Working Directory." The result should end in /my-final-project.

List the Contents:

ls -a

If you just ran mkdir, you'll only see . and ... Once Claude initializes the project you'll see package.json, app/, and more.

Vibe Tip: If you ever get lost in the terminal, type cd ~/my-final-project to jump straight back to your app's home base.

Part 3

Claude Code Onboarding

Let's get Claude Code set up and connected to your account.

Launch Claude Code

Type the command to start your session:

claude

You are officially in! The screen you're seeing is the Claude Code onboarding — it's asking you to pick a visual theme for your terminal.

Vibe Tip: You can usually just hit Enter to accept the defaults.

Select Your Theme

Since "Dark Mode" has the little green checkmark next to it, just hit Enter to accept it. If you prefer light mode, use your arrow keys to move the selection before hitting Enter.

Complete the Onboarding

You will now see a screen to choose how you will be using Claude Code:

Select login method:

› 1. Claude account with subscription · Pro, Max, Team, or Enterprise

2. Anthropic Console account · API usage billing

3. 3rd-party platform · Amazon Bedrock, Microsoft Foundry, or Vertex AI

Select Option 1: "Claude account with subscription"

Why: If you already pay $20/month for Claude Pro, this is included — no extra billing.
What happens: When you hit Enter, your terminal will generate a unique login link or open your browser. You'll just need to click Authorize to link your terminal to your Claude account.

Claude Terminal Setup

You will get a few security screens — just hit Enter. Then you will get to a terminal setup screen asking about recommended settings. Hit Enter to select "Yes, use recommended settings."

It will then make you verify your project. Hit Enter for "Yes, I trust this folder."

Part 4

Start Vibe Coding!

Once you get past those intro screens, you'll see a prompt that looks like >. This is where the magic happens.

Initializing Prompt

Once inside the Claude session, the first "vibe" prompt to run is:

Your First Vibe Prompt

"Initialize a new Next.js project in this folder using Tailwind CSS and TypeScript. Create a CLAUDE.md file to track our project's rules and progress."

What "Initializing" Actually Does

Next.js Setup: Claude downloads a framework that handles the "plumbing" of your app (routing, performance, server logic) so you don't have to build it from scratch.
Tailwind CSS: Installs a styling engine that lets you design by "describing" elements (e.g., "make this button rounded and blue") rather than writing complex style sheets.
TypeScript: Sets up a "spell-check" for your code that catches errors before you even run the app.
CLAUDE.md: A special file where Claude stores "memory" about your project goals and rules.

What to Watch For

Claude will start "thinking" and you'll see it automatically running commands to install all the "lego blocks" for your app. It might ask for your permission to run certain commands — just type y or hit Enter to let it proceed.

Start Your Dev Server

To actually see the app on your computer, you need to start the "dev server." This turns your folder of code into a live website that only you can see for now.

Type this into the prompt (or just hit Enter if it's already pre-filled):

npm run dev

You might have to confirm to proceed. Just hit Enter.

Look for a URL: Once it runs, you will see a line that says something like ready - started server on http://localhost:3000.

Open your browser: Copy that http://localhost:3000 link and paste it into Chrome or Safari. You should see the default Next.js welcome page.

Tell Claude What to Build!

Just type in the command line a description of what you want to build. For example, here's a prompt for a personal habit tracker as your first project:

The "MVP" Habit Tracker Prompt

"I want to build a simple Personal Habit Tracker as my MVP. Please update the main page (app/page.tsx) to include: 1. A Header: A clean title that says 'My Daily Habits'. 2. An Input Field: A text box where I can type a new habit and an 'Add' button. 3. A Habit List: A vertical list of habits. Each habit should have a checkbox to mark it as 'Done' for the day and a 'Delete' icon. 4. Styling: Use a modern, minimalist design with plenty of white space and a soft blue primary color for the buttons."

Why this works for a first prompt:

It defines the "CRUD" logic: You are asking for Create (Add button), Read (The List), and Delete (Trash icon) right away.
It targets specific files: By mentioning app/page.tsx, you're helping Claude know exactly where the "front door" of your app is.
It uses "Vibe" language: Instead of writing CSS code, you are describing the "look and feel" (minimalist, white space, soft blue).

Once Claude writes the code, go back to your browser at http://localhost:3000. You should see your habit tracker live! If it looks good, your next prompt can be: "Now, make it so that when I refresh the page, my habits are still there." (This introduces the concept of Local Storage).

Brainstorming: When you don't know what to build yet

This is the perfect moment to shift from Engineer Mode back into Product Mode. Now that your "plumbing" is done, you need to decide what to build on top of it.

The "Problem-First" Framework

Instead of trying to think of a "world-changing" app, look for a micro-frustration in your daily life.

Avoid (too complex for first projects)

Social Networks
Real-time Marketplaces
Multi-user platforms

Sweet Spot: Single-Purpose Tools

Personal habit tracker
Calculator for work metrics
Simple resource directory

Leverage Claude (or Gemini) for Brainstorming

If you don't know yet what you want to build, take the time to do a little brainstorming session. You can use the claude > prompt you are already in to help you brainstorm:

Brainstorming Prompt

"I have my environment set up, but I'm not sure what to build yet. I am a [Your Role/Interest]. Can you suggest 3 simple 'Starter Projects' that would help me learn how to handle user input and display data?"

Workflow for Saving Claude Tokens

Note: At this stage it is very unlikely you could hit the daily token limit.

1. Brainstorm & Plan: Use Gemini for initial ideation, high-level architecture planning, and pseudo-code generation.
2. Context Building: Use Gemini to summarize large codebases or find relevant parts.
3. Execute: Feed the refined, high-level plan into Claude to generate actual code.
4. Use Claude Wisely: Use /clear to reset the session when moving to a new task to stop accumulated chat history from consuming tokens.
5. Use Haiku for Simple Tasks: If you have Claude Pro, use Claude Haiku for minor tasks, documentation, or basic code adjustments.

Restricting Claude to coding and using Gemini for brainstorming can extend usage limits.

The "CRUD" North Star

Almost every successful consumer app is just a variation of CRUD. If your idea lets you do these four things, it's a great "technical" project:

CCreate

Adding data

e.g., a "New Task" button

RRead

Seeing data

e.g., a "List of Tasks"

UUpdate

Changing data

e.g., "Edit Task"

DDelete

Removing data

e.g., a Trash icon

Part 5

Shipping to the World

To launch your website so the world can see it, you need to move your code from your local computer to a professional server and give it a "home address" (a domain).

Create Your "Cloud Storage" (GitHub)

Your code needs to live in a GitHub Repository.

Sign Up: Go to GitHub.com and create a free account if you don't have one already.

Create a Repository: Click the "+" icon in the top-right and select "New repository."

1. General Settings

Name: Give it a name (e.g., my-vibe-project).
Description: Have Claude or Gemini write a description for you based on what you are building.

2. Configuration (The "Clean Slate" Strategy)

Since you already have a working project folder built by Claude Code, the most important step here is what NOT to check.

Public vs. Private: Leave as Public only if you want others to see your code, otherwise make it Private.
Add README: Leave Unchecked (Off). Your local project already has a README.
Add .gitignore: Leave as "None". Claude Code already created a .gitignore file for you.
Add license: Leave as "None" for now.

Click the green "Create repository" button.

Push your repository: GitHub will show you a "Quick Setup" page. Look for the section titled "…or push an existing repository from the command line." Run these commands one at a time:

git remote add origin https://github.com/[your-username]/[your-project-name].git

git branch -M main

git push -u origin main

Deploy to the Web (Vercel)

Vercel is the gold standard for hosting Next.js apps. It will turn your GitHub code into a real website.

Sign Up: Go to Vercel.com and click "Sign Up." Select Continue with GitHub — it will automatically link your accounts.

Import Git Repository: You will see an "Install" button. Follow the steps. Choose "All Repositories" (this will make it easier in the future to deploy additional projects).

Import Project: You will now see a list of your GitHub repositories. Click "Import" next to the repo you just created.

Project Name: Ensure it matches your GitHub repository name.
Environment Variables: Leave this blank for now.
The "Deploy" Button: Vercel knows this is a Next.js app. Just click "Deploy."
Success: In about 60 seconds, you'll see fireworks! Vercel will give you a link like my-project.vercel.app.

IMPORTANT: Connect your Vercel project to your local project.

a. Open a new tab in your terminal (Cmd + T)
b. Type vercel link and hit Enter.
c. It will ask: "Set up '~/your-folder-path'?" Choose Y.
d. Select your personal project scope.
e. When asked "Link to existing project?", type Y.
f. When asked "Which existing project?", select your new project.
g. When asked "Would you like to pull environment variables now?", type Y.

Note: This creates a hidden .env.local file on your Mac so your local version and the live version share the same settings (like AI API keys).

You've successfully linked your local folder to your official production project!

Add a Custom Domain (Optional — CloudFlare)

By default, Vercel gives you a name like my-project.vercel.app. To make it professional, purchase a domain from Cloudflare Registrar (lowest price and best security).

Add your Domain to Vercel:

In Vercel: Go to your project → click Domains → click Add Existing (top right).
Type in your primary domain (e.g., codingwithvibesonly.com).
Vercel will ask if you want to add the www version too. Choose the recommended option to add both and redirect one to the other.
Ensure Production is selected in the environment dropdown.

Get the "Technical Coordinates":

Vercel will show "Invalid Configuration" in red — this is normal! It will display two records to copy:

A Record: A string of numbers (usually 76.76.21.21).
CNAME Record: A value like cname.vercel-dns.com.

Connect the Wires (DNS Setup):

Automated way (recommended): Click "Configure Automatically" — it will open your Cloudflare page. Click Authorize.

Manual way: Go to Cloudflare DNS Management and paste the values from Vercel:

Set the A Record (Host: @) to point to the Vercel IP.
Set the CNAME Record (Host: www) to point to the Vercel CNAME value.

The Final "Vibe Check":

Go back to your Vercel tab and hit Refresh next to your domain. When the "Invalid Configuration" turns into a green "Valid Configuration" checkmark, your site is officially live!

Vibe Tip: DNS changes are the only part of coding that isn't instant. It can take anywhere from a few minutes to a few hours for the "internet's phonebook" to update. If it doesn't work immediately, grab a coffee and check back in 15 minutes!

The "Daily Standup" Routine

When you're ready to pick up where you left off, your terminal won't automatically be in your project folder. You need to "re-enter" your workspace and wake up your tools. Follow these three steps:

Jump Back into Your Project Folder

The terminal always starts at your computer's "home" base. To work on your app, you must move the terminal's focus back to your specific project.

cd my-final-project

Vibe Tip: If you aren't sure where you are, type pwd (Print Working Directory) to see your current location. It should end in /my-final-project.

Wake Up Your AI Partner

Once your terminal is inside the correct folder, re-launch your AI session so Claude can see your files again.

claude

Claude will immediately scan your folder and read your CLAUDE.md file to remember exactly what you were building and what rules you established.

Start Your Local Preview

If you want to see your website in the browser, restart the engine that powers your local preview.

npm run dev

Open your browser and go to http://localhost:3000. Your app is now live on your machine again!

Updates

To ensure your live website reflects your latest changes, you need to "push" your code from your local Mac to GitHub. Because you have set up Vercel to watch your repository, simply updating GitHub will trigger the live website to update automatically.

Save and Push Your Changes

Open your terminal, ensure you are in your project folder, and run these three commands in order:

Stage your changes (tells Git which files to save):

git add .

Commit your changes (creates a save point with a description):

git commit -m "Update the dashboard and fix the header"

Push to the Cloud (sends your work to GitHub):

git push origin main

The "Automatic" Handshake

Once you run the push command, you don't need to do anything else for the website itself:

GitHub receives your new code.
Vercel detects that your GitHub repository was updated.
Vercel automatically starts a new "Build" and updates your site within about 60 seconds.

How to Verify It Worked:

Check Vercel: Log into your Vercel dashboard and you will see a loading bar on your project card indicating a new deployment is in progress.
Visit Your Site: Open your website in your browser. If the changes aren't there yet, wait a minute and refresh.

Vibe Tip: If your changes don't appear immediately, remember that "internet phonebooks" (DNS) can sometimes take a few minutes to catch up — though with Vercel, it is usually nearly instant!

Vibe Coding for PMs — You've got this!