Everything you need to get your Linux machine ready for vibe coding
Before you start: Read through this entire guide first so you know what to expect. Then use the interactive prompt in Guide 02 to walk through setup step-by-step with Claude's help.
What You'll Install
Xcode Command Line Tools — Essential developer tools for Mac
Homebrew — Package manager for installing software
Node.js — JavaScript runtime for web development
Git — Version control to track your code changes
Cursor — AI-powered code editor
Claude Code — AI coding assistant that runs in your terminal
Part 1: Open Terminal
Step 1: Press Command + Space to open Spotlight Search
Step 2: Type "Terminal" and press Enter
Step 3: A window will open with a command prompt — this is where you'll type commands
Part 2: Install Homebrew
Homebrew is a tool that makes it easy to install software on your Mac. It's like an app store for developer tools.
Step 1: Install Xcode Command Line Tools first:
xcode-select --install
A popup will appear — click "Install" and wait for it to finish.
You should see Cursor launch or display version info. If you see "command not found", try closing Terminal and opening a new one.
Pro tip: You can open any folder in Cursor by navigating to it in Terminal and typing cursor . (that's "cursor" followed by a space and a period). The period means "this folder."
Troubleshooting: If the AppImage won't run, you may need to install FUSE:
sudo apt install libfuse2
Then try running Cursor again.
Part 6: Install Claude Code
Step 1: In Terminal, run:
npm install -g @anthropic-ai/claude-code
Step 2: Navigate to a project folder and launch Claude Code:
mkdir -p ~/Projects/my-first-project
cd ~/Projects/my-first-project
claude
Follow the prompts to log in with your Anthropic account.
You're ready! Head to Guide 03 "Your First 30 Minutes" to build something real.
Guide 02
Get Started Prompt
Copy this into Claude.ai for interactive setup help
Copy everything in the box below and paste it into a new conversation at claude.ai. Claude will walk you through each step one at a time.
Interactive Setup Prompt
Hi Claude! I need your help getting set up to code for the very first time. I'm on Linux (Ubuntu/Debian) and I have zero coding experience. I need you to be my patient, step-by-step guide through this entire process.
Here's what I need to set up:
1. Essential build tools (build-essential package)
2. Node.js (using nvm)
3. Git
4. Cursor (the AI-powered code editor)
5. Claude Code (the CLI tool from Anthropic)
And then I need to:
7. Create my first project folder
8. Set up that project with the right configuration files
9. Learn how to use Claude Code to start building
IMPORTANT INSTRUCTIONS FOR YOU:
- Assume I know NOTHING about coding or terminals. Explain every single step.
- Tell me exactly what to click, what to type, and what I should see after each step.
- Only give me ONE step at a time. Wait for me to confirm I completed it before moving on.
- If I run into an error, help me troubleshoot it before continuing.
- Use simple, non-technical language whenever possible. If you use a technical term, briefly explain what it means.
- When you tell me to type a command, put it on its own line so it's easy to copy.
- After each step, ask me "What do you see?" or "Did that work?" so we stay in sync.
Let's start from the very beginning. What's the first thing I should do?
What Happens Next
After you paste this into Claude chat, it will begin walking you through each step one at a time:
It will ask you to open Terminal
It will help you install Xcode Command Line Tools
It will guide you through installing Homebrew
It will help you install Node.js, Git, and other tools
It will teach you how to launch Claude Code
Tips:
Keep the Claude chat conversation open the whole time
If you get an error, copy the ENTIRE message and paste it to Claude
This takes about 30-60 minutes — don't rush it
You can take breaks! Just come back and say "I'm back, where were we?"
Guide 03
Your First 30 Minutes
Build a real webpage in your first Claude Code session
Everything is installed. Now what? This guide walks you through your very first Claude Code session. You'll build something real in 30 minutes and see it running on your screen.
Before You Start (2 minutes)
Make sure you have:
Terminal open
Claude Code installed (type claude --version to check)
Your project folder ready
Step 1: Create Your Project Folder
Every project needs its own folder. Think of it like creating a new folder for a school project — all your files will live here. Choose ONE of these two methods:
Option A: Create Folder Using File Manager (Easier for Beginners)
Open your file manager — Click the "Files" icon in your dock/taskbar (it might be called "Nautilus", "Dolphin", or "Files" depending on your Linux distribution)
Go to your home folder — Click "Home" in the left sidebar (or press Ctrl + H to show hidden files)
Create a "Projects" folder — Right-click in the empty space, select New Folder, name it Projects, press Enter
Open the Projects folder — Double-click to open it
Create your project folder — Right-click, select New Folder, name it my-first-project, press Enter
Your folder is now at: /home/yourusername/Projects/my-first-project
Option B: Create Folder Using Terminal (Faster Once You Learn It)
Open Terminal — Press Ctrl + Alt + T
Create the Projects folder and your project folder in one command:
mkdir -p ~/Projects/my-first-project
This creates both folders at once. The -p flag means "create parent folders if they don't exist."
Your folder is now at: ~/Projects/my-first-project (the ~ is a shortcut for your home folder)
Step 2: Navigate to Your Folder in Terminal
Now you need to tell the terminal to "go to" your project folder. Choose ONE method:
Method A: Drag and Drop (Easiest)
Open Terminal (Ctrl + Alt + T)
Type cd (with a space after it) — don't press Enter yet
Open your file manager and find your project folder
Drag the folder from the file manager and drop it onto the Terminal window
The full path will appear automatically — now press Enter
Method B: Type the Path (Faster Once You Know It)
Type this command and press Enter:
cd ~/Projects/my-first-project
Verify you're in the right place:
pwd
This command "prints working directory" — it shows you where you are. You should see something like: /home/yourusername/Projects/my-first-project
Step 3: Start Claude Code
Now that you're in your project folder, start Claude Code:
claude
You should see Claude Code start up. Once you see the prompt, you're ready!
Minutes 2-5: Tell Claude What to Build
We're going to build a simple personal webpage. Type this into Claude Code:
I want to build a simple personal webpage. Create an index.html file with a clean, modern design. Include my name as the heading (use "Your Name" as a placeholder), a short bio section, and a list of 3 hobbies. Style it nicely with embedded CSS -- use a dark background with light text, nice fonts, and good spacing. Make it look professional, not like a school project from 1999.
Minutes 5-8: See Your Creation
Open your HTML file in a browser:
Open Finder
Navigate to your project folder
Double-click index.html
You should see a professional-looking webpage. Not bad for 5 minutes!
Minutes 8-12: Customize It
Tell Claude to personalize it:
Change the name to [YOUR ACTUAL NAME]. Update the bio to say: "[Write 2-3 sentences about yourself]". Change the hobbies to [list your actual hobbies].
Refresh your browser (Command + R) to see the updates!
Minutes 12-18: Add More Pages
Add an About page (about.html) with more detailed information about me. Include sections for my background, skills, and goals. Add a navigation bar to both pages so I can click between them. Make sure the nav bar looks good and highlights the current page.
Minutes 18-22: Make It Interactive
Add a dark mode / light mode toggle button in the top right corner of the navigation bar. When clicked, it should switch between a dark theme and a light theme. Remember the user's preference using localStorage so it persists when they refresh.
You just added interactive functionality to a website. With zero coding knowledge.
Minutes 22-25: Save Your Work
Initialize git if it's not already set up, then commit all our work with a good commit message describing what we built.
Congratulations! In 30 minutes, you built a multi-page website with dark mode toggle, customized it, and saved your work with Git. This is how vibe coding works!
Guide 04
Tips for Working with Claude Code
Best practices for effective vibe coding
How to Give Good Prompts
Be Specific, Not Vague
Bad
"Make the app better"
Good
"Add a login page with an email field, password field, and a submit button that validates the email format"
Describe What You Want to See
Bad
"Fix the homepage"
Good
"The homepage should show a welcome message at the top, a list of recent posts below it, and a footer with contact info"
Work in Small Steps
This is the #1 most important tip. Don't try to build everything at once.
Don't do this: "Build me a complete e-commerce website with user accounts, product listings, a shopping cart, checkout with Stripe, order history, admin dashboard, and email notifications"
Do this instead:
"Create a homepage that displays a list of products"
"Add a product detail page that shows when you click a product"
"Add a shopping cart that lets users add and remove items"
...and so on
Always Review What Claude Writes
Claude Code will ask for your permission before making changes. Take a moment to review:
Read the file names it wants to change or create
Skim the code changes
If something looks wrong, ask about it before approving
Useful Commands
/help
Show all available commands
/clear
Clear the conversation and start fresh
/compact
Compress conversation to save space
Control + C
Cancel current operation
Guide 05
Power Prompts Library
Ready-to-paste prompts for common tasks
Copy any of these prompts, paste into Claude Code, and customize the parts in [brackets].
Getting Started
Understand a New Project
Give me a complete overview of this project. What does it do, what technologies does it use, how are the files organized, and how do I run it?
Create a CLAUDE.md File
Analyze this entire project and create a detailed CLAUDE.md file that describes the project structure, tech stack, how to run it, and any important patterns or conventions you notice.
Building Features
Add a New Page
Add a new page at [/route-name] that [describe what it should show]. Make sure it's linked from the navigation and styled consistently with the rest of the app.
Add a Form
Add a form to [page name] with fields for [list fields]. Include validation so that [describe rules, e.g., email must be valid, name is required]. Show error messages below each field.
Add Search Functionality
Add a search bar to [page/component] that filters [what] by [criteria]. Results should update as the user types.
Improving Your App
Make It Mobile-Friendly
Review [page/component/the whole app] and make it fully responsive. It should look great on phones (375px wide), tablets (768px), and desktop (1280px+). Show me what you're changing and why.
Add Dark Mode
Add a dark mode toggle to the app. Store the user's preference in local storage so it persists. Make sure all pages and components support both light and dark themes.
Code Quality
Audit for Bugs
Do a thorough code review of [file/feature/the whole project]. Look for bugs, edge cases that aren't handled, potential crashes, and security issues. List everything you find, ranked by severity.
Security Check
Audit this project for security vulnerabilities. Check for exposed secrets, SQL injection, XSS, insecure authentication, missing input validation, and any OWASP top 10 issues. List what you find and fix the critical ones.
Guide 06
Starter Project Ideas
10 project ideas with ready-to-paste prompts
Beginner Projects
1. Personal Portfolio Website
A simple website to showcase who you are and what you do.
Paste this into Claude Code:
Help me build a personal portfolio website using HTML, CSS, and JavaScript. I want a homepage with my name and a short bio, an About page with more details about me, a Projects page where I can list things I've worked on, and a Contact page with a simple form. Make it look clean and modern. Let's start with the homepage.
What you'll learn: HTML structure, CSS styling, basic web development
2. To-Do List App
A simple app to add, check off, and delete tasks.
Paste this into Claude Code:
Help me build a to-do list app using React. I want to be able to type a task and add it to a list, check tasks off when they're done, delete tasks I don't need, and have the list saved so it doesn't disappear when I refresh the page. Let's start with the basic layout.
What you'll learn: React basics, state management, local storage
Intermediate Projects
4. Blog / Journal App
A place to write and publish blog posts or journal entries.
Paste this into Claude Code:
Help me build a blog app using Next.js. I want a homepage that lists all posts with title, date, and a preview. Each post should have its own page. I want an editor to write new posts with a title and body using markdown. Let's use a simple file-based approach to store posts for now. Start with the homepage layout.
What you'll learn: Next.js, routing, markdown, file handling
5. Weather Dashboard
An app that shows the current weather for any city.
Paste this into Claude Code:
Help me build a weather dashboard using React. I want a search bar where I type a city name, and it shows the current temperature, weather condition, humidity, and wind speed. Use a free weather API. Make it look nice with weather icons. Let's start with the layout and search bar.
What you'll learn: APIs, fetching data, displaying dynamic content
Advanced Projects
8. Real-Time Chat App
A messaging app where multiple people can chat.
Paste this into Claude Code:
Help me build a real-time chat application using Next.js and Supabase. I want user registration and login, the ability to create chat rooms, real-time messaging that updates without refreshing, and a list of online users. Let's start by setting up the project and database.
What you'll learn: Authentication, real-time data, databases
Tip: Pick something YOU would actually use. You'll be more motivated to finish it!
Guide 07
Cheat Sheet
Quick reference for common commands
Print this out and keep it near your computer while you work!
Terminal Basics (macOS)
cd /path/to/folder— Go to a folder
cd ..— Go up one folder
cd ~— Go to home folder
ls— List files
ls -la— List all files (including hidden)
pwd— Show current folder
clear— Clear the screen
Control + C— Cancel current command
Claude Code
claude— Start Claude Code
exit— Quit Claude Code
/help— Show all commands
/clear— Clear conversation
/compact— Compress conversation
Control + C— Cancel operation
Git (Version Control)
git status— See what changed
git add -A— Stage all changes
git commit -m "msg"— Save a snapshot
git push— Upload to GitHub
git pull— Download from GitHub
git log --oneline— See history
npm (Package Manager)
npm install— Install dependencies
npm run dev— Start dev server
npm start— Start the project
npm run build— Build for production
Cursor (Code Editor)
cursor .— Open folder in Cursor
Cmd + Shift + P— Command palette
Cmd + S— Save file
Cmd + P— Quick open file
Guide 08
Troubleshooting Guide
When things go wrong (and they will)
The Golden Rule: When something goes wrong — don't panic, don't randomly delete things. Copy the error message and paste it into Claude Code or Claude chat. Everything has a fix.
"There's a Wall of Red Text in My Terminal"
Red text usually means an error. It looks scary but it's normal and almost always fixable.
Don't panic — read the LAST few lines (that's where the actual error is)
Copy the last 5-10 lines of red text
Paste it into Claude Code and ask: "I got this error. What does it mean and how do I fix it?"
"Claude Changed a Bunch of Files and Now Nothing Works"
Option 1: Ask Claude to fix it:
"The last changes you made broke the app. Here's the error: [paste error]. Can you fix it or undo those changes?"
Option 2: Undo all uncommitted changes:
git checkout .
Option 3: Undo just one file:
git checkout -- path/to/file.js
"I Closed the Terminal and Lost Everything"
You didn't lose everything! Your files are still on your computer.
Your code files are still in your project folder
Your dev server stopped (just restart it with npm run dev)
Claude Code conversation is gone, but just type claude to start fresh
"command not found"
Close and reopen Terminal, then try again
If it still doesn't work, the tool may not be installed — re-run the installation step
"Permission denied"
Put sudo in front of the command:
sudo npm install -g @anthropic-ai/claude-code
It will ask for your password.
"Port 3000 is already in use"
Find what's using the port and kill it:
lsof -i :3000
kill -9 PID_NUMBER
Or just use a different port: PORT=3001 npm run dev
Guide 09
Transitioning Existing Projects
Taking over a project from another developer
You have a project that was built by another developer, and now you want to use Claude Code to continue working on it. This guide helps you gather everything you need.
Questions to Ask Your Developer
Copy this list and send it to your developer:
Project Basics
What programming language(s) does the project use?
What framework(s) does the project use?
What version of Node.js / Python / etc. should I use?
Source Code
Where is the source code hosted? (GitHub URL)
What branch should I work from?
Can you add me as a collaborator?
Environment Variables
Does the project use a .env file?
Can you send me a copy or list all required variables?
Database
What database does the project use?
How do I access it?
Are there migrations I need to run?
Running the Project
What are the exact commands to install dependencies and start the project?
Are there any special setup steps?
What You Need (Minimum)
Access to the source code (GitHub invite or zip file)
A list of environment variables and their values (.env file)
Instructions for how to run the project locally
Access to the database (or instructions for setting one up)
Getting Started with the Project
Follow these steps carefully. Each one builds on the last.
Step 1: Get the Project Files onto Your Computer
Your developer will give you access one of two ways:
Option A: If they gave you a GitHub link
Open Terminal (Ctrl + Alt + T)
Navigate to where you want to put the project:
cd ~/Projects
Clone the project (replace the URL with your actual GitHub link):
Right-click it and select "Extract Here" (or use Archive Manager)
Move the extracted folder to your Projects folder
Open Terminal and navigate to it:
cd ~/Projects/project-name
Step 2: Add the .env File (Environment Variables)
The .env file contains secret settings like API keys and passwords. Your developer should send you this separately (never through GitHub — that would expose the secrets!).
Your developer will send you the contents (might look like this):
In Terminal, make sure you're in the project folder, then create the file:
touch .env
Open the file in a text editor (nano is built into most Linux distributions):
nano .env
Paste the contents your developer sent you (Ctrl + Shift + V to paste in terminal)
Save the file: Press Ctrl + O, then Enter, then Ctrl + X to exit
Alternative: You can also open the file in Cursor by running cursor .env and pasting the contents there.
Why can't I see the .env file in Files? Files starting with a dot are "hidden" by default. Press Ctrl + H in your file manager to show hidden files.
Step 3: Install Dependencies
Most projects use code libraries written by other people (called "dependencies"). You need to download these before the project will work.
Make sure you're in the project folder in Terminal
Run this command:
npm install
Wait for it to finish — you'll see a lot of text scrolling by. This is normal!
When it's done, you'll see your command prompt again. You might see some "warnings" (yellow text) — these are usually fine to ignore.
If you see red "error" text: Copy the last 10 lines and paste them to Claude Code or Claude.ai for help.
Step 4: Start Claude Code and Create a CLAUDE.md File
This helps Claude understand the project so it can help you better.
Make sure you're still in the project folder in Terminal
Start Claude Code:
claude
Once Claude Code is running, paste this prompt:
Analyze this entire project and create a detailed CLAUDE.md file. Include what the project does, how the files are organized, what technologies it uses, how to run it, and any important patterns you notice.
Claude will read through the project and create a helpful reference file
Step 5: Try Running the Project
Now let's see if everything works! The command to run the project varies, but here are the most common ones:
Ask Claude Code: "How do I run this project locally?"
Or try these common commands (one at a time until one works):
npm run dev
npm start
npm run start
If it works, you'll see a message like "Server running on http://localhost:3000"
Open your web browser (Firefox, Chrome, etc.) and go to http://localhost:3000 (or whatever port it shows)
You should see the project running!
To stop the server: Go back to Terminal and press Ctrl + C
You're ready! You now have the project running locally. From here, you can use Claude Code to explore, understand, and make changes to the codebase.
Guide 10
Project Setup Files
Starter files Claude Code can create for you
Once you have Claude Code installed and running in your project folder, paste this prompt:
"Read the project setup files guide and create all of the standard project files for me: .gitignore, .cursorignore, .cursorrules, CLAUDE.md, package.json, and a starter index.js file."
Files That Will Be Created
.gitignore
Tells Git which files to NOT track (dependencies, secrets, build files)
Instructions file that Claude Code reads automatically
# Project Name
## What This Project Does
[Describe your project in 2-3 sentences]
## Tech Stack
- Framework: [e.g., React, Next.js]
- Styling: [e.g., Tailwind CSS]
- Database: [e.g., Supabase]
## How to Run
npm install # Install dependencies
npm run dev # Start development server
## Rules and Preferences
- Keep code simple and well-commented
- Always ask before deleting existing code