preibisch.biz Paul Preibisch  ·  AI Developer  ·  paul@preibisch.biz

Live Webinar · preibisch.biz

Ship Your First
AI-Powered Website
with Claude Code

No coding experience needed — just follow along and copy & paste

Paul Preibisch
AI Automation Specialist
preibisch.biz

What You'll Walk Away With

🌐
A real website — live on the internet, on your domain
Not a mockup. Not a localhost. An actual URL you can share the moment the session ends.
🔊
Then Claude starts talking to you
AgentVibes gives your AI agent a voice — narrating every decision out loud as it works.
🤖
Then we upgrade your team
BMAD gives you a PM, Architect, Designer, and Dev. All inside Claude Code.
💡
Then we get AI to generate ideas for you
/bmad-brainstorming — 36 creative techniques, guided by your AI Analyst. Never stare at a blank page again.
🎨
Then we make it beautiful
/frontend-design rewrites your page with a unique visual direction. One command.
🚀 Deploy — Before You Begin

Host Your Website for Free

✅ A free Vercel account — that's it. Seriously.

Sign up at vercel.com — no credit card required. Takes 60 seconds.

🌐 Open in your browser
vercel.com
🔗
The Vercel MCP connector in Claude Code handles all authentication via OAuth — no manual config needed
🆓
Free tier is more than enough for this session — unlimited hobby projects
🚀 Deploy — How To Do It

From Zero to Live URL

1
In Claude Code Desktop → Settings → Extensions → Vercel → Connect
A browser window opens — log in with your Vercel account. One click. Done.
2
Go back to the Claude chat and paste this prompt — replace [your business name]
Use your real business name or project name
💬 Paste into: Claude Chat — replace [your business name] → then press Enter
Create a landing page for [your business name] and deploy it to Vercel
3
Watch Claude write, build, and deploy — then click the live URL it returns
No other steps. Your site is live.
🚀 Deploy — Why It Matters

A real website. A real URL.
No coding. No setup.

⭐
Key Benefit: Live on the internet in under 2 minutes
Share the URL right now — it works on every device, in every browser
📱
Works on desktop, tablet, and mobile — automatically
🔄
Update it anytime — just ask Claude: "change the headline to…"
Paul Demonstrates via Live Demo
05

Section 05

Connect Your
Domain

Make it yours — yourname.com 🌐

🌐 Domain — Before You Begin

First: Get Your Domain

1
Go to spaceship.com and create a free account
Spaceship has an MCP server Claude can connect to directly — recommended for this workflow
2
Search for and purchase your domain name
e.g. yourbusiness.com — most .com domains are $10–$15/year
🌐 Open in browser
spaceship.com

Don't have Spaceship? Skip ahead — the next slide works with any registrar (GoDaddy, Namecheap, etc.)

🌐 Domain — Path A: Spaceship MCP

Let Claude Set Up DNS For You

Ask Claude to install the Spaceship MCP, restart, then have Claude add your DNS records automatically

💬 Step 1 — Paste into: Claude Chat → then restart Claude Code
Install the Spaceship MCP server from https://github.com/bartwaardenburg/spaceship-mcp so I can manage my domain DNS records

⚠️ Restart Claude Code after installation

MCP servers activate only in a fresh session — close and reopen Claude Code, then continue with Step 2

💬 Step 2 — After restarting: replace yourdomain.com → then press Enter
I have my domain at Spaceship and my site deployed on Vercel. Use the Spaceship MCP and Vercel MCP together to connect yourdomain.com to my Vercel deployment — get the correct DNS records from Vercel and configure them in Spaceship automatically.
🌐 Domain — Path B: Any Registrar

Using GoDaddy, Namecheap, or Any Registrar?

1
Install the Claude Chrome Extension — it lets Claude see your browser
Works with GoDaddy, Namecheap, Google Domains, and any other registrar
🌐 Open in Chrome — install the extension
chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn
2
Log in to your registrar DNS panel, then paste this into Claude:
💬 Paste into: Claude Chat (with extension installed) → then press Enter
Please help me point my domain to Vercel by adding these DNS records in my registrar control panel: A record @ pointing to 76.76.21.21 and CNAME www pointing to cname.vercel-dns.com. I am currently in my registrar DNS panel — walk me through where to add these.
🔊 AgentVibes — Why It Matters

Hear your AI think,
decision by decision.

Every command, every file written, every choice Claude makes — narrated out loud in plain English as it happens.

Paul Demonstrates via Live Demo

Switch to Claude Code → type anything in chat → hear AgentVibes respond out loud

🔊 AgentVibes — How To Install

Install in 30 Seconds

1
Open the Claude Code desktop app
Make sure you're in the Claude Code desktop application — not the browser
2
Click the Code tab at the top of the window
This opens the built-in terminal — where you run commands directly
3
Click Copy below, paste into the Code tab, and press Enter
That's it — AgentVibes installs and activates automatically
📋 Paste into: Code Tab (terminal inside Claude Code) → then press Enter
npx agentvibes install --non-interactive
🤖 BMAD Method — What Is It?

Not One AI. A Whole Team.

BMAD gives you a team of AI specialist agents that collaborate inside Claude Code

