Workshop · Advanced · Claude Code users

Build your website with
Claude Code in 90 minutes.

For TTV members fluent in Claude Code + Skills + Plan Mode. You don't just build a site — you build the kit that builds every site after.

Duration
90 minutes
Format
Claude Code · Plan Mode
Stack
GitHub + Vercel
You leave with
Site + the reusable kit
Why this exists

Build once.
Reuse forever.

The basic run sheet walks you through one site, prompt by prompt. This is for the next layer up: a single brief instead of five paste-ins, Plan Mode for everything, and a Skills folder you copy to every future project. The kit IS the deliverable.

📦

One brief, not five prompts

Hand the designer a brand bible + a brief. It plans, you approve, it builds. No re-explaining your voice every session.

🔁

Reusable for every site

Copy the kit to a new project, drop in a new brand bible, get a new site. Works for your business. Works for client work.

📐

Plan Mode default

Designer always plans before writing code. You catch wrong directions early — not after 30 minutes of cleanup.

How it works

Brief once.
Designer does the rest.

The kit drops 5 Skills into your project's .claude/skills/ folder. Claude Code auto-discovers them. From there, every interaction follows the same shape.

01

Brief

One paragraph. Brand bible + pages wanted + tone direction.

02

Plan

Designer plans sections, components, copy. You approve or refine.

03

Build

Page by page. Plan-Mode-first each time. Match brand. Log decisions.

04

Deploy

"Deploy." Designer commits, pushes, verifies Vercel. Done.

05

Iterate

"Design an update." Same shape, every time. Forever.

Time saved

The math of doing this once.

The basic run sheet is 4 hours, one site. This is the version where you build the toolkit while you build the site. The compounding starts the second time you use it.

90m

Today's site

Site live + kit set up + Skills installed. Done before lunch.

30m

Every future site

New brand bible → designer adapts → live URL. Most of the heavy lifting is in the kit, already done.

2m

Every edit

"Design an update — change X." Plan Mode is instant. Deploy is automatic.

What's in the kit

Five Skills.
One opinionated designer.

Every Skill is a SKILL.md file with a clear job. Claude Code reads them when relevant. You can invoke them by name or just describe what you want.

website-designer

Master orchestrator. Routes your request to the right specialist. Always plans first. "Design my site" kicks it off.

page-builder

Single-page builds. Reads brand bible + components, plans, gets approval, writes the HTML/CSS.

page-auditor

Audits pages against brand voice + anti-patterns. Reports drift. Waits for approval before patching.

palette-swap

Apply a new palette across the site. Updates CSS vars + finds hardcoded colours. Logs the decision.

deploy

Git commit + push + verify Vercel auto-deploy. Plans the commit message, gets approval, ships.

+ Reference docs

CLAUDE.md, design-system.md, components.md, anti-patterns.md, palettes.md, fonts.md, seo-checklist.md. The designer reads from these.

Pre-work

Five things to have ready.

Two of these you'll already have if you've done the basic workshop. The other three are quick.

Claude Code installed + signed inThe CLI version. Run claude --version to check.
Must have
GitHub + Vercel accountsSame as basic workshop. gh auth login done so push works.
Must have
A domain you own.com, .co, or .au — whatever fits. Vercel handles the connect.
Must have
Brand bible (HTML)Have one from the basic workshop? Bring it. Don't? Use Prompt 01 from the basic run sheet first.
Bring
Voice guide (optional)If you've got a detailed tone & voice doc, drop it in as reference/voice-guide.md. The designer will use it as the authoritative voice reference.
Optional
📦

The Designer Kit — v1

Skills · reference docs · templates · sample brand bible. Drop it into a folder, run claude, brief the designer.

~60KB · works with Claude Code · Vercel deploy ready

Download kit →
Take these with you

Going deeper

📋

Basic run sheet

The non-Claude-Code version. Five paste-in prompts, no Skills required.

Open basic run sheet
🎓

Skills 101

If you're new to Claude Skills, start here. Builds the foundation this workshop assumes.

Open Skills 101
🤝

TTV coaching

Bring your live site to monthly coaching calls. Get real feedback. Keep iterating.

Join TTV