The Claude Code Setup Playbook

02

Claude Code

Claude inside VS Code: it reads your files, makes the changes and runs your app.

About 15 minSteps 7 to 150 of 9 done

1. 7

   Step 7 of 34Mark as done: Get Claude Pro

   Get Claude Pro

   Claude Code needs a paid Claude plan: Pro, or higher. The free plan doesn’t include it.

   Open the plans and choose Pro: $20 a month in the US, less if you pay yearly (prices vary by country). Sign up with your email, or log in if you already use Claude.

   See the plansclaude.com/pricing

   Free$0Claude CodePro$20 a monthClaude Code
2. 8

   Step 8 of 34Mark as done: Install Git

   Install Git

   Git saves versions of your project, so you can always go back. Claude uses it for you.

   Mac

   Click in the terminal, paste this (⌘V) and press Enter. A box asks to install the developer tools: click Install, then Agree, then Done when it finishes. It takes a few minutes.

   >git --versionCopy

   The “git” command requires the command line developer tools. Would you like to install the tools now?

   Choose Install to download and install the command line developer tools now.

   CancelInstall

   Windows

   Download Git for Windows and open it. Click Next on every page, then Install. When it’s done, quit VS Code and open it again.

   Download Git for Windowsgit-scm.com/install/windows

   You’ll seeRun git --version in the terminal again: it shows git version and a number.

   Terminal

   you@mac my-first-app % git --version

   git version 2.56.0

   Doesn’t look like this?

   • It showed git version straight away, with no box? You already have Git. On to the next step.
   • No terminal after opening VS Code again? Click Terminal › New Terminal.
3. 9

   Step 9 of 34Mark as done: Install Node.js

   Install Node.js

   The apps Claude builds for you run on Node.js, on your own computer.

   Open the Node.js download page. Skip the box of code at the top: you want the installer button under it.

   Open the Node.js download pagenodejs.org/en/download

   Mac

   Click macOS Installer (.pkg). Open it and click Continue until it’s done. It asks for your Mac’s password: the one you log in with.

   nodejs.org/en/download

   Get Node.js®

   Skip this

   macOS Installer (.pkg)Standalone Binary (.tar.gz)

   Windows

   Click Windows Installer (.msi). Open it, accept the license and click Next until it’s done.

   nodejs.org/en/download

   Get Node.js®

   Skip this

   Windows Installer (.msi)Standalone Binary (.zip)

   Then quit VS Code and open it again, so its terminal finds Node.js.

   You’ll seeRun node -v in the terminal: it shows a version number, starting with v.

   Terminal

   you@mac my-first-app % node -v

   v24.22.1

   Doesn’t look like this?

   • It says node isn’t found? Quit VS Code completely (⌘Q on a Mac) and open it again.
   • No terminal after opening VS Code again? Click Terminal › New Terminal.
4. 10

   Step 10 of 34Mark as done: Add Claude Code to VS Code

   Add Claude Code to VS Code

   This puts Claude inside VS Code, with everything it needs: nothing else to install.

   Click Extensions on the left (the icon of four squares). Search for claude code. On Claude Code for VS Code, by Anthropic, click Install.

   Extensions

   claude code

   Claude Code for VS CodeAnthropicInstall

   Doesn’t look like this?

   • Pick Claude Code for VS Code, by Anthropic. Others with similar names, like Chat for Claude Code, aren’t made by Anthropic.
   • Asked to trust the workspace? Click Trust Workspace & Install.
5. 11

   Step 11 of 34Mark as done: Trust Anthropic

   Trust Anthropic

   VS Code asks the first time you install from a company. Anthropic makes Claude.

   Click Trust Publisher & Install.

   Do you trust the publisher “Anthropic”?

   Anthropic has verified ownership of anthropic.com.

   Trust Publisher & InstallCancel

   You’ll seeClaude Code’s Install button turns into a gear: it’s installed.

6. 12

   Step 12 of 34Mark as done: Open Claude

   Open Claude

   Click ✻ Claude Code at the bottom right of the window.

   Ln 1, Col 1UTF-8✻ Claude Code

   You’ll seeClaude’s panel opens on the right, headed Claude Code.

   Doesn’t look like this?

   • Not there? Quit VS Code and open it again.
   • Still not there? Press ⇧⌘P (Ctrl+Shift+P on Windows), type Claude Code and choose Open in New Tab.
   • VS Code’s own Chat panel is a different AI, GitHub Copilot. Use the one headed Claude Code.
