Claude Code for Marketers: Build Sites With AI

Developers used to be the bottleneck.

You had the marketing ideas. The campaign strategy. The vision for how everything should work. But turning that into actual websites, landing pages, and tools meant hiring devs, waiting weeks, and hoping they understood what you meant.

Claude Code eliminates that bottleneck entirely.

I’ve built full production websites in two days that would have taken a month with contractors. Landing pages in an afternoon. Custom tracking dashboards before lunch. This isn’t hype - it’s the new reality for marketers who learn to use these tools.

This guide covers everything from installation to advanced workflows - the exact process I use to ship marketing assets faster than my competitors can write a creative brief.

Quick Navigation

What Is Claude Code

Claude Code is Anthropic’s agentic coding tool that lives in your terminal.

In plain English: It’s an AI that can read your entire codebase, understand what you’re trying to build, write and edit code across multiple files, run commands, and iterate until the job is done.

This isn’t ChatGPT where you copy-paste snippets. Claude Code actually builds things from start to finish.

What Claude Code can do:

• Build complete websites from descriptions
• Debug and fix issues by analyzing your codebase
• Navigate any codebase and answer questions about it
• Automate tedious tasks (linting, merge conflicts, release notes)
• Run for hours on complex tasks autonomously

Why this matters for marketers:

You don’t need to be a developer. You need to know what you want and how to describe it clearly.

“Build me a good website” gets you nowhere.

“Build a high-converting landing page for B2B SaaS targeting companies spending $100K+ monthly on ads, emphasizing speed and AI-native execution, using Tailwind CSS with a dark theme and electric blue accents” - that gets you something you can ship.

The difference: Claude Code doesn’t require you to be a developer, but it does require you to think clearly. Vague inputs produce vague outputs.

Installation: Get Started in 30 Seconds

Prerequisites: A Claude subscription (Pro, Max, Teams, or Enterprise) or Claude Console account.

Install Claude Code

Mac/Linux/WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Alternative: Homebrew (Mac):

brew install --cask claude-code

Alternative: WinGet (Windows):

winget install Anthropic.ClaudeCode

Start Using Claude Code

cd your-project
claude

You’ll be prompted to log in on first use. That’s it.

Pro tip: Native installations auto-update. Homebrew and WinGet installations require manual updates.

The Core Workflow: Research-Plan-Build

Before you build anything, understand this workflow. It’s the difference between “AI slop” and professional results.

Step 1: Research First

Don’t start building blind. Front-load your research.

For websites:

Research competitors in the [YOUR NICHE] space.
Analyze their landing pages for:
- Hero section patterns
- Value proposition positioning
- Social proof placement
- CTA strategies
- Pricing page structures

Save findings to /research/competitor-analysis.md

For marketing assets:

Research best practices for [ASSET TYPE].
Look at examples from top-performing companies.
Document patterns that convert well.
Save to /research/[asset]-best-practices.md

Step 2: Plan Before Coding

Ask Claude to plan before executing.

Before writing any code, create a detailed implementation plan for:
[DESCRIBE WHAT YOU WANT]

Include:
1. File structure
2. Key components needed
3. Technical approach
4. Potential challenges

Save the plan to /docs/implementation-plan.md

Use “think” for complex planning:

Adding words like “think hard” or “think step by step” triggers Claude’s extended reasoning mode. Use it for architectural decisions.

Think carefully about how to structure this landing page
for maximum conversion. Consider the user journey from
ad click to conversion.

Step 3: Build Iteratively

Don’t try to build everything at once. Section by section.

Build the hero section first. Include:
- Headline and subheadline
- Email capture form
- Hero image placeholder
- Trust badges

Follow the style guidelines in /docs/style-guide.md

Then iterate:

Now build the problem section. Show 3 pain points
with icons. Reference the hero section for consistent styling.

Step 4: Polish and Ship

The difference between “looks AI-generated” and “looks professional” is in the details.

