S1E1: Building the Site You're Looking At — narration transcript
Voices: narrator (Angel's channel voice) and CLAUDE (the co-star voice reading Claude's actual on-screen replies).

== Cold open ==

This website is live right now. Designed, specced, coded, reviewed, and shipped on its own domain — by a software company with exactly one employee. Me. Nobody on payroll. But every seat was filled. This is how one person wears every hat.

== The job ==

Here's the job. This channel needs a home — a site where every episode gets a page, a walkthrough, and every file I touch is downloadable. One page per video. Eventually it'll answer your questions about each episode, and publish its own chapters when a video drops. That last part isn't built yet. Everything else is, and you're going to watch all of it. Seven boxes. Let's check them.

And the first hat I put on... isn't even Claude.

== Hat 1: The logo ==

Brand designer hat. Full disclosure — this one went to Gemini. This series is about using the right tool for every chair, not one logo on every product. One sentence. That's the entire creative brief.

One shot, no revisions. Heads, a book, a graduation cap — an AI teaching brand. Good enough to ship, and "good enough to ship" is a company value now.

One file in an empty folder. That's the whole company so far. Now it needs a face.

== Hat 2: Look and feel ==

Designer hat — and a new hire. I open Cowork, point a project at that folder, and give it standing orders: always default to design mode; when a design is done, write the coding tasks. That instruction box is the employee handbook. Then I describe the site in plain English — one paragraph, typos included. What comes back is a design document and a prompt built for the next tool in the chain.

That prompt goes to Claude Design. I attach the same folder, pick a design system called Broadsheet — editorial, print-flavored, no purple AI sludge — and hand over the brief and the logo.

And this is the moment this series exists for. A paragraph went in. A website came out — typography, layout, an episode page, a voice. I never opened a design tool.

It's not sacred, either. I asked for changes the way you'd ask a person.

CLAUDE: Removed "Real receipts" from the hero headline, dropped "and the bill" from the pitch, and scrubbed the remaining receipt mentions on the episode page. The flagged overlap is just the intentional misregistered print-plate effect.

It defends its own design decisions. Mission tracker: look and feel — done.

I don't describe websites to developers anymore. I hand pixels to a machine.

== Hat 3: Specs, not vibes ==

Here's where most AI projects go wrong. The design is pretty; you're excited; you type "code this directly." I typed it too — you can see it right there. But the architect hat says no. Before any code, Cowork writes three task files: scaffold, content engine, home page. In dependency order.

Look at the anatomy. Each spec names its dependencies, points at the design document as the single source of truth, and pins requirements down to the copy on the buttons. The AI that writes the code never has to guess — and an AI that doesn't guess doesn't hallucinate features.

Vibe coders prompt until it works. Companies write specs. Even companies of one.

== Hat 4: Design becomes code ==

Engineer hat. Claude Design exports a prompt — not a screenshot, an actual machine-readable handoff that tells a coding agent exactly how to import the pixel-perfect design.

That prompt lands in Claude Code — the terminal employee. It pulls the design straight off Anthropic's design server and implements it as a real Next.js app. Then one more sentence: create a public GitHub repo. The source of this site is public on purpose — the repo is course material. Two boxes checked: code, and version control.

The designer and the engineer are different AIs — and they hand off work like coworkers.

== Command Card: /context ==

Command Card time — one command per episode, and this is the one I run before anything else. Slash context. Every conversation with Claude happens inside a context window — a budget of tokens holding your instructions, your files, your chat. This grid shows exactly what's eating that budget: system prompt, tools, memory files, conversation. Both of my employees answer to it — same command in Claude Code and in Cowork. Why care on day one? Because everything in that window is something you're paying for, and later in this season you'll watch the budget drain in real time and learn to fight back. For now, one habit: know what's in the room before you start talking.

Your AI has a memory budget. This is the meter.

== Hat 5: Ops gets hands ==

Ops hat — and this is where it gets physical. The code needs hosting. Normally: open Vercel, click through the import flow, wire the repo. Instead I ask Cowork to do it, and yes, that typo shipped. Real receipts.

Claude asks permission to drive my browser — one site at a time, and I can watch every click. It navigates to Vercel, imports the repo, and deploys, while its own task list mirrors the one on your screen.

First deployment, live. And notice what it flags: the site currently shows a 404 — expected, because at that point the repo held design docs and a logo, no app code. The failure stays in the cut. Then the last box: I ask it to point my GoDaddy domain at Vercel — DNS, the step every tutorial skips — same browser hands, and weareveryhat.com goes live.

I gave an AI my mouse and my DNS settings. On purpose. Episode 2 shows you exactly how to do that safely.

== Make it alive ==

One box left, and it's the strange one. The site you're on is getting a brain — a chat on every episode page, grounded in that episode's actual transcript, that answers questions about what you just watched. Ask it what prompt made the logo — it'll show you the exact words. It's mid-build right now, which means you're watching this company operate in real time, not a highlight reel.

Subscribe and you'll see the moment this website starts talking back.

== Build receipt ==

Every episode ends at the cash register. Here's what this build actually cost — the models, the tokens, the dollars, and which tool did which job. The exact numbers live on the site, next to every file you saw today: the design brief, the task specs, all downloadable, uncleaned. Six hats down, one to go. The site is live. Next episode: how to give Claude hands on your machine without giving it the keys to everything — permissions, allowlists, and the browser extension setup, properly.

One person. Every hat. The receipts are on the site.