7. 13

   Step 13 of 34Mark as done: Sign in

   Sign in

   Click Claude.ai Subscription. Your browser opens: log in to Claude and allow access. Then come back to VS Code.

   How do you want to log in?

   • Claude.ai SubscriptionUse your Claude Pro, Team, or Enterprise subscription
   • Anthropic Console
   • Bedrock, Foundry, or Vertex

   You’ll seeClaude’s panel shows a box at the bottom for you to type in.

   Doesn’t look like this?

   • It says you need a plan? Your account has to be on Pro (step 7).
   • The browser didn’t open? Click Claude.ai Subscription again.
8. 14

   Step 14 of 34Mark as done: Choose Manual

   Choose Manual

   Claude starts in Auto, where it changes files without asking. In Manual it asks first, so you see each change.

   Click the mode under the box you type in, and choose Manual. Claude remembers it.

   • ManualClaude will ask for approval before making each edit
   • Edit automatically
   • Plan
   • Auto

   Ask Claude anything…Manual ⌄

   Doesn’t look like this?

   • Later, once you trust it, switch to Auto and Claude works without stopping to ask.
9. 15

   Step 15 of 34Mark as done: Tell Claude you’re new

   Tell Claude you’re new

   Your first message. Claude saves it as a file it reads at the start of every chat, so it always explains as it goes.

   Copy this, click in Claude’s box, paste it and press Enter. Claude shows you the file first: click Yes.

   Tell Claude I’m newCopy prompt

   I'm new to coding. Create a CLAUDE.md for this project that says: explain every change in one plain sentence, ask before installing anything, and tell me how to see each change in my browser. Call me [your first name].

   Claude Code

   I'm new to coding. Create a CLAUDE.md for this project that says…

   CLAUDE.md

   1. 1# Working with me
   2. 2I'm new to coding. Call me Maya.
   3. 3- Explain every change in one plain sentence.
   4. 4- Ask before installing anything.

   1. Yes
   2. Yes, allow all edits this session
   3. Tell Claude what to do instead

   You’ll seeCLAUDE.md appears in your files on the left. That’s Claude’s first change.

   Doesn’t look like this?

   • Green lines are what Claude adds. Red lines would be what it takes out.
   • Nothing happened? Press Enter, or click the arrow by the box.

Hit your limit? Your plan resets every five hours, with a weekly limit on top. Type /usage in Claude’s box to see when.

Stuck on the setup? I’ll guide you through it on a 1:1 call.

About 10 minSteps 16 to 210 of 6 done

1. 16

   Step 16 of 34Mark as done: Make a GitHub account

   Make a GitHub account

   GitHub keeps every version of your project online, private and free.

   Sign up with your email, a password and a username. Then verify your email: GitHub sends you an email to confirm it’s you.

   Sign up for GitHubgithub.com/signup

   You’ll seeYou can log in at github.com.

   Doesn’t look like this?

   • Don’t skip verifying your email: GitHub won’t let you publish until you do.
   • No email from GitHub? Check your spam folder.
2. 17

   Step 17 of 34Mark as done: Tell Git who you are

   Tell Git who you are

   Every save is signed with your name, so GitHub knows it’s yours.

   Copy this into Claude’s box, fill in your name and email, and press Enter. Claude asks to run two commands: click Yes for each.

   Tell Git who I amCopy prompt

   Set up Git on this computer with my name, [your name], and my email, [the email you use on GitHub].

   Claude Code

   git config --global user.name "Maya Brown"

   1. Yes
   2. Yes, and don’t ask again
   3. Tell Claude what to do instead

   You’ll seeClaude says it’s done.

3. 18

   Step 18 of 34Mark as done: Publish your project

   Publish your project

   Click Source Control on the left (the icon that looks like a branch). Then click Publish to GitHub.

   Source control

   You can directly publish this folder to a GitHub repository.

   Publish to GitHub

   Doesn’t look like this?

   • No Publish to GitHub button? Check your folder is trusted (step 6) and Git is installed (step 8). Then quit VS Code and open it again.
4. 19

   Step 19 of 34Mark as done: Sign in to GitHub

   Sign in to GitHub

   VS Code asks to sign in: click Allow. Your browser opens: sign in to GitHub and allow VS Code. Then come back to VS Code.

   The extension ‘GitHub’ wants to sign in using GitHub.

   AllowCancel

   Doesn’t look like this?

   • On Windows a second sign-in window may pop up. Sign in there too.