Review the entire page for:
- Micro-interactions on buttons and links
- Hover states that feel responsive
- Smooth scroll behavior
- Mobile responsiveness
- Loading states

Add subtle animations where they enhance UX.

Building Marketing Websites

Here’s the exact process I use to build marketing sites with Claude Code.

Phase 1: Gather Design Inspiration

Before touching code, collect references.

Resources I use:

• saaslandingpage.com - SaaS landing page examples
• saasframe.io - Design patterns
• 21st.dev - Modern component examples
• mobbin.com - Mobile design patterns

Create a visual board with screenshots of:

• Hero sections you like
• CTA styles that convert
• Testimonial layouts
• Pricing table designs
• Footer structures

Phase 2: Create Style Guidelines

This is crucial. Without style guidelines, Claude Code goes off the rails.

Create a detailed style document (I recommend 200+ lines):

# Style Guidelines

## Brand Colors
- Primary: #3b82f6 (electric blue)
- Secondary: #1e40af (dark blue)
- Background: #0f172a (dark)
- Text: #f8fafc (light)
- Accent: #22d3ee (cyan)

## Typography
- Headlines: Inter, 700 weight
- Body: Inter, 400 weight
- Code: JetBrains Mono

## Component Patterns
- Buttons: Rounded-lg, primary color, hover:brightness-110
- Cards: bg-slate-800/50, border border-slate-700, rounded-xl
- Sections: py-24 px-6 max-w-7xl mx-auto

## Animation Guidelines
- Hover transitions: 200ms ease
- Page transitions: 300ms ease-out
- Scroll animations: Use intersection observer

