Back to docs
01Week 1

What is Vibe Coding

The philosophy, the workflow, and why it matters for designers

What is Vibe Coding?

Vibe coding is a development approach where you describe what you want to build in plain English, and AI writes the code. The term was coined by Andrej Karpathy in 2025 and describes a shift from syntax-focused programming to intent-focused programming.

For designers, this is a paradigm shift: you no longer need to learn a programming language to ship real, production-quality interfaces. You need to get better at describing your intentions precisely — which is already a core design skill.

The Old Way vs. The Vibe Way

Old WayNew Way
Learn syntax before building anythingDescribe → Review → Iterate
Days to ship a working prototypeHours to ship a working prototype
Designer hands off to devDesigner ships directly
Lost in translation — design vs codeDesign intent preserved in code
‘I can’t code’ blocks progress‘I can describe clearly’ unlocks progress

The Vibe Coding Loop

Every vibe coding session follows the same 4-step loop:

  • Describe — Write what you want in plain English, as if talking to a senior developer
  • Generate — Claude writes the code based on your description
  • Review — Read the output critically: does it match your intent? Does it look right?
  • Refine — Ask Claude to fix, adjust, or expand specific parts

Tip: The quality of step 1 determines the quality of step 2. Vague prompts produce vague code. Specific prompts produce specific code. This is a design skill — you’re already good at it.

What Makes a Good Vibe Coding Prompt?

Bad prompt (too vague)

"Make a button"

Claude doesn’t know the variant, size, color, behavior, or context. It will guess — and probably guess wrong.

Good prompt (specific intent)

Create a Button component at src/components/Button.tsx.
Following my SKILL.md rules:
- 3 variants: primary (dark bg, white text), ghost (transparent, dark border), danger (red bg)
- Each variant has hover, focus, and disabled states
- Uses Tailwind only — no inline styles
- Props: label (string), variant (primary|ghost|danger), onClick, disabled (boolean)
- Default export

The Designer’s Role in Vibe Coding

Your role is not to write code. Your role is:

  • Design intent — what should this do, how should it feel
  • Creative direction — what does ‘good’ look like for this project
  • Quality control — does this match the intent? Does it feel right?
  • Iteration — what needs to change and why

Think of Claude as a very fast junior developer who needs clear briefs. You are the senior designer / art director.

What Vibe Coding Is NOT

  • It is not ‘asking ChatGPT to do your job’
  • It is not a replacement for design thinking
  • It does not produce perfect code on the first try — review is essential
  • It is not suitable for production systems without proper engineering review
  • It is not magic — garbage in, garbage out

The Tech Stack for This Course

TechnologyRole
Next.js 14React framework — handles routing, rendering, and project structure
TypeScriptType-safe JavaScript — Claude handles the types for you
Tailwind CSSUtility-first CSS — style directly in JSX, no separate CSS files
Framer MotionAnimation library — production-quality motion without the complexity
StorybookComponent documentation and visual testing environment
VercelDeployment platform — push to GitHub, get a live URL

Exercise — Your First Vibe Coding Session

  1. Open Claude and type: ‘I am a designer learning vibe coding. I want to build a personal portfolio page using Next.js and Tailwind CSS. What 5 components should I build first, and why?’
  2. Read the response. Do you agree with Claude’s suggestions?
  3. Pick one component. Write a detailed prompt asking Claude to build it.
  4. Review the output. What would you change?
Terminal Basics