Coding
for
Marketers

A step-by-step guide to go from nontechnical to coding pro with agentic AI tools.

  • →No terminal experience required
  • →Automate marketing tasks
  • →Build custom tools
Start Reading ↓Join the Community →
Terminal
$ curl -fsSL https://claude.ai/install.sh | bash
$ claude
> Create a landing page for my SaaS
✓ Created Next.js project
✓ Installed dependencies
✓ Built homepage with hero section
✓ Added pricing table
✓ Deployed to Vercel
$ ready█

Quick Start Guide

Get up and running in minutes. Click through this terminal to see the workflow in action.

Step 1 of 7: Install Claude Code
$curl -fsSL https://claude.ai/install.sh | bash▋
What you just learned
One command to install. No Node.js or npm needed.
0 of 7 completed

The Difference

ChatGPT gives you advice. Agentic tools do the work.

You:
Create a contact form component
ChatGPT:
Here's how you can create a contact form...
function ContactForm() {
  return <form>...</form>
}
Now you copy this, create a file, paste it, fix the imports, style it...

You're the middleware between AI and your project.

What Agents Are Great At

Agents excel at work humans find tedious, error-prone, or overwhelming. Understanding this helps you delegate effectively.

Processing Large Data

They don't get tired or lose context

What they handle well
  • Scanning large files and logs
  • Summarizing unfamiliar codebases
  • Transforming data between formats
  • Finding patterns humans would miss
Your role
Decide what matters and why
The mental shift

Stop thinking about what you can build. Start thinking about what you can delegate. You're the director. The agent does the repetitive execution.

What You Can Build

Real marketing projects you can build with AI agents. Each example is a prompt away.

Landing page with A/B variants
"Build a landing page with headline variants I can test"
Pricing page with toggle
"Create a pricing page with monthly/annual toggle"
Competitor comparison page
"Build an alternatives page comparing us to competitors"
Case study template
"Create a case study page with results metrics"
Marketing-friendly CLI toolsClaude can use these
vercelDeploy in seconds
stripeTest payments locally
resendSend transactional email
supabaseDatabase & auth
posthogAnalytics & experiments
ghGitHub from terminal

Just say "deploy this to Vercel" or "set up Stripe payments" and the agent handles the CLI.

Pick one thing you wish existed. Tell Claude to build it. Iterate.

Terminal Basics

The terminal is where you run commands. Claude Code uses it too. These are the same commands you'll see it run.

Navigate Commands
cd folder-nameGo into a folder
cd ..Go up one level
cd ~Go to home folder
lsList files in current folder
pwdShow current location
You don't need to memorize these
Claude Code runs these commands for you. But knowing what they do helps you understand what the agent is doing.
Ask the agent
"What does this command do?" or "Show me how to navigate to my project folder"

What Code Actually Is

Code is just text files in folders. A "project" is a folder with rules about how the files work together.

File Explorer
my-project
page.tsx← your homepage
layout.tsx← wrapper for all pages
package.json← project config

Click folders to explore. This is all a project is: organized text files.

The Software Stack

Modern software has layers. Here's where you fit in.

Stack Overview
1AI Providers
OpenAIAnthropicGoogle

The brains. You don't talk to these directly.

2Agentic Tools← You are here
Claude CodeCursorCodex

Where you work. They talk to AI and execute on your files.

3Languages & Frameworks
Next.jsRailsDjangoLaravel

Pre-built structure. The agent writes in these for you.

4Source Control
GitGitHub

Tracks every change. Your safety net.

5Hosting
VercelHerokuRailway

Runs your code so the world can access it.

As a marketer, you work at layer 2. The agentic tool handles everything else.

Running Locally & Ports

"localhost" means your computer. A "port" is like an apartment number: which app to connect to.

Development ServerStopped
$ npm run dev
localhost
Your computer
:
Separator
3000
Port number
Common ports you'll see
:3000Next.js, React
:5432PostgreSQL
:3001Second app
:6379Redis
:8080Various servers
:5173Vite
Port already in use?
If you see "port 3000 is already in use", either stop the other server or run on a different port: npm run dev -- --port 3001