## Don'ts
- No gradients on text
- No more than 2 font weights per page
- No pure white (#fff) - use #f8fafc

Save this to /docs/style-guide.md or include it in your CLAUDE.md.

Phase 3: Build Section by Section

Hero Section Prompt:

Build a hero section for a marketing analytics SaaS.

Requirements:
- Dark theme with blue accents
- Headline: "Stop Guessing. Start Knowing."
- Subheadline: Focus on data-driven decisions
- Email capture form with "Get Early Access" CTA
- Animated gradient background (subtle)
- Trust badges: "Used by 10,000+ marketers"

Reference style guidelines at /docs/style-guide.md
Use Tailwind CSS.

Problem Section Prompt:

Build a problem section showing 3 pain points:
1. Wasted ad spend from poor tracking
2. Manual reporting eating up hours
3. Decisions based on gut, not data

Each pain point gets:
- Icon (use Heroicons)
- Bold headline
- 2-sentence description
- Visual that reinforces the problem

Match the hero section styling.

Continue this pattern for:

• Solution section
• Features grid
• Social proof/testimonials
• Pricing table
• FAQ section
• CTA section
• Footer

Phase 4: Polish for Production

Review the complete landing page:

1. Test all interactive elements
2. Verify mobile responsiveness
3. Check color contrast for accessibility
4. Add loading states where needed
5. Optimize images (placeholder text for now)
6. Verify all links work
7. Add proper meta tags for SEO

Create a list of any issues found.

Timeline reality check:

• Hero section: 30-60 minutes
• Each additional section: 15-45 minutes
• Polish pass: 1-2 hours
• Total for a full landing page: 4-8 hours

That’s a $5,000+ landing page in a day.

CLAUDE.md: Your Project Brain

CLAUDE.md is a special file that Claude automatically reads when starting a conversation. It’s your project’s brain.

What Goes in CLAUDE.md

# Project: Marketing Site

## Overview
B2B SaaS marketing site for analytics platform.
Target audience: Performance marketers, $5K-$50K/mo ad spend.

## Tech Stack
- Next.js 14
- Tailwind CSS
- Shadcn/ui components
- Deployed on Vercel

## File Structure
/app - Next.js app router pages
/components - Reusable components
/lib - Utility functions
/public - Static assets
/docs - Documentation and guidelines

## Style Guidelines
See /docs/style-guide.md for complete brand guidelines.

Key rules:
- Dark theme only
- Primary color: #3b82f6
- Font: Inter
- All components use Tailwind

## Development Commands
- npm run dev - Start dev server
- npm run build - Production build
- npm run lint - Run linter

## Important Conventions
- Use TypeScript for all new files
- Components go in /components with PascalCase names
- All images optimized and in WebP format
- Mobile-first responsive design

## Current Focus
Building landing page. Hero and features complete.
Next: testimonials section.

Where to Put CLAUDE.md

Pro Tips for CLAUDE.md

1. Keep it concise - Claude reads it every session. Don’t write a novel.

2. Update it as you go - Add new conventions as they emerge.

3. Use the # key - Press # during a session to have Claude automatically add instructions to your CLAUDE.md.

4. Generate it automatically:

claude /init

This creates a starter CLAUDE.md based on your project.

Skills: Extend Claude with Superpowers

Skills are custom instructions that extend what Claude can do. Think of them as reusable prompts that Claude can invoke automatically or that you trigger manually.

Creating Your First Skill

Step 1: Create the skill directory

mkdir -p ~/.claude/skills/landing-page

Step 2: Write SKILL.md

Create ~/.claude/skills/landing-page/SKILL.md:

---
name: landing-page
description: Build high-converting landing pages. Use when creating landing pages, hero sections, or conversion-focused pages.
---

When building landing pages, always follow this structure:

## Page Sections (in order)
1. Hero: Headline, subhead, CTA, hero image
2. Social proof: Logos or testimonial snippet
3. Problem: 3 pain points with icons
4. Solution: How we solve each problem
5. Features: 6-feature grid
6. Testimonials: 2-3 customer quotes
7. Pricing: 3 tiers
8. FAQ: 5-7 questions
9. Final CTA: Repeat main offer
10. Footer: Links and legal

## Conversion Principles
- One primary CTA per section
- Benefit-focused headlines (not feature-focused)
- Social proof near every CTA
- Remove friction from forms
- Mobile-first design

## Technical Requirements
- Use Tailwind CSS
- Semantic HTML
- Accessible (WCAG AA)
- Fast (Core Web Vitals optimized)

Step 3: Use the skill

Either let Claude invoke it automatically when you mention landing pages, or call it directly:

/landing-page Build a page for an email marketing tool targeting e-commerce brands

Marketing Skills to Create

Email Sequence Skill:

---
name: email-sequence
description: Create email sequences for nurture campaigns, onboarding, or sales.
disable-model-invocation: true
---

When creating email sequences:

1. Define the goal (nurture, onboard, convert)
2. Map the customer journey stage
3. Write subject lines that get opens
4. Use the PAS framework (Problem, Agitation, Solution)
5. One CTA per email
6. 3-7 emails per sequence
7. Space emails 2-3 days apart

Output format:
- Subject line
- Preview text
- Email body (300-500 words)
- CTA button text
- Send timing

Ad Copy Skill:

---
name: ad-copy
description: Write ad copy for Meta, Google, LinkedIn, or TikTok ads.
---

When writing ad copy:

1. Identify the platform (different rules for each)
2. Hook in first line
3. Pain point or desire
4. Solution tease
5. Clear CTA
6. Stay within character limits

Platform limits:
- Meta primary: 125 chars
- Meta headline: 40 chars
- Google headlines: 30 chars each
- LinkedIn: 150 chars intro

Analytics Report Skill:

---
name: analytics-report
description: Analyze marketing data and create actionable reports.
context: fork
agent: Explore
---

When analyzing marketing data:

1. Identify top performers by ROI (minimum $100 spend)
2. Identify worst performers losing money
3. Find patterns in converting segments
4. Flag anomalies or data quality issues
5. Recommend 3 quick wins

Output format:
- Executive summary (3 bullets)
- Top performers table
- Bottom performers table
- Optimization recommendations
- Next steps

Skill Locations

MCP Servers: Connect to Everything

MCP (Model Context Protocol) lets Claude Code connect to external tools, databases, and APIs. This is where it gets powerful.

Why MCP Matters for Marketing

Imagine asking Claude:

• “Check Sentry for errors on the pricing page and fix them”
• “Pull the email list from our database and create a segment”
• “Get the latest design from Figma and implement it”
• “Create a GitHub issue for the bug we just found”
• “Query our analytics database and build a dashboard”

MCP makes this possible.

Popular MCP Servers for Marketers

For a complete list, check out the MCP server registry on GitHub.

Installing MCP Servers

Add a remote HTTP server:

claude mcp add --transport http notion https://mcp.notion.com/mcp

Add a remote server with authentication:

claude mcp add --transport http sentry https://mcp.sentry.dev/mcp

Then use /mcp in Claude Code to authenticate.

Add a local server:

claude mcp add --transport stdio --env AIRTABLE_API_KEY=YOUR_KEY airtable \
  -- npx -y airtable-mcp-server

List your servers:

claude mcp list

Check server status (in Claude Code):

/mcp

Marketing MCP Workflow Example

Connect to our PostgreSQL database.
Pull users who signed up in the last 30 days but haven't converted.
Group by traffic source.
Create a CSV with their emails and signup dates.
Then draft a re-engagement email sequence targeting these users.

Claude connects to your database, runs the query, analyzes the data, and writes the emails. One prompt.

No MCP Server? Build Your Own

Here’s the truth:

If there’s no MCP server for what you need, Claude Code can build one for you.

The MCP protocol is open source and well-documented. Claude Code understands it completely. So when you need to connect to a proprietary API, an internal tool, or some obscure service without an existing MCP server…

Just ask Claude to create it.

Example prompt:

I need an MCP server to connect to [SERVICE NAME].

Here's their API documentation: [URL or paste docs]

The MCP server should expose these tools:
1. [ACTION 1] - What it does
2. [ACTION 2] - What it does
3. [ACTION 3] - What it does

Build a complete MCP server in TypeScript using the official MCP SDK.
Include setup instructions.

Real example - Custom CRM MCP:

Build an MCP server for our internal CRM API.

API base URL: https://api.ourcrm.com/v1
Auth: Bearer token via CRM_API_KEY env variable

Tools needed:
1. search_contacts - Search contacts by email or name
2. get_contact - Get full contact details by ID
3. update_contact - Update contact fields
4. list_deals - List deals for a contact
5. add_note - Add a note to a contact

Use the MCP TypeScript SDK.
Store in /mcp-servers/crm-server/
Include README with setup instructions.

Claude Code will:

1. Create the full MCP server with proper TypeScript types
2. Handle authentication
3. Implement all the tools you specified
4. Generate installation instructions

Then install your custom server:

claude mcp add --transport stdio --env CRM_API_KEY=your-key crm \
  -- node /path/to/mcp-servers/crm-server/dist/index.js

Now you can ask Claude things like:

• “Look up John Smith in our CRM and summarize his recent activity”
• “Find all contacts who haven’t been contacted in 30 days”
• “Add a note to the contact with email test@example.com”

The bottom line: Don’t let missing integrations stop you. If it has an API, Claude Code can build an MCP server for it. This is leverage your competitors don’t have.

Hooks: Automate Everything

Hooks are scripts that run automatically before or after Claude takes actions. They’re how you enforce rules and automate workflows.

Hook Events

Practical Hook Examples

Auto-format code after edits:

Create .claude/settings.json:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "npx prettier --write $CLAUDE_FILE_PATH"
          }
        ]
      }
    ]
  }
}

