vibe-coding

Files (4)

• SKILL.md
• framework-notes.md · references/
• check-output.py · scripts/
• output-template.md · templates/

SKILL.md (first lines)

# Vibe Coding for GTM

## Overview

"Vibe coding" — coined by Andrej Karpathy in 2025 — is a new paradigm where
you build software by describing what you want to an AI, iterating
conversationally, and shipping without deep-diving into the underlying code.
It is not "no-code." It is "AI-code." You speak. The AI writes. You review.
You ship. For GTM teams, vibe coding means marketing sites, landing pages,
interactive tools, dashboards, and prototypes can be built by marketers and
founders — not just engineers. This skill covers the vibe coding workflow
across 6 platforms, ranked by GTM utility.

## When to Use

Trigger phrases: "vibe coding", "build with v0", "AI landing page", "Cursor
for marketing site", "Lovable app", "Bolt build", "Replit Agent", "AI dev
tool", "build without coding", "Claude Code for GTM", "AI website builder"

## Authoritative Foundations

### Andrej Karpathy — Vibe Coding (Feb 2025)
"There's a new kind of coding I call 'vibe coding,' where you fully give in
to the vibes, embrace exponentials, and forget that the code even exists.
It's possible because the LLMs are getting so good. I just talk to Composer
with SuperWhisper so I barely touch the keyboard. I ask for the dumbest
things like 'decrease the padding on the sidebar by half' because I'm too
lazy to find it. I 'Accept All' always, I don't read the diffs anymore."

**The vibe coding philosophy in 4 principles:**
1. **Describe, don't write.** You provide intent. AI provides implementation.
2. **Iterate at conversation speed.** "Make it darker." "Add a CTA." "Change
   the font." Each takes 5 seconds, not 5 minutes.
3. **Accept and review later.** Ship fast. Fix what breaks. Don't obsess over
   code quality — obsess over user outcomes.
4. **The code is disposable.** If the AI can regenerate a page in 30 seconds,
   you don't need to understand every line. You need to understand if the
   OUTPUT works.

### Pieter Levels (@levelsio) — AI-Assisted Solo Building
Levels builds $100K+/mo products solo using AI tools. His principle: "The AI
writes 80% of the code. I guide it, review the output, and fix the edge cases.
What used to take weeks now takes hours. What used to take a team of 5 now
takes me and an API key."

### Marc Lou (@marc_lou) — AI Shipping Machine
20+ products shipped, primarily vibe-coded. "I don't write code anymore.
I describe what I want. The AI writes it. I test it. If it works, I ship.
If it doesn't, I describe the problem and the AI fixes it."

## The Vibe Coding Stack (Ranked for GTM)

| Tool | Best For | Pricing | Skill Level | Output |
|---|---|---|---|---|
| **v0 by Vercel** | Landing pages, UI components, React apps | Free-$20/mo | Zero code | Production React/Next.js |
| **Lovable** | Full-stack apps, tools, SaaS MVPs | Free-$20/mo | Zero code | Full-stack apps with backend |
| **Bolt.new** | Rapid prototyping, full apps | Free-$20/mo | Zero code | Full-stack apps |
| **Cursor + Claude** | Codebase-level changes, complex features | $20/mo | Some code | Any codebase |
| **Claude Code** | Terminal-based, agentic development | API usage | Technical | Full codebases |
| **Replit Agent** | Quick tools, internal dashboards | $25/mo | Minimal code | Hosted apps |
| **Tempo Labs** | React UI components, design-to-code | Free-$15/mo | Zero code | React components |

## Platform Deep-Dives

### v0 by Vercel (Best for GTM Landing Pages)

**What it is:** Generative UI platform. Describe a page in natural language.
v0 generates React/Next.js/Tailwind code. You iterate conversationally.
Export to your codebase or deploy on Vercel.

**GTM use cases:**
- Landing pages (launch in hours, not weeks)
- Pricing pages (iterate tiers visually in minutes)
- Component libraries (generate on-brand UI components)
- Waitlist pages (ship a waitlist in 30 minutes)
- Marketing microsites (event sites, campaign pages)

**Workflow:**
1. **Describe:** "Build a dark-themed SaaS landing page with a hero section,
   pricing table with 3 tiers, customer logos, and a CTA footer."
2. **Iterate:** "Make the primary color #0066FF. Switch to Inter font. Add
   a testimonial section with 3 quote cards."
3. **Polish:** "Add hover animations to the pricing cards. Make the CTA
   buttons pulse on scroll. Add a mobile hamburger menu."
4. **Export:** Copy the code or `npx shadcn add` the components.

**Pro tips:**
- Reference existing pages: "Make it look like Stripe's pricing page but
  for a cold email tool."
- Upload a design system image for brand consistency
- Use v0's "Fork" feature to create variants (A/B test landing pages)
- Chain prompts: build header first, then hero, then sections

### Lovable (Best for Full-Stack GTM Tools)

**What it is:** Full-stack app builder. Describe an app. Lovable generates
frontend + backend + database. Deploy with one click. Best for tools,
calculators, dashboards — not just static pages.

**GTM use cases:**
- ROI calculators (interactive tools for lead gen)
- Internal dashboards (pipeline tracking, metrics)
- Customer portals (onboarding checklists, health scores)
- Interactive demos (let prospects try before buying)
- GTM micro-tools (email score grader, ICP checker)

**Workflow:**
1. **Describe the app:** "Build an ROI calculator for a cold email tool.
   Users input: monthly emails sent, current reply rate, average deal size.
   Output: projected revenue increase with our tool."
2. **Connect data:** Lovable connects to Supabase (database) and APIs
3. **Iterate:** "Add a PDF export button. Add a comparison table showing
   current vs projected. Add customer testimonials below the calculator."
4. **Deploy:** One-click deploy. Custom domain in settings.

### Bolt.new (Best for Rapid Prototyping)

**What it is:** Browser-based full-stack app builder. Similar to Lovable but
faster iteration cycles. Best for "show me something in 60 seconds."

From LeadMagic/gtm-skills, MIT.

More from LeadMagic/gtm-skills