🔬
Analyst — Mary
Business analysis & market research
📋
Product Manager — John
Requirements & product planning
🏛️
Architect — Winston
System architecture & technical design
🎨
UX Designer — Sally
UI/UX design & user flows
👨‍💻
Developer — Amelia
Code implementation & delivery
🧪
Test Engineering — Murat
Test architecture & quality strategy
🏃
Scrum Master — Bob
Sprint planning & story preparation
✍️
Technical Writer — Paige
Documentation & diagrams
⚡
Quick Flow Solo Dev — Barry
Fast solo development, no handoffs
⚔️
Adversarial Code Reviewer
Attacks your own code to expose bugs, edge cases & security flaws before they ship
🤖 BMAD Method — How To Install

Install Your AI Team

1
Click the Code tab in Claude Code (same terminal as before)
Claude already knows which folder you're in — no path needed
2
Copy the command below and paste it in
That's it — Claude handles the rest automatically
3
Press Enter — your full AI team installs in about 30 seconds
📋 Paste into: Code Tab (terminal) → then press Enter
npx bmad-method@latest install --yes --modules bmm,bmb --tools claude-code
--directory (optional)
Not required — defaults to your current folder. Just run from whichever project folder you want BMAD installed into.
--action (optional)
Not needed on a fresh install. The update / quick-update values only apply when BMAD is already installed — it auto-detects a clean machine.
💡 /bmad-brainstorming — Full Session

From Blank Page to 100+ Ideas

1️⃣ Start
💻 Claude Code
/bmad-brainstorming
Mary (your AI Analyst) asks: "What are we brainstorming today?"
2️⃣ Ideate
💬 Claude Chat
Ideate for me
Mary picks techniques, runs the session, logs 90+ ideas — no blank-page staring required.
3️⃣ Wrap Up
💬 Claude Chat
wrap up
A stunning HTML keepsake drops — all your ideas, visualized as a creative artifact.

36 creative techniques · AI Analyst facilitates · keepsake auto-saved to your workspace

🤖 BMAD Method — The Workflow

From Idea to Shipped App

Not sure where to start? Run /bmad-help — it scans your project and tells you exactly what to do next.

Phase 1 · Explore
🔬
Analyst — Mary
Shape the idea before writing a word of code
/bmad-brainstorming
›
Phase 2 · Plan
📋
PM — John · UX — Sally
Write the PRD, lock scope, define flows
/bmad-prd
›
Phase 3 · Architect
🏛️
Architect — Winston
Tech stack, data model, API design
/bmad-architecture
›
Phase 4 · Build
👨‍💻
SM — Bob · Dev — Amelia
Sprint planning, stories, code, review, ship
/bmad-dev-story
💬 Claude Chat — confused about what to do next? → scans your project, recommends the next step
/bmad-help
🤖 BMAD — Quick Flow

Need Something Fast? /bmad-quick-dev

⚡ Skip Phases 1–3
For small, well-understood work where you already know what you want.
→ Clarify intent
→ Plan the approach
→ Implement
→ Review & present
All in one flow — no setup, no phases, no planning docs required.
💬 Claude Chat — kick off a quick build
/bmad-quick-dev
🎭 Want your AI team to debate a decision?
Party mode puts every BMAD agent in the same room — PM, Architect, Dev, UX — and lets them disagree.
Use it when you have something concrete to stress-test: an architecture choice, a feature order, a business decision.
💬 Claude Chat — open the team room
/bmad-party-mode
04

Section 04

Redesign with
/frontend-design

From generic to genuinely impressive 🎨

🎨 /frontend-design — What Is It?

One Command. Stunning Design.

/frontend-design is a Claude Code plugin skill

It picks a unique visual direction and rewrites your entire page as production-grade code — automatically

Works on any site — BMAD-built or not. Run it on whatever you shipped in Act 1.

🎯
Claude picks a unique aesthetic — typography, color palette, and layout — all chosen for you
🚫
Specifically avoids "AI slop" — no generic blue gradients, no default templates
⚡
Claude redesigns the page and automatically redeploys to Vercel — no extra steps
🎨 /frontend-design — How To Use

One Command Is All It Takes

1
Make sure BMAD is installed (Section 02 ✓) and your site is deployed (Section 03 ✓)
If you've followed along, you're already ready
2
In the Claude Code chat, paste this single command and press Enter
Claude picks the visual direction — you just sit back and watch
💬 Paste into: Claude Chat Just this. Nothing else needed.
/frontend-design
3
Claude redesigns & auto-deploys — check your new live URL
A completely new look, production-ready, live on Vercel
🎨 /frontend-design — Why It Matters

Go from generic to
genuinely impressive in one command.

⭐
Key Benefit: Bold, distinctive, production-grade design — instantly
Claude doesn't copy trends — it builds something unique to your brand

Before

Generic blue gradient, default fonts, AI template feel — looks like everyone else

After /frontend-design

Bold aesthetic, unique palette, production-grade code — genuinely yours

Paul Demonstrates via Live Demo
🚀 You're Ready

You just hired a team.

PM. Architect. Designer. Developer.
All in Claude Code. All free.

Start Now
Open Claude Code Desktop and try it now.
🔊 AgentVibes ✓ 🤖 BMAD ✓ 🎨 /frontend-design ✓ 🚀 Vercel ✓ 🌐 Domain ✓
preibisch.biz  ·  paul@preibisch.biz  ·  AI Developer & Consultant
📄 Cheat Sheet