Block dangerous commands:

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "./scripts/block-dangerous.sh"
          }
        ]
      }
    ]
  }
}

In ./scripts/block-dangerous.sh:

#!/bin/bash
if echo "$CLAUDE_TOOL_INPUT" | grep -qE "rm -rf|git reset --hard|drop table"; then
  echo "Blocked dangerous command" >&2
  exit 2  # Exit code 2 blocks the action
fi
exit 0

Auto-run tests when test files change:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "if [[ $CLAUDE_FILE_PATH == *.test.* ]]; then npm test; fi"
          }
        ]
      }
    ]
  }
}

Key Difference: CLAUDE.md vs Hooks

• CLAUDE.md rules are suggestions - Claude weighs them against other context
• Hooks are enforcement - A PreToolUse hook returning exit code 2 always blocks the action

Use CLAUDE.md for guidelines. Use hooks for rules that must never be broken.

Marketing Workflows

Here are copy-paste workflows for common marketing tasks.

Build a Landing Page

Build a landing page for [PRODUCT/SERVICE].

Target audience: [DESCRIBE]
Primary goal: [SIGNUPS/DEMO REQUESTS/PURCHASES]
Key differentiator: [WHAT MAKES YOU DIFFERENT]

Include:
1. Hero with headline, subhead, and CTA
2. Social proof section
3. 3 problem points
4. Solution overview
5. 6 feature cards
6. 2 testimonials
7. Pricing (if applicable)
8. FAQ (5 questions)
9. Final CTA
10. Footer