Environment Variables & API Keys

Secrets like passwords and API keys are stored separately from your code. Never in files that get uploaded to GitHub.

.env.local
# This file is ignored by git - secrets stay local
DATABASE_URL=••••••••••••••••••••
STRIPE_SECRET_KEY=••••••••••••••••
NEXTAUTH_SECRET=••••••••••••••••••••
Why separate files?
Your code goes to GitHub (public or private). Secrets should never be uploaded. .env files are in .gitignore so they're never committed.
Where to get API keys
Each service has a dashboard: Stripe Dashboard, Supabase Settings, etc. Ask Claude "How do I get a Stripe API key?"
⚠️ Never commit secrets
If you accidentally push an API key to GitHub, consider it compromised. Rotate (regenerate) the key immediately. Claude Code warns you if you try to commit .env files.
In production (Vercel, Heroku, etc.)
You'll add these same variables in your hosting dashboard under "Environment Variables". Each environment (dev, staging, production) has its own secrets.
Ask the agent
"Help me set up environment variables for Stripe" or "What env vars do I need for Supabase?"

Context & Tokens

AI models have a "context window", a limit on how much they can remember in one conversation.

Context Window0 / 200,000 tokens
You: Add a contact form to the homepage+12
Plenty of room. Keep chatting!
What are tokens?
Tokens are chunks of text, roughly 4 characters or 3/4 of a word. "Hello world" = 2 tokens. Everything you send AND receive counts toward the limit.
When it fills up
The AI starts "forgetting" earlier messages. For long projects, start new conversations and re-explain context as needed.
Tips for managing context
• Break big tasks into separate conversations
• If Claude forgets something, just remind it
• Long code files use lots of tokens, so reference files by name instead of pasting

Markdown Files

Markdown (.md) is a simple way to format text. It's used for READMEs, docs, and notes.

Markdown Syntax
You write
# Heading 1
## Heading 2
**bold text**
*italic text*
[Link](url)
- Item 1\n- Item 2
`code`
```js\ncode block\n```
It becomes
Heading 1
Heading 2
bold text
italic text
Link
• Item 1
• Item 2
code
code block
Why markdown?
It's readable as plain text but renders nicely on GitHub, in editors, and documentation sites. You're already writing in markdown if you've used Notion or Slack formatting.
Ask the agent
"Help me write a CLAUDE.md for my project" or "Create a README that explains how to install and run this"

How It Actually Works

You describe what you want. The agent reads your code, makes a plan, and executes.

You:
Add a contact form with name, email, and message fields.
Your job
Clear communication, reviewing changes, steering direction
Agent's job
Reading docs, writing code, checking for errors

Agent Modes

Control how much autonomy your agent has. Start safe, speed up as you get comfortable.

Default Mode

You approve each file change before it's applied

Pros
  • + Safe for learning
  • + See every change
  • + Easy to reject mistakes
Cons
  • - Slower workflow
  • - Lots of clicking
Tip
Great for beginners. You'll learn by reviewing what the agent does.
The progression
Default→Auto-accept→Plan mode for big tasks

Most developers land on auto-accept with occasional plan mode. YOLO is for specific situations.

The Iteration Loop

You don't need to get it right the first time. Describe, review, refine.

Iteration 1 of 4
You:
Change the headline to 'Ship faster with AI'
Updated Hero.tsx headline
The pattern
Describe→Agent builds→Review→Refine→Repeat
Ask the agent
"Build me a landing page with an email signup form" — then iterate from there

Git & GitHub

Your safety net. Every change is tracked, nothing is lost. Here's the workflow in 5 steps.

BranchStep 1 of 5
Create a safe copy to work on
Like duplicating a Google Doc before editing — if you mess up, the original is untouched.
Tell Claude:
“Create a new branch called feature/add-pricing-page”
You don't need to remember any git commands. Just describe what you want — Claude handles the rest. If something goes wrong, tell Claude “undo the last commit” or “go back to the main branch.”
Ask the agent
"Create a new branch, commit my changes, and push to GitHub"