5. 20

   Step 20 of 34Mark as done: Choose private

   Choose private

   Only you can see a private project.

   VS Code names it after your folder. Click Publish to GitHub private repository. If it asks which files to include, leave them all ticked and click OK.

   my-first-app

   • Publish to GitHub private repository
   • Publish to GitHub public repository

   You’ll seeVS Code says Successfully published. Click Open on GitHub to see your project there.

6. 21

   Step 21 of 34Mark as done: Save as you go

   Save as you go

   Each save is a point you can always go back to.

   From now on, every time something works, copy the first prompt into Claude’s box. If something breaks, the second takes you back. You never have to type a Git command.

   Save my progressCopy prompt

   Save my progress: commit everything with a short note on what changed, and push it to GitHub. What works now: [what you just got working].

   Go backCopy prompt

   Something broke. Go back to my last save point that worked, from before [the change that broke it]. Don't delete any history: undo it as a new save point, then tell me what changed.

   Claude Code

   Save my progress. What works now: the sidebar.

   Saved “Add a sidebar of pages” and sent it to GitHub.

   Doesn’t look like this?

   • Claude says it couldn’t send your saves to GitHub? Click Sync Changes in Source Control: VS Code sends them for you.

Keep it private, and never put a password or an API key in your project.

About 20 minSteps 22 to 280 of 7 done

1. 22

   Step 22 of 34Mark as done: Pick an app to rebuild

   Pick an app to rebuild

   Copying an app you already use is the fastest way to learn: you know how it should work, so you can tell when Claude gets it right.

   Pick one below and click Copy prompt. Never built anything? Pick an Easiest one.

   • A to-do listlike TodoistEasiest

     You’ll learnAdd a task, tick it off, delete it

     Copy promptCopy

   • A link pagelike LinktreeEasiest

     You’ll learnYour own page, your links, your colours

     Copy promptCopy

   • A notes applike NotionEasy

     You’ll learnPages, a sidebar, saving as you type

     Copy promptCopy

   • A flashcard quizlike DuolingoEasy

     You’ll learnQuestions, answers and a score

     Copy promptCopy

   • A task boardlike TrelloMedium

     You’ll learnColumns, cards and drag and drop

     Copy promptCopy

   • A booking pagelike CalendlyMedium

     You’ll learnA calendar, time slots and a form

     Copy promptCopy

2. 23

   Step 23 of 34Mark as done: Paste it into Claude

   Paste it into Claude

   Click in Claude’s box, paste (⌘V on a Mac, Ctrl+V on Windows) and press Enter. Claude lists the app’s features, smallest first.

   Claude Code

   I want to learn by rebuilding Todoist as a simple web app on my computer: a to-do list…

   Here are its core features, smallest first: 1. Add a task 2. Tick a task off 3. Delete a task 4. Due dates Which one should we start with?

3. 24

   Step 24 of 34Mark as done: Pick the first piece

   Pick the first piece

   One piece at a time: each one small enough to check before the next.

   Type the number of the feature to build first, like 1, and press Enter.

   Claude Code

   1

   Let’s build it: a page with a box to add tasks. First I’ll set up the project.

4. 25

   Step 25 of 34Mark as done: Say yes as it builds

   Say yes as it builds

   In Manual mode Claude asks before each file it changes and each command it runs.

   Read what it wants to do, then click Yes. Seen enough of its changes? Click Yes, allow all edits this session, and it stops asking about files.

   Claude Code

   npm install

   1. Yes
   2. Yes, and don’t ask again
   3. Tell Claude what to do instead

   Doesn’t look like this?

   • npm install downloads the parts your app is built from. That’s normal: it’s why you installed Node.js.
   • Not sure what it does? Ask in the box under the buttons: What does this do?
5. 26

   Step 26 of 34Mark as done: Open your app

   Open your app

   When Claude says your app is running, click the localhost link it gives you. If VS Code asks, click Open.

   localhost:5173

   My tasks

   Add a task…Add

   • Buy milk
   • Call the bank
   • Book the dentist

   You’ll seeYour app opens in your browser. localhost means it runs on your own computer: only you can see it.

   Doesn’t look like this?

   • Claude gave you a command instead, like npm run dev? Paste it into the terminal and press Enter, then click the link it prints.
   • No link at all? Ask Claude: How do I open my app in the browser?
   • Closed the page? Click the same link again. If it won’t load, ask Claude to start the app again.
6. 27

   Step 27 of 34Mark as done: Tell Claude what’s off

   Tell Claude what’s off

   Your first try won’t be perfect. Saying exactly what you see is how you get it right.

   Copy this into Claude’s box and fill in the blanks. A screenshot helps: paste it into the box too.

   Fix what I seeCopy prompt

   When I [what you did], I expected [what should happen], but [what happened instead]. Fix it, then tell me exactly how to check it.