Tech: Next.js + Tailwind CSS
Style: [DARK/LIGHT], [PRIMARY COLOR]
Reference: [ANY DESIGN INSPIRATION]

Create an Email Sequence

Create a 5-email onboarding sequence for new users of [PRODUCT].

Goal: Get users to [DESIRED ACTION] within 7 days.

User context:
- They signed up for [REASON]
- Main pain point: [PAIN]
- Success looks like: [OUTCOME]

Email structure:
1. Welcome + quick win (Day 0)
2. Core feature tutorial (Day 1)
3. Case study/social proof (Day 3)
4. Address common objection (Day 5)
5. Final push + offer (Day 7)

For each email provide:
- Subject line (A/B variants)
- Preview text
- Email body
- CTA button text
- Recommended send time

Analyze Campaign Data

Analyze this campaign data and provide optimization recommendations.

Data: [PASTE CSV OR DESCRIBE]

I need:
1. Top 5 performing segments (by ROI, min $100 spend)
2. Bottom 5 segments losing money
3. Patterns in what converts
4. Data quality issues
5. 3 optimizations I can make today
6. 3 tests to run next

Context:
- Traffic source: [SOURCE]
- Offer: [DESCRIBE]
- Current CPA goal: $[X]

Build a Dashboard

Build a marketing dashboard that shows:

KPIs:
- Total spend (MTD)
- Total revenue (MTD)
- ROAS
- CPA
- Conversion rate
- Top 5 campaigns by ROAS

Data source: [DESCRIBE]
Refresh: Daily

Use:
- React + Recharts for visualization
- Tailwind for styling
- Dark theme

Include filters for:
- Date range
- Campaign type
- Traffic source

Create Ad Variations

Create ad copy variations for [PRODUCT/SERVICE].

Platform: [META/GOOGLE/LINKEDIN/TIKTOK]
Objective: [CONVERSIONS/TRAFFIC/LEADS]
Target audience: [DESCRIBE]

Create 5 variations using these angles:
1. Pain point focus
2. Benefit focus
3. Social proof focus
4. Urgency/scarcity
5. Curiosity hook

For each variation provide:
- Primary text
- Headline
- Description
- CTA recommendation

Audit a Website for Conversion

Audit this landing page for conversion optimization: [URL or describe]

Analyze:
1. Above-the-fold elements
2. Value proposition clarity
3. CTA visibility and copy
4. Trust signals
5. Form friction
6. Mobile experience
7. Page speed factors
8. Social proof placement

For each issue found:
- Severity (high/medium/low)
- Current state
- Recommended change
- Expected impact

