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.

1

Install Homebrew

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

1
Paste this into your Terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2
Enter your computer password when prompted (you are the Administrator).
3
Click Enter/Return to start the downloading process.
4
You will see "Installation Successful!" and then a Next Steps section.
5

Run the Next Steps commands! Copy and paste the two echo lines first, then the eval line. These activate Homebrew.

Note: Don't skip this! Without running those lines, the brew command won't work in the next step.
6
Final confirmation — run this to verify everything works:
brew doctor

If it says "Your system is ready to brew," you're done with the hardest part!

2

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.
1
Install Git using Homebrew:
brew install git
2
Verify the installation:
git --version
3

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

a. Set your name:

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

b. Set your email:

git config --global user.email "yourname@example.com"
Note: If you plan to use GitHub, use the same email for both. This allows GitHub to correctly link your local work to your online profile.
4
Verify Git remembered you (you should see your name and email):
git config --list
3

Install Node.js

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

1
Install Node.js using Homebrew:
brew install node
2
Verify the installation:
node -v

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

4

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.
1
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.
2
Verify the installation:
claude --version

Part 2

Setting Your Project

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

1

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!
2

Verification (optional)

To confirm your project folder was created and you're inside it:

1
Check your current location:
pwd

The result should end in /my-final-project.

2
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.

1

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.
2

Select Your Theme

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

3

Complete the Onboarding

You'll see a screen to choose how you'll use 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: Your terminal generates a login link. Click Authorize in your browser to link the terminal to your Claude account.
4

Terminal Setup & First Prompt

You'll get a few security screens — hit Enter through them. When asked about terminal setup, select "Yes, use recommended settings." When asked to verify your project, hit Enter for "Yes, I trust this folder."

Once past the intro screens you'll see a > prompt. This is where the magic happens! Use this first prompt to initialize your project:

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: Downloads a framework that handles "plumbing" (routing, performance, server logic) so you don't build it from scratch.
  • Tailwind CSS: Installs a styling engine that lets you design by describing elements ("make this button rounded and blue") rather than writing CSS.
  • TypeScript: Sets up a "spell-check" for your code that catches errors before you run the app.
  • CLAUDE.md: A special file where Claude stores "memory" about your project goals and rules.

Start your dev server

To see the app live on your computer:

npm run dev

Once it runs, open http://localhost:3000 in Chrome or Safari. You should see the default Next.js welcome page.

Part 4

Idea Lab: Brainstorming What to Build

Now that your "plumbing" is done, shift from Engineer Mode back into Product Mode. Time to decide what to build.

1

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
2

Leverage Claude for Brainstorming

Not sure what to build? Use the claude > prompt to brainstorm. Try this:

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

  1. 1. Brainstorm & Plan: Use Gemini for initial ideation, architecture planning, and pseudo-code.
  2. 2. Context Building: Use Gemini to summarize large codebases or find relevant parts.
  3. 3. Execute: Feed the refined plan into Claude to generate actual code.
  4. 4. Use Claude Wisely: Use /clear to reset the session when moving to a new task.
  5. 5. Use Haiku for Simple Tasks: Use Claude Haiku for minor tasks, documentation, or basic adjustments.
3

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

Example: 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."

Vibe Coding for PMs — You've got this!