The Complete Guide

The Claude Code Playbook

Everything you need to know to start building AI-powered tools, websites, and automations using Claude Code.

Section 01

Installation & Setup

Before you can start building with Claude Code, you need to set up your environment. This takes about 10 minutes.

What You'll Need

  • 1 A Mac or Windows computer - Claude Code runs in your terminal
  • 2 An Anthropic account - Sign up at anthropic.com
  • 3 Node.js installed - Required to run Claude Code

Step 1: Open Your Terminal

The terminal is where you'll interact with Claude Code. It's a text-based interface where you type commands.

Mac
Opening Terminal on Mac
  1. Press Command + Space to open Spotlight
  2. Type "Terminal" and press Enter
  3. A black or white window will open - this is your terminal
Win
Opening Terminal on Windows
  1. Press Windows + R to open Run
  2. Type "cmd" or "powershell" and press Enter
  3. Alternatively, search for "Windows Terminal" in the Start menu

Step 2: Install Node.js

Node.js is required to run Claude Code. Check if you have it installed:

Terminal
node --version

If you see a version number (like v20.0.0), you're good. If not, install Node.js:

1
Install Node.js
  1. Go to nodejs.org
  2. Download the LTS (Long Term Support) version
  3. Run the installer and follow the prompts
  4. Restart your terminal after installation

Step 3: Install Claude Code

Now install Claude Code globally on your machine:

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

This command downloads and installs Claude Code from npm (Node Package Manager).

Tip

If you get a permission error, try running with sudo on Mac: sudo npm install -g @anthropic-ai/claude-code

Step 4: Authenticate

Run Claude Code for the first time to authenticate:

Terminal
claude

This will open a browser window where you can log in with your Anthropic account. Once authenticated, you're ready to go!

Section 02

What is Claude Code?

Claude Code is an AI assistant that lives in your terminal. It can read your files, write code, run commands, and build entire applications for you.

How It's Different from ChatGPT

Unlike ChatGPT which lives in a browser window, Claude Code:

  • Has access to your files - It can read your documents, images, PDFs, and data files
  • Can write and edit files - It creates real files on your computer
  • Runs commands - It can execute code, run tests, and deploy applications
  • Remembers context - It understands your entire project, not just the last message
  • Works with real tools - Git, npm, Python, databases, APIs, and more

The Basic Interface

When you run claude in your terminal, you enter an interactive session. Here's what it looks like:

Claude Code Session
# Navigate to your project folder first cd ~/Desktop/my-project # Start Claude Code claude # Now you're in an interactive session > Build me a landing page for a fitness app # Claude will read your files, understand the context, # and start building...

Key Commands

  • claude - Start an interactive session
  • /help - See available commands
  • /clear - Clear the conversation history
  • Ctrl + C - Stop the current operation
  • exit or Ctrl + D - Exit Claude Code
Section 03

The Build Framework

Before you start building, you need to know WHAT to build. This framework helps you identify high-impact opportunities.

The 4-Question Framework

Ask yourself these questions to identify what to build:

1

What do I do repeatedly?

Any task you do more than 3x per week is a candidate for automation.

2

What takes too long?

If it takes more than 30 minutes manually, Claude can probably do it in seconds.

3

What am I paying for?

Software subscriptions, agencies, freelancers - can any of these be built in-house?

4

What's blocking my team?

Bottlenecks, approval delays, waiting for others - what could AI unblock?

The Impact Matrix

Once you have a list of ideas, prioritize them:

High Impact, Easy to Build (Start Here)

Landing pages, email templates, content generators, data analysis tools, simple automations

High Impact, Hard to Build (Plan for Later)

Full applications, complex integrations, AI agents, multi-step workflows

Low Impact (Skip These)

Nice-to-haves, edge cases, features no one asked for

The ROI Test

Before building, calculate the potential ROI:

  • Time saved per week × 52 weeks = Annual time saved
  • Cost of current solution × 12 months = Annual cost
  • Time to build (usually hours, not days)

If annual savings > time to build × 10, it's worth building.

Section 04

Crafting Great Prompts

The quality of what Claude builds depends on the quality of your prompts. Here's how to write prompts that get results.

The Anatomy of a Great Prompt

Every great prompt has these components:

Prompt Template
CONTEXT: [What is this for? Who will use it?] GOAL: [What do you want to achieve?] INPUTS: [What data/files should Claude use?] OUTPUTS: [What should the final result look like?] CONSTRAINTS: [Any requirements or limitations?] EXAMPLES: [Show what good looks like]