Advanced Patterns

For power users who want to go further.

Multi-Claude Workflows

You can run multiple Claude Code sessions manually using git worktrees:

git worktree add ../project-feature-a feature-a
git worktree add ../project-feature-b feature-b

# Run claude in each directory independently

But if you need those sessions to actually communicate, share a task list, and coordinate their own work - that’s what Agent Teams are for.

Agent teams let you spawn multiple Claude Code instances as a coordinated team with a lead, shared task management, and inter-agent messaging. Think parallel site audits, competing hypothesis debugging, or content pipelines where a researcher, writer, and editor each work in their own context.

Read the full guide: Claude Code Agent Teams: Orchestrate Multiple AI Sessions in Parallel

Headless Mode for Automation

Run Claude without interaction for CI/CD pipelines:

# Run a single prompt
claude -p "Fix all linting errors in src/"

# Output as JSON for scripting
claude -p "List all TODO comments" --output-format stream-json

Automate PR reviews:

# In your CI pipeline
claude -p "Review this PR for bugs and security issues. Output a markdown summary."

Context Management

For long sessions, context gets bloated. Manage it:

Clear frequently:

/clear

Do this every time you start something new.

Use the compact command:

/compact

Summarizes and compresses your conversation history.

Check your context:

/context

See what’s loaded and what’s using tokens.

Tool Permissions

Speed up your workflow by pre-approving tools:

# Skip all permission prompts (use carefully)
claude --dangerously-skip-permissions

# Or configure specific permissions in .claude/settings.json

In .claude/settings.json:

{
  "permissions": {
    "allow": [
      "Read",
      "Write(src/**)",
      "Edit(src/**)",
      "Bash(npm run *)"
    ]
  }
}

Common Mistakes

Mistake 1: Vague prompts

Bad: “Make me a website” Good: “Build a dark-themed landing page for a B2B analytics SaaS targeting performance marketers, with hero, features, pricing, and testimonials sections, using Next.js and Tailwind”

Mistake 2: No style guidelines

Without documented guidelines, Claude makes inconsistent choices. Create a style guide before building.

Mistake 3: Building everything at once

Build section by section. Review each before moving on. Iterate.

Mistake 4: Not using CLAUDE.md

Every project needs a CLAUDE.md. It saves you from repeating context every session.

Mistake 5: Ignoring the research phase

Skip research and you get generic output. Front-load competitor analysis and design inspiration.

Mistake 6: Not clearing context

Long sessions accumulate irrelevant context. Use /clear liberally.

What This Means for Marketers

Claude Code transforms what’s possible for marketers.

What used to require a team:

• Websites: 4 weeks, $20K+ -> 2 days, solo
• Landing pages: 1 week -> 4-8 hours
• Email sequences: Days -> Hours
• Analytics dashboards: Developer dependency -> DIY

The keys to success:

1. Research first - Don’t build blind
2. Document guidelines - Style guide + CLAUDE.md
3. Build iteratively - Section by section
4. Polish matters - Details separate amateur from pro
5. Use the ecosystem - Skills, MCP servers, hooks

Your competitive advantage:

Everyone will eventually use AI. Your edge is using it better - with clearer prompts, better workflows, and deeper integration into your marketing stack.

Start building.

Related Resources

• AI Tools for Media Buyers - Complete AI workflow guide
• Hugo CMS Guide - Build static sites with Claude Code
• Marketing Plan Guide - Use AI for planning
• Campaign Optimization - Data-driven optimization

Have questions about Claude Code for marketing?

Contact me.

Sources

• Claude Code Official Documentation
• Anthropic Engineering: Claude Code Best Practices
• Claude Code Skills Documentation
• Claude Code MCP Documentation
• Claude Code Hooks Reference
• GrowthMarketer: Claude Code Guide
• Builder.io: How I Use Claude Code
• Building Websites with Claude Code