Reads your codebase
It sees every file, understands the structure, and knows what already exists before writing anything new.
Workshop
Vibe coding. Live build.
Vibe coding with Claude Code.
You don't need to be a developer to build a website. Today you'll learn to guide an AI agent that writes the code for you, then deploy it live.
01 · What it is
An AI agent in your terminal.
Claude Code is an agent that lives in your terminal, reads your entire codebase, writes code, and runs commands, all while you stay in control. Think of it like pair programming with a very fast junior developer. You guide, it executes.
Writes code
Creates files, edits existing ones, builds components. From a single function to an entire page.
Runs commands
Installs dependencies, starts dev servers, runs builds, deploys. Anything you'd type in a terminal.
02 · How it works
The interface.
$ claude
Welcome back. What can I help you with?
> Create a hero section with a gradient background and a tagline
I'll create a hero section. Let me...
Write src/components/Hero.astro
Edit src/pages/index.astro
[Accept] [Reject]You type in plain English
No syntax to learn. Describe what you want and Claude figures out how to build it.
It shows you what it'll do
Before changing anything, Claude shows you exactly which files it will create or edit. You approve or reject every change.
CLAUDE.md is its memory
A file in your project that tells Claude about your codebase, your preferences, and how you want things done. The more context, the better the output.
03 · Best practices
The art of vibe coding.
Vibe coding isn't about writing code. It's about communicating clearly with an AI that writes code for you. Here's how to do it well.
Be specific
Vague prompts like "make it look nice" produce a mess. Specific prompts like "add a hero section with a dark gradient background, white heading text, and a blue CTA button" produce a result.
Start small, iterate fast
Don't try to build everything in one prompt. Start with structure, then add styling, then polish. Small steps mean better results.
Read what it writes
Don't just accept blindly. Scan the changes. You'll catch mistakes early and learn how the code works as you go.
Reset when it gets confused
If Claude starts going in circles or the output gets weird, start a fresh conversation. A clean context window fixes most problems.
Commit often
Every time something works, commit it. Git commits are your save points. If things break, you can always go back.
04 · Today's build
What we're building today.
We're going to build a personal website from scratch using Astro and MDX, deploy it live to the internet, all in under an hour.
- № 01 Scaffold a new Astro project
- № 02 Create pages and components with Claude Code
- № 03 Write blog posts with MDX
- № 04 Style it with your own design
- № 05 Deploy to the live internet
05 · How deployment works
From your laptop to the internet.
When you hit "deploy", your code takes a journey through three stops. Understanding this pipeline is the difference between magic and confusion.
Your computer
You write code (or Claude does). Files live in a folder on your machine. You preview at localhost:4321.
GitHub
Your code gets stored in a repository: a shared folder in the cloud. Every change is tracked. You can always go back.
Cloudflare Pages
Cloudflare sees the new code, builds your site, and puts it on servers worldwide. Anyone with the URL can see it.
You only touch step one. Push your code and the rest happens automatically. That's the magic of continuous deployment. Every push becomes a live update.
06 · Live build
Let's build it together.
Now I'll open the terminal and we'll build this from scratch, live. Watch how I talk to Claude Code, what prompts I use, and how I iterate when things don't come out right the first time.
~/my-site $ claude
Welcome back. What can I help you with?
> Let's build a personal website...
▊ Talk to us
Want to bring vibe coding to your team?
We run hands-on workshops that get your team building with AI in a single session.
Book a workshop
Or write to us at [email protected]