Learning by Asking

You don't memorize syntax. You ask "why" and build intuition over time.

Understanding Stripe Webhooks
You:
Why do I need a webhook for Stripe instead of just checking after checkout?
Claude:
The user might close the browser before your site gets the success callback. Webhooks guarantee Stripe tells you about the payment directly.
Ask for narration: "Explain each step as you go"
Ask why: "Why this approach instead of X?"
Ask for diffs: "Show me what you changed"

Week 1: "What does this do?" → Week 8: "I know what we need" → Week 12: "Try this instead"

Debugging

Errors are normal. Paste them to the agent and ask "What does this mean?"

Error Log
Cannot read properties of undefined
Translation
Accessing something that doesn't exist yet
Common fix
Add optional chaining: users?.map(...)
Error 1 of 4
The debugging loop
1. Copy error
Full message
2. Paste to agent
"What happened?"
3. Review fix
Then apply

If a fix makes things worse, undo with: git checkout .

Ask the agent
"What does this error mean and how do I fix it?" — paste the full error message

Testing & TDD

Tests are code that checks if your code works. Write tests first, then the code.

Test-Driven Development
Write a failing test:
test("validates email", () => {
expect(isValid("a@b.com")).toBe(true);
});
FAIL: isValid is not defined
Without tests
Change → Manual check → Miss bug → Deploy → User finds it at 2am
With tests
Change → npm test → Bug caught → Fix → Deploy confidently
Ask the agent
"Let's build this using TDD - write the tests first"

Extending Your Agent

Give your AI more powers. Think of it as assembling a team of specialists.

MCPsExternal connections
stripe
Check payments & subscriptions
posthog
Query analytics data
browser
Scrape competitor sites
slack
Send notifications
How to ask
"What's the best package for sending transactional emails?"
"Connect to Stripe so you can check my subscription revenue"
"Add a chart showing signups over time"

Skills

Skills are reusable capabilities you can add to your AI agent. They give Claude domain expertise: best practices, patterns, and procedural knowledge.

Without skills
Claude uses general knowledge. Works, but may miss framework-specific patterns.
With skills
Claude follows expert-level best practices for that specific domain.
Installing a skillOne command
# Install any skill from the directory
$ npx skills add owner/skill-name
# Skills work with Claude Code, Cursor, Copilot & more
Popular skills from skills.sh
vercel-react-best-practices
React & Next.js patterns
42K
web-design-guidelines
UI/UX best practices
32K
shadcn-ui
Component library patterns
28K
anthropics/claude-code frontend-design
Official Claude UI design
600+
Browse all skills at skills.sh →
Marketing SkillsFor marketers

CRO, copywriting, SEO, analytics, and growth engineering patterns for AI agents.

$npx skills add coreyhaines31/marketingskills
View on GitHub →
Ask the agent
"What skills should I install for building a SaaS?" or "Find me a skill for Stripe integration"

Tech Stacks

AI tools work best with popular languages. Start with Next.js unless you have a reason not to.

Next.jsRecommended
Language
TypeScript
Deploy to
Vercel
Used by
Notion, TikTok, Nike
Strengths
Runs everywhereHuge ecosystemBest AI support
Good for
Marketing sitesSaaS appsE-commerceDashboards
AI Support: Excellent. Most code online is JS/TS.
Ask the agent
"I want to build [your project]. What tech stack should I use?" or "Help me choose between Next.js and Rails"

Learn by Exploring

Clone these open source Vercel templates to see how real projects are built. Poke around, break things, ask Claude to explain what you find.

Website

Portfolio Starter Kit

Demo ↗GitHub ↗

A simple portfolio and blog built with Next.js and Markdown. Great for learning how pages and content work together.

Markdown-based contentRSS feedSEO optimizedDark mode
App

Blog Starter

Demo ↗GitHub ↗