Example: Bad vs Good Prompt

Bad Prompt

"Make me a website"

Good Prompt

"Build a landing page for my fitness coaching business. The page should have: a hero section with headline 'Transform Your Body in 90 Days', a section showing my 3 coaching packages ($99, $199, $499), testimonials from 3 clients, and a contact form. Use a dark theme with green accents. Make it mobile-responsive. Look at the brand-guidelines.pdf in this folder for colors and fonts."

Prompting Patterns That Work

Pattern 1: Reference Existing Files

Prompt
"Read the competitor-analysis.csv file and create a report showing which competitors have features we don't have."

Pattern 2: Give Examples

Prompt
"Generate 10 email subject lines for our sale. Here are examples of subject lines that worked before: '48 hours left', 'Your exclusive access', 'We saved this for you'"

Pattern 3: Specify Format

Prompt
"Analyze the sales data and create a summary. Format: 1) Key findings (3 bullet points), 2) Recommendations (numbered list), 3) Next steps (action items with owners)"

Pattern 4: Iterate

Prompt
"This is good but make the headline punchier, and the CTA button bigger and more prominent."

The System Prompt (CLAUDE.md)

You can create a file called CLAUDE.md in your project folder. Claude reads this file automatically and uses it as context for every conversation.

CLAUDE.md
# Project: Fitness Coaching Website ## Brand Voice - Motivational but not cheesy - Professional but approachable - Use "you" language, not "we" ## Design Guidelines - Primary color: #1DB954 (green) - Secondary color: #191414 (dark) - Font: Inter for body, Montserrat for headings ## Technical Requirements - All pages must be mobile-responsive - Use semantic HTML - Optimize images for web ## Files Reference - /assets/logo.png - Company logo - /data/testimonials.json - Customer testimonials - /content/copy.md - Approved marketing copy
Section 05

Organizing Your Data

The quality of Claude's output depends on the quality of your input. Here's how to organize your data for maximum effectiveness.

The Golden Rule

Output is only as good as input

If you give Claude messy, incomplete, or outdated data, you'll get messy results. Take time to organize your data before building.

Recommended Folder Structure

Create a dedicated project folder with this structure:

my-project/
data/
customers.csv ← Raw data files
products.json
sales-2024.xlsx
content/
brand-voice.md ← Guidelines and copy
testimonials.md
faq.md
assets/
logo.png ← Images and media
hero-image.jpg
examples/
competitor-page.pdf ← Reference materials
design-inspo.png
CLAUDE.md ← System prompt
README.md ← Project overview

What Data to Include