7. 28

   Step 28 of 34Mark as done: Save it, then the next piece

   Save it, then the next piece

   When it works, ask Claude to save your progress. Then ask for the next feature. Repeat until it does what you need.

   The next pieceCopy prompt

   That works. Save my progress, then build the next piece: [the next feature]. Only that, then tell me exactly what to click to check it.

   You’ll seeYou built an app with Claude, one piece at a time, and every piece is saved on GitHub.

About 30 minSteps 29 to 340 of 6 done

1. 29

   Step 29 of 34Mark as done: Spot a problem

   Spot a problem

   The best first app fixes something that annoys you every week.

   Look for these in your week. Can’t think of one? Let Claude interview you.

   • A job you do by hand every week
   • An app you pay for but barely use
   • A spreadsheet you dread opening
   • Something you keep forgetting
   • The same copy and paste, again and again

   Find my problemsCopy prompt

   Interview me to find problems in my life I could solve with a small app. Ask about my work, my money, my home and the apps I pay for, one question at a time, up to 10. Then list 5 problems, ranked by the time or money a fix would save me, with how hard each is to build. About me: [what you do most days].

2. 30

   Step 30 of 34Mark as done: Check it’s worth it

   Check it’s worth it

   Three ticks or more: build it. Fewer: pick another one.

   • You hit it every week
   • It costs you time, money or stress
   • You’d use the fix yourself
   • A small version fits in a weekend
3. 31

   Step 31 of 34Mark as done: Check it can be built

   Check it can be built

   Some ideas need data or services you can’t get. Better to know before you start.

   Ask Claude before you build: copy this with your idea in it. Claude rates the idea like a traffic light.

   • Build itOnly your own data: lists, forms, numbers, reminders
   • DoableNeeds a service, like email, payments, maps or AI
   • Rethink itNeeds data you can’t get, like another app’s private data

   Can it be built?Copy prompt

   I want to build [your idea, in a sentence]. Before we start, tell me straight: can this be built as a simple web app on my computer? Rate it green (only my own data), amber (needs a service like email or payments: say which) or red (needs data I can't get). Then give me 3 ways to solve the problem, including ones with no app, and recommend the simplest.

4. 32

   Step 32 of 34Mark as done: Pick the simplest fix

   Pick the simplest fix

   Maybe you don’t need an app at all.

   Claude’s answer gives you three ways. Build only if building wins.

   1. Way 1An app you already haveSet up once
   2. Way 2A spreadsheetA formula or two
   3. Way 3Your own appWhen building wins
5. 33

   Step 33 of 34Mark as done: Or start from an idea

   Or start from an idea

   No problem in mind yet? Pick one that sounds like your week and copy its prompt.

   • A client trackerWork

     Instead ofa messy spreadsheet

     Copy promptCopy

   • An invoice makerWork

     Instead ofediting last month’s invoice

     Copy promptCopy

   • A subscription trackerMoney

     Instead ofsurprise renewals

     Copy promptCopy

   • A bill splitterMoney

     Instead ofmaths in the group chat

     Copy promptCopy

   • A savings trackerMoney

     Instead ofguessing if you’ll get there

     Copy promptCopy

   • A meal plannerHome

     Instead ofdeciding at 6 pm

     Copy promptCopy

   • A chore chartHome

     Instead ofarguing whose turn it is

     Copy promptCopy

   • A content calendarGrowth

     Instead ofposting whenever

     Copy promptCopy

   • A workout logGrowth

     Instead ofyour Notes app

     Copy promptCopy

6. 34

   Step 34 of 34Mark as done: Build it, ugly

   Build it, ugly

   A plain app that works beats a beautiful one you never finish.

   Paste your prompt into Claude and build it the same way as your first app: one piece at a time, saving as you go.

   clients.xlsx

   Client	Last call	Notes
   Maya B.	?	owes $
   Jordan	Sept	call back??
   Rivera Co.		sent quote

   My clientsFollow up today: 2

   • Maya B.Owes $400
   • JordanCall back
   • Rivera Co.Paid

   Not pretty. It works, and it’s yours.

   Build it smallCopy prompt

   I [the problem, like track my clients in a messy spreadsheet]. Build me the simplest web app that fixes it, just for me. Ask me up to 5 questions first. Don't worry about how it looks.

Not sure your idea is worth building? I’ll help you pick it and plan it on a 1:1 call.