The Vibe Marketer Academy

The Vibe Marketer Academy

A step-by-step guide to go from non-technical to shipping with vibe coding and AI tools.

  • →Build landing pages and simple tools
  • →Automate marketing workflows
  • →No terminal experience required
Start ReadingJoin the Community
Terminal

The Difference

Generic AI gives you advice. Vibe coding tools do the work.

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.

Cursor / Claude Code

You: Build a contact form

The agent creates the file, writes the code, and applies the changes. You review and refine. No copy-paste.

You direct. The agent implements.

What Vibe Coding Is Great At

AI agents excel at work humans find tedious or overwhelming. Understanding this helps you delegate effectively.

Processing large data

They don’t get tired or lose context. What they handle well:

  • Finding patterns humans would miss
  • Transforming data between formats
  • Summarizing unfamiliar codebases
  • Scanning large files and logs

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 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.

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 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. 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.

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

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

View on GitHub →

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
Demo ↗GitHub ↗
App

Blog Starter

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

Static generationTailwindMarkdownTypeScript
Demo ↗GitHub ↗
App

AI Chatbot

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

AI SDKStreamingAuthDatabase
Demo ↗GitHub ↗
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.”

Try It Yourself

You just learned what you need to start. Click through this terminal to see the workflow.

Step 1 of 7: Install Claude Code

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

One command to install. Works on Mac, Windows, and Linux.

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

First lessons and updates. No spam.

Join the waitlist