Claude Code is Anthropic’s AI coding assistant that runs in your terminal. It’s one of the best tools for “vibe coding”—building software by describing what you want in plain English.
This tutorial will walk you through everything: installing Claude Code, understanding how it works, and building your first project. Even if you’ve never opened a terminal before, you’ll be able to follow along.
What you’ll need
- A Mac running macOS 14 (Sonoma) or later
- A Claude Pro subscription ($20/month from Anthropic)
- About 15 minutes of your time
That’s it. No prior coding experience necessary.
Step 1: Install Claude Code
The traditional way to install Claude Code involves opening Terminal, installing Node.js, running npm commands, and configuring your environment. It’s not hard, but it’s a lot of steps for a beginner.
The easy way is to use Vibestackr—a free Mac app that handles all of this for you.
Using Vibestackr (recommended)
Download Vibestackr, open it, select "Claude Code" from the list, and click Install. That's it. Vibestackr installs Node.js, npm, and Claude Code automatically.
Once installed, you’ll sign in to your Anthropic account. Vibestackr will walk you through this process.
Step 2: Open Terminal
After installation, you’ll need to use Terminal to interact with Claude Code. Don’t worry—it’s simpler than it looks.
To open Terminal:
- Press
Cmd + Spaceto open Spotlight - Type “Terminal” and press Enter
You’ll see a window with a command prompt. This is where you’ll talk to Claude Code.
Step 3: Start Claude Code
In Terminal, type:
claude
Press Enter. Claude Code will start up and you’ll see a welcome message. You’re now ready to start building.
Step 4: Create your first project
Let’s build something simple: a personal landing page. In the Claude Code prompt, type:
Create a simple personal landing page for a designer named Alex. Include a hero section with their name, a brief bio, and links to Twitter and LinkedIn. Use modern CSS with a dark theme.
Press Enter and watch Claude work. It will:
- Create a new folder for your project
- Generate an HTML file with the structure
- Add CSS styling for the dark theme
- Include placeholder links for social profiles
In about 30 seconds, you’ll have a complete landing page.
Step 5: View your creation
Claude will tell you where it saved the files. To view your page, you can ask Claude:
Open the landing page in my browser
Or you can find the HTML file in Finder and double-click it.
Step 6: Make changes
Here’s where vibe coding gets fun. Want to change something? Just ask:
Change the background to a gradient from purple to blue. Also add a subtle animation to the hero text.
Claude will update the code and you can refresh the browser to see the changes.
Some other things you could try:
- “Add a portfolio section with 3 project cards”
- “Make it responsive for mobile devices”
- “Add a contact form at the bottom”
- “Change the font to Inter”
Each change takes seconds. You’re not writing code—you’re having a conversation about what you want.
Tips for better results
Be specific
The more detail you provide, the better Claude’s output. “Make a website” is vague. “Create a portfolio website for a photographer with a grid gallery, about page, and contact form” gives Claude much more to work with.
Iterate in small steps
Don’t try to describe your entire project in one message. Start with the basics, then add features one at a time. This gives you more control and makes it easier to fix issues.
Ask Claude to explain
If you want to learn, ask Claude to explain what it’s doing. “Create a signup form and explain how the validation works” teaches you while building.
Save your work
Claude creates real files on your computer. Make sure to save them somewhere you can find them. Consider using Git for version control (Claude can help you set this up too).
What to build next
Now that you know the basics, here are some project ideas:
- Todo app — “Create a todo app with local storage so items persist”
- Calculator — “Build a calculator app with a clean macOS-style design”
- Weather app — “Create a weather app that shows the forecast for Austin, TX”
- Blog template — “Build a blog with a homepage and individual post pages”
- Invoice generator — “Create a tool that generates PDF invoices”
Start simple and work your way up. Each project teaches you more about what’s possible.
Ready to start?
Download Vibestackr and install Claude Code in minutes. No terminal experience required.
Download VibestackrGetting help
If you get stuck, remember: Claude is your assistant. You can ask it questions like:
- “Why isn’t this working?”
- “What does this error mean?”
- “How do I make this look better on mobile?”
Claude can debug its own code, explain concepts, and suggest improvements. Use it as a learning tool, not just a code generator.
Happy vibe coding!