A statically generated blog using Next.js and Markdown. Shows how to build content-driven apps.

Static generationTailwind CSSMarkdown postsTypeScript
App

AI Chatbot

Demo ↗GitHub ↗

A full-featured chatbot built with the Vercel AI SDK. See how AI integrations work in a real app.

AI SDKStreaming responsesAuthenticationDatabase
Clone and explore
$ git clone https://github.com/vercel/nextjs-portfolio-starter
$ cd nextjs-portfolio-starter
$ npm install && npm run dev
Ask the agent
"Explain how this project is structured" or "Start a new project using the AI chatbot template"

Planning Before You Build

Spend 10 minutes thinking upfront, save 10 hours fixing later. Before writing code, map out your data.

Entity Relationship DiagramClick a table
No timestamps
Add created_at, updated_at
Hard delete
Add deleted_at for soft deletes
Store calculated values
Calculate on read
Ask the agent
"Before we build this, help me plan the database structure. What tables do I need and how should they relate?"

Authentication & Permissions

Don't roll your own auth. Use battle-tested libraries that handle the security edge cases for you.

Recommended Auth Libraries
Better Auth
Modern, flexible, full-featured
Best for: New projects
Where to check permissions
UI only
User hides button with inspect
Backend only
Works but confusing UX
Both
Secure and good UX
Think about roles early
adminuserguestownermember
Ask the agent
"Set up authentication using Better Auth. I need roles for admins and regular users, and users should only see their own data."

Designing Your API

Your API is how your frontend talks to your backend. Plan your routes before building.

REST API PatternClick to explore
Description
List all users
Returns
[{ id, name, email }]
Use nouns, not verbs
/users not /getUsers
Plural resources
/posts not /post
Version your API
/api/v1/users
Consistent errors
{ error: 'message' }
Ask the agent
"Help me design the API for my app. I need endpoints for users, posts, and comments. Show me the routes and what each returns."

Using Libraries & Packages

Don't reinvent the wheel. The open source ecosystem has battle-tested solutions for almost everything.

Package Ecosystems
$ npm install package-name
How to evaluate a package
Stars & usage
More users = more battle-tested
Recent updates
Maintained in last 6 months?
Security
No known vulnerabilities?
Weekly downloads
Active community?
Popular packages for common tasks
date-fns
Date formatting
zod
Validation
resend
Transactional email
stripe
Payments
next-auth
Authentication
prisma
Database ORM
Use a package when...
  • • It's a solved problem (auth, dates, email)
  • • Security matters (crypto, payments)
  • • It's well-maintained and documented
Build yourself when...
  • • It's core to your product
  • • Packages are abandoned or bloated
  • • You need very specific behavior
Ask the agent
"What's the best package for handling file uploads in Next.js? Compare the options and help me pick one."

UI Design & Components

You don't need to design from scratch. Use proven design systems and let AI help you build.

Recommended Tools
shadcn/ui
Copy-paste components with full control
AccessibleCustomizableNo lock-in
Think in components
ButtonCardFormInputModalTableTabsToastAvatarBadgeDropdownAlert
Stick to one system
Mixing design systems creates visual chaos
Mobile first
Design for small screens, then expand
Ask the agent
"Use shadcn/ui to build a settings page with a form for updating profile info. Make it responsive."

User Experience (UX)

Think through every user journey. Handle the awkward moments—empty screens, loading, errors, success.

UI StatesEvery screen needs these
No posts yet. Create your first one!
Map your user flows
Land→Sign up→Onboard→First action→Success!
Common UX mistakes
No loading indicator
User clicks again, duplicates action
'Something went wrong'
User has no idea what to do next
Desktop-only design
60% of users can't use your app
5-step signup
Users abandon before finishing
Ask the agent
"Walk me through the UX for my signup flow. What happens at each step? What are the error states? What does the empty dashboard look like?"

Avoiding Hardcoded Regrets

If it might change, don't hardcode it. Future you will thank present you.

