Generic chatbot
You
Build a contact form
AI
Here's how to create a contact form… [code snippet]. Now you copy this, create a file, paste it, fix the imports…
You're the middleware between AI and your project.
Course · AI Skills Track
Technical AI for Marketers
Build real marketing assets with AI. Websites, landing pages, email capture tools, automations — six chapters that take you from zero to shipping. No CS degree required.
45-60 min readNo coding experience requiredBuilt for marketers
1
Chapter 1
The Mindset
Before you write a single prompt or open a terminal, the most important shift is understanding what kind of tool you're working with — and what that changes about how you work.
The differenceGeneric AI gives you advice.
Generic AI gives you advice.
Vibe coding tools do the work.
The distinction sounds subtle. The outcome is not.
Cursor / Claude Code
You
Build a contact form
Agent
Creates the file, writes the code, applies the changes. You review and refine. No copy-paste.
You direct. The agent implements.
What it's great atAI agents excel at work
AI agents excel at work
humans find tedious.
Understanding this helps you delegate effectively — and stop trying to do everything yourself.
Processing large data
Agents don't get tired or lose context. They can scan thousands of lines, find patterns humans would miss, transform data between formats, and summarize unfamiliar codebases — without slowing down.
What the agent handles
- Finding patterns across large datasets
- Transforming data between formats
- Summarizing unfamiliar codebases
- Scanning large files and logs
Your role
You decide what matters and why.
The mental shift: stop thinking about what you can build. Start thinking about what you can delegate.
What You Can Build
Real marketing projects you can build with vibe coding. Each example is a prompt away.
- Landing page with A/B variants
"Build a landing page with headline variants I can test"Prompt to try
"Build a landing page with headline variants I can test" - Pricing page with toggle
"Create a pricing page with monthly/annual toggle"Prompt to try
"Create a pricing page with monthly/annual toggle" - Competitor comparison page
"Build an alternatives page comparing us to competitors"Prompt to try
"Build an alternatives page comparing us to competitors" - Case study template
"Create a case study page with results metrics"Prompt to try
"Create a case study page with results metrics"
Pick one thing you wish existed. Tell your agent to build it. Iterate.
Up next
Chapter 2 · Get Set Up
2
Chapter 2
Get Set Up
One-time setup. Terminal basics, Node.js, and your first project. You only do this once — after this, you're operational every time you sit down.
Terminal Basics
The terminal is where you run commands. Cursor and Claude Code use it too. These are the same commands you’ll see them run.
Navigate commands
cd folder-nameGo into a foldercd ..Go up one levelcd ~Go to home folderlsList files in current folderpwdShow current location
You don’t need to memorize these. Your agent runs them for you, but knowing what they do helps you understand what it’s doing.
Install Node.js
Before using Cursor or Claude Code with a project, you need Node.js. It’s a runtime that lets you run JavaScript tools like npm.
Step 1 of 3
Go to nodejs.org and download the LTS (Long Term Support) version for Mac.
Once Node.js is installed, you’re ready to open Cursor or install Claude Code and start your first project.
Getting Started
From zero to your first project in 5 steps.
No coding knowledge required.
Step 1 of 5
Open Terminal
On Mac: Cmd+Space, type 'Terminal'. On Windows: search 'Command Prompt' or 'PowerShell'. A window with a blinking cursor. That's where you type commands.
That’s it. You just need a description of what you want to build.
Up next
Chapter 3 · How Code Works
3
Chapter 3
How Code Works
You don't need to memorize syntax. But understanding what code is, how the stack is layered, and where you fit in it — that gives you the mental model to direct your agent confidently.
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
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.
1 AI providersOpenAI, Anthropic, GoogleThe brains. You don't talk to these directly.
2 Agentic toolsCursor, Claude Code, Codex← You are here
3 Languages & frameworksNext.js, Rails, DjangoPre-built structure. The agent writes in these for you.
4 Source controlGit, GitHubTracks every change. Your safety net.
5 HostingVercel, Heroku, RailwayRuns your code so the world can access it.
As a marketer, you work at layer 2. The agentic tool handles the rest.
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
Run
Up next
Chapter 4 · Ship and Learn
4
Chapter 4
Ship and Learn
Git keeps you from losing work. Good prompts unlock better output. Debugging is just copy-paste. This chapter is about building the habits that make you faster every week.
Git & GitHub
Your safety net. Every change is tracked; nothing is lost.
Git
- Lives on your computer
- Tracks every change
- Creates save points (commits)
- Works offline
GitHub
- Lives on the internet
- Stores code online
- Enables collaboration
- Connects to deployment (e.g. Vercel)
git push uploads changes. git pull downloads them.
Learning by Asking
You don’t memorize syntax. You ask “why” and build intuition over time.
You:
Why do I need a webhook for Stripe instead of just checking after checkout?
Agent:
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(...)
The loop: 1) Copy error 2) Paste to agent 3) Review fix, then apply.
If a fix makes things worse, undo with git checkout .
Skills
Skills are reusable capabilities you add to your AI agent. They give it domain expertise: best practices, patterns, and procedural knowledge.
Without skills
The agent uses general knowledge. Works, but may miss framework-specific or marketing-specific patterns.
With skills
The agent follows expert-level best practices for that domain.
Marketing skills (for marketers)
CRO, copywriting, SEO, analytics, and growth engineering patterns for AI agents. Works with Claude Code, Cursor, Copilot, and more.
Install
npx skills add coreyhaines31/marketingskills
Tech Stacks
AI tools work best with popular languages. Start with Next.js unless you have a reason not to.
Next.js (recommended)
Language: TypeScript. Deploy to: Vercel. Used by: Notion, TikTok, Nike.
Strengths: Runs everywhere, huge ecosystem, best AI support. Good for: marketing sites, SaaS apps, e‑commerce, dashboards.
Not sure? Ask your agent: “I want to build [your project]. What tech stack should I use?”
Learn by Exploring
Clone these open-source Vercel templates to see how real projects are built. Poke around, break things, ask your agent to explain.
Website
Portfolio Starter Kit
A simple portfolio and blog with Next.js and Markdown. Great for learning how pages and content work together.
Markdown contentRSSSEODark mode
App
Blog Starter
A statically generated blog with Next.js and Markdown. Shows how to build content-driven apps.
Static generationTailwindMarkdownTypeScript
git clone https://github.com/vercel/nextjs-portfolio-starter cd nextjs-portfolio-starter npm install && npm run dev
Then ask your agent: “Explain how this project is structured.”
Up next
Chapter 5 · Marketing Toolkit
5
Chapter 5
Marketing Toolkit
The craft layer. Prompt engineering for copy, building your first lead capture page, auditing your site for SEO, and wiring in analytics that actually tell you something useful.
Prompt Engineering for Marketing Copy
Your AI is only as good as the brief you give it.
Think about Harvey Specter in Suits. He never walked into a deposition and said, "just say something good." Every ask was precise: who the audience is, what outcome he needed, what tone to strike, and what constraints not to cross. That's what separates a great brief from a vague one — and it's exactly what separates great AI output from mediocre output.
Most people treat their AI like a search engine. They fire off one sentence and hope for magic. Then they're disappointed when they get something generic. The AI isn't underperforming — you just didn't give it what it needed.
The anatomy of a strong marketing prompt
Every strong marketing prompt answers five questions:
Role
Act as a direct-response copywriter
Tell the AI what kind of expert to be.
Audience
for B2B SaaS founders, 30–45
Who is reading this? Be specific about their situation.
Context
who just started a free trial
What do they know? What moment are they in?
Constraint
under 50 characters, no emojis
Format, length, tone restrictions.
Goal
create urgency without pressure
The one job this copy needs to do.
Variants
give me 5 options
Ask for options. Volume gives you range.
Weak vs. strong: see the difference
Pick an example and compare the prompts side by side.
Weak prompt
Write a good email subject line for our product launch.
Likely output:
Introducing Our New Product! 🎉
Strong prompt
Every element of the anatomy is in here. Click to reveal it.
Three habits that immediately improve your output
- Ask for options, not one answer. "Give me 5 variants" forces the AI to explore the space. You'll almost always find something better in option 3 or 4.
- Add the anti-list. Tell it what NOT to do. "No buzzwords. No exclamation marks. Never say 'game-changing' or 'revolutionary.'" Constraints unlock creativity.
- Describe the reader's emotional state. "Write for someone who's tried three other tools and is skeptical." The AI will adjust the tone and argument style accordingly.
You can apply this framework to anything: ad copy, landing pages, email sequences, social posts, even internal briefs. The skill is transferable.
Building an Email Capture Page
Your first real marketing asset — built, deployed, and collecting leads.
In Billions, Bobby Axelrod's team doesn't make a move without knowing exactly what they want out of it. The position is defined before they enter. An email capture page works the same way: you know the offer, you know the audience, you know the follow-up. Everything on the page is designed to get one specific person to do one specific thing.
This is probably the most useful first project you can build. It has a real outcome (leads), teaches you the core loop (form → API → email), and introduces you to environment variables and deployment — without requiring a database or any backend complexity.
Build it in 4 steps
Each step includes the exact prompt to give your agent.
Step 1 of 4
Define the offer clearly
Nobody fills out a form to join 'a newsletter.' They fill out a form to get something specific: the checklist, the swipe file, the 5-day course, the free audit. Your capture page lives or dies on whether the offer is concrete. Ask yourself: 'If I sent this page to a stranger, would they immediately know what they're getting and why it's worth their email?'
Prompt for your agent
"Build a landing page for a lead magnet called 'The 7-Day Vibe Marketing Quickstart.' It should have a headline, a 3-bullet value list, an email capture form, and a thank-you state. Mobile-first, no navigation, no footer distractions."
What you'll know after this
- How forms connect to email APIs
- What environment variables are and why they exist
- The deploy → test → iterate loop
Tools you'll use
- Next.js (the framework)
- ConvertKit / Mailchimp / Loops (email)
- Vercel (deploy in one command)
Time to first lead
- Page built: ~20 min
- Email integration: ~15 min
- Deployed and live: ~5 min
SEO + AI Auditing
Search engines reward what's technically correct and genuinely useful. Your agent can get you most of the way there.
In Game of Thrones, Varys and Littlefinger both operated on information. The difference was Varys understood the system — who held power, why, and how it moved — while others just reacted to what was in front of them. SEO is the same. You can write content all year and wonder why nothing ranks, or you can understand the signals that search engines actually use and make sure your site sends the right ones.
The good news: most of what makes a site technically well-optimized is just configuration. Meta tags, structured data, sitemaps, image alt text. None of it requires creativity — it requires correctness. And correctness is something your agent is very good at.
What your AI agent can check and fix today
Meta titles and descriptions
Every page should have a unique title tag under 60 characters and a meta description that drives clicks. Ask your agent: "Audit every page in /app for missing or duplicate meta tags and generate correct ones."
Open Graph tags
These control how your page looks when shared on LinkedIn, X, or Slack. Without them, you get the wrong title, no image, and a terrible first impression. Agent prompt: "Add Open Graph and Twitter card meta tags to all pages."
Sitemap.xml and robots.txt
Search engines need a map of your site. Next.js can auto-generate one. Agent prompt: "Generate a sitemap.xml that includes all public routes and submit it to Google Search Console."
Core Web Vitals
Google measures how fast your page loads and how stable the layout is. Your agent can identify the heavy images, render-blocking scripts, and layout shift issues that tank your score.
The 80/20 of technical SEO
Fix these five things and you'll be ahead of most marketing sites:
- 1Unique, keyword-relevant meta titles and descriptions on every page
- 2Open Graph tags so shares look good on social
- 3Sitemap.xml submitted to Google Search Console
- 4All images use next/image with meaningful alt text
- 5At least one H1 per page, clear heading hierarchy below it
Analytics Setup
You can't improve what you can't see. Here's how to wire in real-time visibility without the complexity.
In Billions, the war room runs on data. Every position on the board, every exposure, every risk metric is visible in real time. Axe Capital doesn't fly blind — they can't afford to, and neither can you. Running a marketing site without analytics is like running a campaign without knowing whether your ads are showing to anyone.
The good news is that getting this right takes less than an hour. You add a script tag, define a few events, and suddenly you know exactly which CTA people click, where they drop off, and which traffic sources actually convert. That's the difference between guessing and knowing.
Most marketing sites have one of two problems: no analytics at all, or analytics that measure vanity metrics (page views) but not the things that actually matter (do people click the CTA? where do they leave?). Here's what you should be able to answer at a glance:
Where is traffic coming from?
So you know which channels to double down on and which to cut.
What's the conversion rate on my main CTA?
The single most important number on any marketing page.
Where do people drop off?
Knowing WHERE people leave tells you WHERE to fix the copy or UX.
Which pages drive the most signups?
Tells you what content resonates and what to create more of.
You don't need a data analyst. You need the right tool installed correctly with the right events defined. Everything else follows.
Up next
Chapter 6 · The Bigger Picture
6
Chapter 6
The Bigger Picture
For every marketer — whether you're just starting out, mid-career, or leading a team. What changes when you can build, what stays the same, and why speed of iteration is the real competitive moat.
The Business Case
For marketers not yet building — and the people managing them.
Think about the first season of Suits. The partners who adapted to how work was actually getting done moved faster, served clients better, and stayed relevant. The ones who kept doing things the way they'd always been done weren't wrong — they were just slow. And in a competitive market, slow is its own kind of wrong.
Vibe marketing isn't about replacing anyone. It's about removing the bottleneck between "I have this idea" and "this thing is live." Right now, for most marketers, that gap takes days or weeks and requires getting a developer's time. With these tools, it takes hours — and you own the result.
What changes when a marketer can build
Before
A/B test idea sits in a Notion doc for 3 weeks waiting for dev time
After
You spin up a variant page in an afternoon and start collecting data by Friday
Before
"We need a landing page for this campaign" triggers a 2-week design + dev cycle
After
You build and deploy a focused, on-brand campaign page in a day
Before
Analytics don't track conversions correctly — developer ticket filed, waiting
After
You add the event tracking yourself in 20 minutes using your agent
Before
Lead magnet is a PDF someone manually emails after signup
After
You build an automated capture-and-deliver flow that runs on its own
What it doesn't replace
Vibe marketing is not "fire your developer." It's "stop waiting for a developer for things that don't need one."
What you can own now
- Marketing pages and landing pages
- Lead capture flows and email integrations
- Analytics and conversion tracking
- Lightweight internal tools
- Campaign microsites
- SEO and metadata at scale
What still needs a developer
- Core product engineering
- Security-critical payment systems
- Complex database architecture
- High-scale infrastructure
- Deep API integrations with custom business logic
- Anything that requires a code review
The real competitive advantage
The marketers winning in 2026 aren't necessarily the ones with the biggest budgets or the most followers. They're the ones who can move from insight to experiment to result faster than anyone else. Speed of iteration is the moat. Vibe marketing is how you build it.
You don't need to become a developer. You need to become someone who isn't blocked by not being one.
CommunityBuild alongside
Build alongside
other marketers.
Ask questions, share what you're building, and get unstuck faster. The community moves at the pace of people who are actually shipping.
Ask anything
No question too basic
Share your builds
Real feedback from peers
Early access
New guides first
Free to join · No credit card · Unsubscribe any time