What is Vibe Coding?

Lesson 1

Vibe coding is a workflow where you describe what you want in natural language and let an AI (Claude Code) write the code. You stay in creative control — directing, reviewing, refining — while the AI handles syntax.

The core loop is:

  1. Intend — what do you want to build?
  2. Prompt — describe it in plain language
  3. Review — read what the AI produced
  4. Refine — ask for adjustments, repeat

The demo shows a finished landing hero. Every element in it — the layout, animation, typography system, hover states — was produced through this loop. No code was typed manually; each piece was prompted, reviewed, and refined.

Why this matters for UX engineers

UX engineers (web publishers) bridge design and development. Vibe coding lets you prototype at the speed of thought, ship polished components without memorizing API syntax, and focus your energy on design decisions rather than implementation details.

What Claude Code knows

Claude Code understands HTML, CSS, JavaScript, GSAP, D3.js, Three.js, and most web frameworks. It can read your existing files, follow your design system conventions, and generate code that fits into what you’ve already built.

The mental shift

Stop thinking: “How do I write this?” Start thinking: “What exactly do I want, and how do I describe it precisely?”

That shift — from implementation to specification — is the core skill this course develops.