Hardcoded vs Configurable
Pricing
const price = 29;
Limits
if (users > 100) { ... }
URLs
const api = "https://api.prod.com"
Emails
sendEmail("support@company.com")
Things that should be configurable
PricingFeature flagsAPI URLsEmail addressesLimits & quotasThird-party keysTimeoutsDefault values
Environment variables
Secrets, URLs, per-environment settings
Config files
Business logic, pricing tiers, feature flags
Ask the agent
"I want to add pricing tiers. Help me set this up so I can change prices without touching code."

Database Migrations

Migrations are version control for your database. They let you evolve your schema safely over time.

Migration WorkflowClick each step
Generate migration
npx prisma migrate dev --name add_status
Creates a new migration file
Why not just edit the database directly?
In production, you can't. Migrations give you a repeatable, reversible way to change your schema that works across development, staging, and production.
Common migration operations
Add column
Rename column
Add index
Add table
Remove column
Change type
Add relation
Backfill data
Ask the agent
"I need to add a 'status' field to users. Walk me through creating and running a migration."

Security Checklist

Security isn't optional. These basics protect you and your users from common attacks.

Security Basics0/8 complete
Cybersecurity SkillsSecurity

OWASP audits, dependency scanning, prompt injection protection, and more.

owasp-audit
Check for OWASP Top 10 vulnerabilities
dependency-audit
Scan packages for known issues
prompt-injection
If building AI features
$npx skills add briiirussell/cybersecurity-skills
View on GitHub →
Ask the agent
"Run an OWASP security audit on my app. Check for exposed secrets, missing input validation, and common vulnerabilities."

Error Logging & Monitoring

If something breaks at 2am, you need to know what happened. Set up error tracking before you need it.

Production Logs
● Waiting for logs...
Log these
  • • Errors with stack traces
  • • Important user actions
  • • External API failures
  • • Performance issues
Never log
  • • Passwords or tokens
  • • Full credit card numbers
  • • Personal health info
  • • Anything GDPR-sensitive
Popular services
Sentry
Error tracking, stack traces, alerts
LogRocket
Session replay, see what user did
Axiom
Log aggregation, fast search
Datadog
Full observability platform
Ask the agent
"Set up Sentry for error tracking. I want to be notified when errors happen in production."

Testing in the Browser

Automate clicking through your app. Catch bugs before your users do.

E2E Test: User Signup
Navigate to /signup
Fill email: "test@example.com"
Fill password: "********"
Click "Create account"
Wait for redirect to /dashboard
Verify text "Welcome back"
E2E / Browser Tests
Test the full user flow. Slow but catches real bugs.
Playwright, Cypress, Agent Browser
Unit Tests
Test individual functions. Fast, run on every change.
Jest, Vitest, RSpec
What to test first
Signup flowLogin flowCore actionPayment flowPassword resetLogout flow
Ask the agent
"Write a test that signs up a new user, logs them in, and verifies they see the dashboard."

Integrating AI Into Your Product

AI features can delight users and save them time. Here's how to add them the right way.

Common AI Patterns
Chat
Conversational AI assistant
Examples: Customer support bot, coding assistant
Recommended SDKs
Vercel AI SDK
Next.js apps, streaming UI
TypeScript
Anthropic SDK
Direct Claude access
Python/TS
OpenAI SDK
GPT models
Python/TS
LangChain
Complex AI pipelines
Python/TS
Don't forget
Rate limiting
Protect against abuse and runaway costs
Streaming
Show responses as they generate
Caching
Cache identical requests to save money
Fallbacks
Handle API outages gracefully
Watch your costs
AI API calls cost money. Add rate limiting, cache responses where possible, and set up billing alerts. Start with smaller models and only upgrade if needed.
Ask the agent
"Add an AI feature that summarizes long articles into 3 bullet points. Use the Vercel AI SDK with streaming."

Join the Community

Learn from other marketers who are building with AI. Get help when you're stuck. Share what you're creating.

Terminal
$ subscribe --email
>
you@example.com█