For Marketing Tools:

  • Past campaign performance data (what worked, what didn't)
  • Customer testimonials and reviews
  • Competitor analysis and examples
  • Brand guidelines and approved copy
  • Target audience personas

For Business Tools:

  • Historical data (sales, metrics, KPIs)
  • Process documentation (how things work currently)
  • Team structure and responsibilities
  • Integration requirements (APIs, databases)

For Content Tools:

  • Examples of content you like
  • Tone of voice guidelines
  • Keywords and topics
  • Formatting requirements

Data Formats Claude Works Best With

  • CSV/Excel - For structured data (sales, customers, inventory)
  • JSON - For configuration and structured content
  • Markdown (.md) - For text content and documentation
  • PDF - For reference documents (Claude can read these)
  • Images (PNG, JPG) - For visual references and screenshots
Pro Tip

Use Markdown files for any text-based content. They're easy to write, easy for Claude to read, and version-control friendly.

Section 06

Building Your First Tool

Let's walk through building something real. We'll create a simple landing page from scratch.

Step 1: Create Your Project Folder

Terminal
# Create a new folder on your Desktop mkdir ~/Desktop/my-landing-page # Navigate into it cd ~/Desktop/my-landing-page

Step 2: Add Your Data

Create a content file with your information:

content.md
# My Fitness Coaching Business ## Headline Transform Your Body in 90 Days ## Subheadline Personal coaching that fits your lifestyle ## Packages - Basic: $99/month - Weekly check-ins - Pro: $199/month - Daily coaching + meal plans - Elite: $499/month - 24/7 access + custom workouts ## Testimonials - "Lost 30 lbs in 3 months!" - Sarah M. - "Best investment I ever made" - John D. - "Finally found something that works" - Lisa K.

Step 3: Start Claude Code

Terminal
# Make sure you're in the project folder cd ~/Desktop/my-landing-page # Start Claude claude

Step 4: Give Your Prompt

Claude Code Session
> Read the content.md file and build a modern landing page. Use a dark theme with green accents (#1DB954). Make it mobile-responsive with smooth scroll animations. Include all three packages as pricing cards. Add a contact form at the bottom. Save it as index.html.

Claude will:

  1. Read your content.md file
  2. Generate a complete HTML file with CSS
  3. Save it as index.html in your folder

Step 5: Preview Your Page

Terminal
# Open the file in your browser (Mac) open index.html # Or on Windows start index.html

Step 6: Iterate

Don't like something? Just tell Claude:

Claude Code Session
> Make the hero section taller and add a background gradient. Also make the CTA button pulse with an animation.
Section 07

Publishing to the Web

Once you've built something, you'll want to share it. Here are two easy ways to publish.

Option 1: GitHub Pages (Free)

GitHub Pages lets you host static websites for free. Perfect for landing pages, portfolios, and documentation.

1
Create a GitHub Account

Go to github.com and sign up for a free account.

2
Initialize Git in Your Project
Terminal
cd ~/Desktop/my-landing-page git init git add . git commit -m "Initial commit"
3
Push to GitHub

You can ask Claude to help you push to GitHub:

Claude Code Session
> Help me push this project to a new GitHub repository called "my-landing-page"
4
Enable GitHub Pages
  1. Go to your repository on GitHub
  2. Click Settings → Pages
  3. Under "Source", select "main" branch
  4. Your site will be live at: https://yourusername.github.io/my-landing-page

Option 2: Vercel (Recommended for Apps)

Vercel is better for dynamic applications and gives you automatic deployments.

1
Install Vercel CLI
Terminal
npm install -g vercel
2
Deploy
Terminal
cd ~/Desktop/my-landing-page vercel

Follow the prompts. Vercel will give you a live URL in seconds.

Pro Tip

Connect Vercel to your GitHub repository for automatic deployments. Every time you push code, your site updates automatically.

Section 08

What You Can Build

Claude Code can build almost anything. Here are real examples to inspire you.

Websites

Landing Pages

Sales pages, product launches, event registrations, portfolios

Websites

Full Websites

Multi-page sites, blogs, documentation sites, company websites

Apps

Web Applications

Dashboards, calculators, form builders, data visualizations

Apps

Internal Tools

Admin panels, reporting tools, CRM interfaces, inventory managers

Automation

Data Processing

CSV transformers, report generators, data cleaners, analysis tools

Automation

Content Generators

Email writers, ad copy generators, social media post creators

Design

Presentations

HTML slide decks, pitch decks, training materials

Design

Email Templates

Marketing emails, newsletters, transactional emails

AI Tools

Chatbots

Customer support bots, FAQ bots, onboarding assistants

AI Tools

AI Agents

Research assistants, content analyzers, decision support tools

Business

Analytics Tools

Campaign trackers, ROI calculators, performance dashboards

Business

Workflow Automations

Approval systems, notification bots, task managers

Real-World Examples

1
Hook Analyzer Tool

What it does: Paste any ad, and it breaks down why it works (hook type, emotional triggers, power words) and rewrites it in your brand voice.

Time to build: 2-3 hours

Prompt used: "Build me an HTML tool where I can paste an ad. The tool should analyze the hook type, identify emotional triggers, highlight power words, and then rewrite the ad in my brand voice. Include buttons to generate variations."

2
Campaign Dashboard

What it does: Reads your campaign data from a CSV and creates an interactive dashboard showing performance metrics, trends, and recommendations.

Time to build: 1-2 hours

Prompt used: "Read the campaign-data.csv file and build a dashboard. Show total revenue, conversion rate, best performing campaigns, and worst performing ones. Add charts for trends over time. Make it beautiful with a dark theme."

3
Email Sequence Generator

What it does: Takes your product info and target audience, then generates a complete 5-email nurture sequence with subject lines and body copy.

Time to build: 1 hour

Prompt used: "Read my product-info.md and create a 5-email nurture sequence. Email 1 should introduce the problem, Email 2 should agitate it, Email 3 should present the solution, Email 4 should handle objections, Email 5 should be the hard sell. Generate 3 subject line options for each."