AI-Native Web Development, Hands-On.

You'll leave with your own portfolio site, live on the web.

1 · Theory20 min

2 · Hands-onthe rest of the session: you build

Hi, I'm Fabian Krumbholz.

Google Developer Expert for Web Technologies.

Team Lead for Data Insights at Speed Kit
15 years as a web developer
Building with AI agents every day

What we build today.

A portfolio like fabkrum.github.io/portfolio, with your name on it, live on the web.

Bio, projects, links and CV, in your own style
A privacy page, fit for the EU
Fast, accessible, in light and dark mode
Live at USERNAME.github.io/portfolio

Yours to keep

The slides

Linked in the guide, under Help and reference.

The guide

Online after today, with every step and every prompt.

Your site

Repo, code and agent skills, in your own GitHub account.

AI can build a great site or a bad one.

What you know decides which one you get.

Know the topic

Understand what good means: fast, accessible, private, built on today's web. Then you can ask for it, and see when it is missing.

Know the AI

Understand how agents work, and set them up: rules, skills, the right context, the right model. Then you get the outcome you need.

Know the code

Read what the agent writes, so you can judge it and keep it maintainable. AI writes faster; keep learning to code.

1.5 minutes. Two clicks: Know the topic is there, then Know the AI, then Know the code.

Say: AI can build you a great website or a bad one, from the same chat box. What decides is you, and two kinds of knowledge. First, the topic: you need to know what good means for a website, fast, accessible, private, built on today's web, so you can ask for it and see when it is missing.

(Click.) Second, the AI: how agents work and how to set them up, with rules, skills, the right amount of context and the right model, so the agent delivers what you need. "What makes a good website" is the topic; the building blocks, tokens and context are the AI.

(Click.) Third, the code. If you can read code, you see when the agent is wrong, and you judge quality, not only whether it runs. A good setup makes the agent write code a human can take over later; without that it gets complex fast, and in a big project nobody understands what the AI wrote. So keep learning to code: not to type it yourself, but to judge it and to maintain it. Today the agent reads every change back to you in plain words; at home, learn to read the code itself.

What makes a good website.

Four things every visitor feels, whether or not they know the words.

Performance

LCP < 1 s
the main content shows fast

CLS ≤ 0.1
nothing jumps while it loads

INP < 100 ms
a tap gets an answer fast

Accessibility

Everyone can use it: with a keyboard, a screen reader or weak eyesight.

Enough contrast, alt text, real headings and buttons.

Privacy

No tracking. Nothing loaded from other servers.

No phone number or home address in a public repo.

Today's platform

Current HTML and CSS instead of piles of JavaScript.

Less code, fewer bugs, faster pages.

1 minute. Three clicks: Performance is there, then one card per click.

Performance, in the numbers Google calls Core Web Vitals. LCP, Largest Contentful Paint: how long until the biggest text or image shows; aim for under one second. CLS, Cumulative Layout Shift: how much the page jumps while it loads; good is 0.1 or less. INP, Interaction to Next Paint: how fast the page reacts to a tap or a click; aim for under 100 milliseconds. Measured on phones, not on your laptop.

Google calls 2.5 seconds and 200 milliseconds "good". That is the pass line, not the goal. QA's tool prints that pass line ("good: 2.5 s or less"), but a site like today's shows in well under a second there (the styled sample site: 0.7 s on the emulated slow phone). Under a second is the bar.

(Click.) Accessibility: people use the web with a keyboard, a screen reader, a magnifier. Contrast, alt text, real headings and real buttons.

(Click.) Privacy: in the EU, a page that loads its font from Google sends every visitor's IP address to Google. Your site loads nothing from other servers and gets a privacy page. (This deck doesn't either: it uses the fonts already on the laptop.)

(Click.) Today's platform: the browser does a lot by itself now that used to need JavaScript. Less code, fewer bugs, faster pages.

In the room: QA measures LCP and CLS with node tools/look.mjs and accessibility with the Check. INP needs real taps, so it comes from real visitors later.

Vibe coding or agentic coding.

Same agent, same model. The difference is how you lead it.

Vibe coding

"Build me a website."
No plan, no checks
Accept whatever comes back
Fine for a throwaway idea

Agentic coding

A plan first, then small steps
Rules the agent follows
One Role per chat
Read before you accept
Measure the result, don't trust it

How professionals build a website.

Then: a person for every step. Now: an agent, and you lead.

1
Spec
A business analyst wrote it down.

1
Spec Today: Analyst
An agent interviews you and writes it.
2
Design
A designer drew every page.

2
Design Today: Designer
An agent asks your taste; Stitch draws it.
3
Tickets
A project manager cut the work up.

3
Tickets Today: the Blocks
One task per Block, in a fresh chat.
4
Feature branch
Each developer on their own copy.

4
Feature branch At home
An agent codes each ticket on a branch.
5
Build
Developers wrote every line.

5
Build Today: Developer
An agent writes it; you review it.
6
Merge request
A senior developer read every change.

6
Merge request At home
You, or another agent, review it.
7
CI pipeline
Someone ran the tests by hand.

7
CI pipeline Today: GitHub Actions
Robots test every push.
8
QA
A tester clicked through every page.

8
QA Today: QA
An agent tests and shows you the proof.
9
Legal
A lawyer wrote the privacy page.

9
Legal Today: Lawyer
An agent drafts it; you read it.
10
Publish
An ops engineer uploaded the files.

10
Publish Today: Ops
Merge, and it's live in a minute.

2 minutes. Ten clicks. All ten steps start in grey: how a team did them before. Each click turns one card over to how it works today; its tag says where you meet it, today or at home.

Say: this is how professionals build a website, and every step used to be a job for a person. (Click.) Spec: today an agent interviews you and writes it, and you correct it. That's the Analyst, your first Block. (Click.) Design: the Designer agent asks about your taste and writes your Stitch prompt; you design in Stitch, and the agent turns it into a brief. (Click.) Tickets: small tasks, one goal each; today every Block is one, in a fresh chat.

(Click.) Feature branch: each ticket gets its own copy of the code, so the main version keeps working. At home. (Click.) Build: the Developer agent writes the code from the spec and the brief, and you review it. (Click.) Merge request, a pull request on GitHub: you, or another agent, review the change before it goes in. At home.

(Click.) CI pipeline: robots run the tests and checks on every push; today GitHub Actions publishes your site. (Click.) QA: an agent tests on phone and desktop and shows you the proof. (Click.) Legal: the Lawyer drafts the privacy page from a template, and you read it. Not legal advice. (Click.) Publish: merge to main, and it's live in a minute. That's Ops.

The point: those jobs did not go away. An agent does the work of each one, and you lead: you decide, you read what it did, you accept. Today's six Blocks are six of these steps. Branches, merge requests and tests are for at home: the guide's page "Agentic coding systems" shows flows for that, Matt Pocock's skills first.

Building blocks of agentic work.

Every agent tool has the same parts.

Model

The language model that reads and writes.

Today: Gemini Flash

Agent

A model in a loop: plan, act, check, repeat.

Today: Antigravity IDE

Tools

Read and write files, run commands.

Today: terminal, Chrome

MCP

A standard plug that adds tools to any agent.

Today: DevTools for QA

Rules

Instructions that are in every chat.

Today: AGENTS.md

Skills

Know-how, loaded only when needed.

Today: one per Role

Hooks

Scripts that run by themselves.

Not used today

Subagents

A side task, handed to a fresh agent.

Not needed today

Keep it thin. Models get better every few months, and too many rules can hold a good model back. Re-test your setup often, and delete what the model no longer needs.

1.5 minutes. Eight clicks: Model is there, then one card per click, then the bottom line.

Say: every agent tool, Antigravity, Claude Code, Cursor, Copilot, is built from the same parts. Know the parts, and you can switch tools.

Model: the language model. Today the smallest Gemini Flash: fast, and your free quota lasts. (Click.) Agent: the model in a loop. It plans, uses a tool, looks at the result and goes again until it is done. That loop is what makes it more than a chatbot. (Click.) Tools: what the agent can do: read and write files, run commands, open a browser.

(Click.) MCP, the Model Context Protocol: a standard plug for tools. Anyone can publish an MCP server, and any agent can use it. Your repo has one: Chrome DevTools for agents, which QA uses.

(Click.) Rules: instructions that are in every chat. Your repo has AGENTS.md: the Role order, one Role per chat, Windows commands, nothing loaded from other servers. (Click.) Skills: know-how the agent loads only when the task needs it. One per Role in your repo, plus Modern Web Guidance.

(Click.) Hooks: your own scripts that the tool runs by itself at fixed moments, for example the Check after every edit. Not used today. (Click.) Subagents: the agent hands a side task to a fresh agent with its own context. Powerful, and the quickest way to burn tokens. A one-page site doesn't need them.

(Click: the bottom line.) Keep the harness thin. Models get better every few months. Rules and skills written for last year's model can hold this year's back: it would have done better with less. So re-test your setup now and then, without some of the rules, and delete what the model no longer needs. Don't start by building a big system. Today's repo is a deliberate exception: a scaffold for beginners in a two-hour room. At home, let it get thinner.

All of these parts compete for one thing: what the agent sees at once. Next slide.

Tokens: input and output.

A token is about ¾ of a word.

Input tokens

Everything it reads: your rules, the chat so far, files, tool results.

Sent again on every turn.

Output tokens

Everything it writes: answers and code.

One at a time: slower, and pricier per token.

So a long chat costs more on every turn: all of it is input again.

Context: enough, not everything.

What the agent sees decides what it builds.

Too little

The agent guesses. It invents content, skips your rules and builds the generic page.

Enough

The task, the rules, the files it needs. Nothing else.

Too much

Slow, costly, forgetful. Rules in the middle get lost, old mistakes come back, your quota runs out.

Keep it right

One Role, one fresh chat

A short chat stays sharp.

Files are the memory

Spec, content file and design brief carry what matters to the next chat.

Only what's needed

Skills load on demand. The smallest model first.

1.5 minutes. Five clicks: Too little is there, then Enough, Too much, and the three habits one by one.

Say: everything the agent sees right now is its context: your rules, the chat so far, the files it read, every tool result.

Too little context, and the agent guesses. It fills the gaps with something plausible: a made-up project on your portfolio, a layout that ignores your design brief, the generic page every model has seen a thousand times.

(Click.) Enough is the balance: the task, the rules and the files it needs, nothing else.

(Click.) Too much, and three things happen. It gets slow and costly: every message sends the whole chat again, so a long chat costs time and quota on every turn, not once. It gets forgetful: models pay most attention to the start and the end, and instructions buried in the middle of a long chat get lost. And old mistakes come back: a failed attempt still in the chat keeps steering the next answer.

(Click.) Three habits keep it right today. One Role, one fresh chat: a short chat stays sharp. (Click.) Files are the memory: your spec, content file and design brief carry everything from one chat to the next, so no chat has to remember. (Click.) Only what's needed: skills load only when the task needs them, and the smallest model first; a bigger one only when the small one fails twice.

Why it matters for you today: quality, speed and a free quota that lasts the whole session. Mistakes 2, 3 and 7 on the cheat sheet are this slide. The guide's Context page goes deeper.

You keep learning. Your model doesn't.

Developers stay current by reading. A model stops at its training cutoff.

What the model read

Years of web code, most of it old: overlays built from div elements and JavaScript.

Old answers outnumber new ones.

Training cutoff

What it missed

Everything the web shipped since. And what shipped just before is still rare in what it read.

For example: a native dialog that opens, closes and handles the keyboard with no JavaScript.

So the agent writes yesterday's code, confidently. Unless it can read today's docs.

Modern Web Guidance: the agent's continuing education.

Current web knowledge from the Chrome team, written for agents.

What

162 short guides: dialogs, dark mode, layout, fonts, accessibility, performance. Open source, Apache-2.0.

Where

Already in your repo, under .agents/skills/. Nothing to download in the room.

When

The Developer reads the matching guide before it writes code. QA reads one before every fix.

Only what it needs. The agent sees one line about the skill, reads an index with one line per guide, then opens just the matching guide: about 15,000 tokens instead of 350,000.

Modern Web Guidance by the Chrome team: github.com/GoogleChrome/modern-web-guidance

1 minute. Three clicks: What is there, then Where, When and the bottom line.

Say: Modern Web Guidance is the Chrome team's answer. Short guides, written for agents, on current HTML, CSS and JavaScript, with which browsers support what. It's an agent skill: a folder of instructions the agent reads when the task needs it. The agent's continuing education.

(Click.) Your repo has it already, 162 guides, so nothing is downloaded in the room.

(Click.) And the rules file in your repo, AGENTS.md, tells the agent: before you choose how to build any part of the page, read the matching guide.

(Click: the bottom line.) How it stays out of your context: the 162 guides are 1.4 MB, about 350,000 tokens, far more than a chat holds. So it works in three steps. The agent always sees one line: the skill's name and description. When the task matches, it reads the skill's instructions, which say: open index.md, one line per guide. Then it opens only the one to three guides it needs. About 15,000 tokens for a typical task. Every good skill works this way.

Does that make a difference? I tried it. (Next slide.)

Does the guide make a difference?

The same task, given to the same agent twice. From my rehearsal.

A "Contact me" button opens a popup. Esc or a click outside closes it.

Without the guide

<div class="overlay" hidden>…</div>
<script>
  openBtn.addEventListener(…);
  closeBtn.addEventListener(…);
  document.addEventListener(…);
  overlay.addEventListener(…);
</script>

Your code does the work: four listeners.

With Modern Web Guidance

<button commandfor="contact"
  command="show-modal">…</button>
<dialog id="contact" closedby="any">
  <button commandfor="contact"
    command="close">…</button>
</dialog>
<script>
  if (!('closedBy' in …)) {…}
</script>

The browser does the work. The script is a Safari fallback.

1.5 minutes. Not live: this is your rehearsal run, so nothing can go wrong on stage. Before Saturday, replace both snippets with the real code from that run (README, "The Modern Web Guidance slide").

Say: does the guide make a difference? I tried it. The same task, the same agent with the smallest Gemini Flash, twice: once in an empty folder, once with Modern Web Guidance and the rule to read it first.

Left, without the guide: the agent builds the popup itself, with four event listeners for open, close, Esc and the click outside. That code runs on every visit, and every line can break.

Right, with the guide: the agent read the dialog guides first. The button opens the dialog with command="show-modal", and closedby="any" closes it on Esc or a click outside. The browser does the work. The small script is a fallback for Safari, because the guide says to add one; in Chrome it never runs.

Same look. Who does the work changed. That's why the Developer in your repo reads the guides before it writes a line.

If someone asks about browser support: invoker commands (command, commandfor) are in every major browser since December 2025; closedby is in Chrome, Edge and Firefox. Safari closes the dialog with Esc, and the fallback adds the click outside. Guides: declarative-dialog-popover-control.md, light-dismiss-a-dialog.md and html.md, under .agents/skills/modern-web-guidance/guides/.

Optional: open demo/without.html and demo/with.html (next to this deck, also online under /slides/demo/) and click Contact me in both: same look, same behaviour. They are reference pages, not your run.

The rehearsal prompt, word for word: Build index.html: a page with a "Contact me" button. It opens an overlay with my email address, fabian@example.com, and a Close button. The overlay also closes with the Esc key and when I click outside it. Plain HTML and CSS, and JavaScript only where needed, all in this one file.

DevTools: measure, don't guess.

Chrome's built-in developer tools. Your agent can use them too.

Performance

Record a load: LCP, CLS and INP, live.

Today: QA's LCP and CLS

Device mode

Any phone size, slow 4G, a slower CPU.

Today: QA's mid-range phone

Screenshots

Full page, any width, light and dark.

Today: 8 screenshots for QA

Lighthouse

Accessibility and best practices, scored.

Today: its rules, in the Check

Console

Every error the page throws.

Today: the Check reports them

For agents

The same tools, as an MCP server.

Today: set up in your repo

1.5 minutes. Five clicks: Performance is there, then one card per click.

Say: a good developer has DevTools open all day. You measure, you don't guess. Performance: record a page load and see LCP, CLS and INP, live.

(Click.) Device mode: any phone size, slow 4G, a slower CPU. (Click.) Screenshots: the full page, at any width, light and dark. (Click.) Lighthouse: accessibility and best practices, scored. (Click.) Console: every error the page throws. (Click.) For agents: the same tools as an MCP server, and your repo sets it up.

QA's tools do exactly this, automatically. node tools/look.mjs drives your own Chrome through the DevTools protocol: a mid-range phone on slow 4G, LCP and CLS, eight screenshots, phone and wide, light and dark. The Check runs the accessibility rules behind Lighthouse's score and reports every console error.

And the agent can use DevTools itself: Chrome DevTools for agents is an MCP server, the building block from before, with performance traces, Lighthouse audits and screenshots. Your repo sets it up (.agents/mcp_config.json), and Antigravity asks before each DevTools tool runs: read what it wants to do, then allow it. If it does not start on a laptop, QA's own tools do the same job.

The day, Block by Block.

One Role per Block. The whole room moves together.

0–20

Opening

The picture: Demo site, how agents work, Modern Web Guidance

20–35

Setup

Your own repo, tools installed, Antigravity IDE open

35–50

Analyst

Your content file and a short spec

50–65

Designer

Your style and your design brief

65–90

Developer

Your site on localhost

90–100

QA

A checked site

100–110

Lawyer

A privacy page, no private data

110–115

Ops

Your site live, link shared

115–120

Feedback

Five minutes, sent from the guide

What you need.

Join the Wi-Fi, open the guide on your laptop, check the list.

Wi-Fi

Password

Guide

You need

A laptop with Google Chrome
A GitHub account: sign up now if you have none
A personal Google account, not a work or school one

Setup

Your repo and your tools, ready.

What we do · guide page 1

Create your GitHub account
Copy the Template repo
Switch on GitHub Pages
Create your Google account
Install Antigravity IDE
Run the Install script
Open your repo in Antigravity IDE
Pick the smallest Gemini Flash model
Check that you are ready

Why we do it

Your own repo: the site and its code are yours, and GitHub Pages hosts it for free.
One Install script for every laptop, so the whole room starts with the same tools.
The smallest Gemini Flash: faster, and the weekly free quota lasts all day. The biggest model for everything is mistake 7.

15

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. Not ready yet? Raise your hand now, or pair up with your neighbour.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

Setup Block, 15 minutes. Mistake 7 is taught here.

Do: walk the guide's steps 1 to 3 on github.com on the projector, slowly, then put this slide back up.

Say for step 3: GitHub Pages is off in every new repo. This one setting switches it on. The first deploy failed because Pages was off; re-run it now.

Say for step 4: no personal Google account yet? Create one now, about three minutes; a work or school account may be blocked.

Say for step 5: the download started in the guide's first step. Install Antigravity IDE, the editor, not Antigravity 2.0, the agent dashboard. Sign in with a personal Google account, then quit it completely (Cmd+Q on a Mac): the Install script in step 6 opens it again with your repo, and an IDE that stays open would not find the Git and Node the script installs.

Pulse check after 6 minutes: hands up who has a repo named portfolio.

Once Antigravity runs, introduce the help mode, once: from now on, stuck? Ask your agent first. In a fresh chat, "Where am I?" or "What's next?": it reads the repo and tells you the next step and the sentence to type. "Explain ... to me" when you want to understand a file or an idea. At the end: "Write down what we did and why." I'm one person for fifty of you: AI first, then a neighbour, then me.

Common snags: Public not chosen (on a free plan, Pages needs a public repo); a different repo name (then the address is USERNAME.github.io/THAT-NAME).

Then steps 6 to 9: the laptop.

Say: one line for your system. It asks for your GitHub username and does the rest: checks Chrome and Antigravity IDE, installs Git and Node where they're missing, puts your repo in a folder called portfolio in your home folder and opens it in Antigravity IDE. It tells you in plain words what's done ([ok]) and what's still to do ([to do]). It's safe to run again: it only does what is still missing.

Say: copy the line from the guide, Setup page, step 6. Never type it.

If it says Node was added for new terminals: close the terminal, open a fresh one, paste the same line again.

The guide says to quit Antigravity IDE before running the script. Someone kept it open while the script installed Git or Node? Then quit it (Cmd+Q on a Mac, close the window on Windows) and open it again. A program reads PATH, the list of places where it looks for commands, only when it starts, so an IDE that was already open finds neither Git nor Node, in its terminal or for its agent. Certain on Windows; on a Mac it does no harm. TO VERIFY in the demo run (#11).

Antigravity IDE, not Antigravity 2.0 (the agent dashboard without an editor). The script warns about the wrong one and names the download page, antigravity.google/download.

Model: in the agent panel, open the model menu and pick the smallest Gemini Flash (Gemini 3.8 Flash as of 2026-10-01). TO VERIFY on the day.

Mistake 7, the biggest model for everything: bigger is slower, and the free quota is weekly. Burn it on the biggest model and you're out by QA. Start small; go bigger only when the small one fails twice at the same task. Your repo's AGENTS.md says the same.

Windows: PowerShell, not cmd. The line works under the default execution policy (tested in CI). Mac and Linux need the right line: curl on a Mac, wget on Linux.

Timer: press S when the room starts, or hover it and click Start. P pauses or resumes it, R puts it back to the full time; each Block has its own, and the keys work from the speaker view too. At one minute left the slide shows the checkpoint.

Analyst · Role 1 of 6

Your content file and a short spec.

What we do · guide page 2

Start the Analyst
Give it your content
Answer its questions
Read it back
Add your photo (optional)

Why we do it

No plan is mistake 1: without a spec, the agent guesses.
The spec says who the site is for and what a visitor should do. Every later Role reads it.
You read it back and correct the guesses: you decide, the agent writes.

15

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. Not about to finish?Not done? Jump to the checkpoint: stop the agent, start a fresh chat and type Catch me up: the room just finished the Analyst block.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

Analyst Block, 15 minutes. Mistake 1 (No plan), and the "before you accept" habit starts here.

Say: a fresh chat, the smallest Gemini Flash, type the sentence from the guide's first step. The Analyst offers three ways in: paste your LinkedIn text, drop in your CV as a file, or say interview: at most 8 questions, one at a time, and "skip" works. It agrees the site language with you; English is the default. Its second question is the goal of your site (a job, freelance clients, speaking invitations, community) and whether you are available: the goal decides what your site shows first.

Photo: in its read-back, the Analyst offers one. Copy it into the repo folder, say its file name and a few words on what it shows; node tools/photo.mjs makes a small copy without its hidden data. Delete the original afterwards. No phone number, no home address: the city is enough.

Mistake 1, No plan: teach it when the Analyst writes docs/spec.md. Say: this is the plan. Before any code exists, it says who the site is for, what a visitor should do and which sections it has. The two lines marked "(a guess)" are the agent's guesses: correct them.

Before you accept: the Analyst reads both files back in plain words. Read it, say what's wrong, then accept. You'll do this in every Block.

Privacy: no phone number, no home address. If someone saved their CV inside the repo folder, it must move out (the Analyst says so).

Pulse check at minute 10: who has a content file? Who's still in the interview?

Time's up: the checkpoint keeps their own site/content.json if they have one, or adds the sample person.

Timer: press S when the room starts, or hover it and click Start. P pauses or resumes it, R puts it back to the full time; each Block has its own, and the keys work from the speaker view too. At one minute left the slide shows the checkpoint.

Designer

The AI look.

Without a brief, an agent builds the average of the web.

Vibe coding gives you this

Build faster with AI

The all-in-one platform for your ideas.

Get started

Indigo, purple gradients, the Inter font, centred cards.

A brief gives you your look

Your style: one of five, or a mix of two
Your colour and your fonts
One detail that is yours
One signature move

"…every AI generated UI on earth also being indigo." Adam Wathan, creator of Tailwind CSS, August 2025

Designer Block, minute 0 to 1. Press S on this slide: it starts the Designer's 15-minute timer, as S does on the Block slide. R here resets it.

Say: ask an agent for a website and tell it nothing about yourself, and you get this. Indigo, a purple gradient, the Inter font, a centred headline, three centred cards. Every model has seen this page thousands of times, so it is the average the model falls back to.

Adam Wathan, who created Tailwind CSS, posted in August 2025: "I'd like to formally apologize for making every button in Tailwind UI bg-indigo-500 five years ago, leading to every AI generated UI on earth also being indigo." Models learned from that code. Stitch has the same pull: its "Enhance prompt" button rewrites prompts towards purple accents, rounded corners and Inter. That is why you leave it alone today.

(Right card.) The fix is a brief: your style, your colour and fonts, one detail that is yours, one signature move. The Designer asks you for them, in at most five questions, and writes a Stitch prompt that fits only you.

Source: x.com/adamwathan/status/1953510802159219096 (the research for spec #17 links it).

Designer

Same content, five styles.

Pick one, or mix two. Your answers make it yours.

Classic

Serif headings, calm colours, a narrow column, hairlines.
Modern

A clean sans, one accent, lists not boxes, lots of space.
Bold

A huge name, oversized type, colour blocks.
Playful

Rounded, bright, stickers and badges.
Technical

Monospace details, a dot grid, code-editor metadata.

Designer Block, minute 1 to 2. S here also starts the Designer's timer, if you have not pressed it yet.

The five phones are real sites: the same sample person, Ada Example, built once per style by the Template's own agents, and each passes the Check. They were made without Stitch, on the "no Stitch" path (the style's ready brief and the interview's answers), so the dry run may replace them with Stitch-based ones; the slides README says how.

Say: the same content, five styles. Classic: serif headings, calm colours, a narrow column, fine lines. Modern: a clean sans-serif, one accent colour, lists instead of boxes, lots of space. Bold: a huge name, oversized type, blocks of colour. Playful: rounded shapes, bright colours, stickers and badges. Technical: monospace details, a dot grid, metadata like in a code editor.

Pick one, or mix two: the first one wins where they disagree. Two people with the same style still get different sites: your colour, a website you love and one personal detail go into your prompt. The detail becomes one small thing: an icon, a pattern, a frame.

Then the Block slide: a fresh chat (mistake 2), "Start the Designer step.", and its first question is your style.

Designer · Role 2 of 6

Your style, your design brief.

What we do · guide page 3

Start a fresh chat
Start the Designer
Answer its questions
Design it in Stitch
Give it your design
Read the brief back

Why we do it

A fresh chat: a long one drags old questions and files along, and the agent gets slower. That's mistake 2.
Your answers make a Stitch prompt that fits only you: no two sites alike, even in the same style.
The brief turns your design into rules the Developer follows: colours, fonts, contrast, one signature move.

15

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. Not about to finish?Not done? Jump to the checkpoint: stop the agent, start a fresh chat and type Catch me up: the room just finished the Designer block.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

Designer Block, 15 minutes. Mistake 2 (Endless chat): the first switch to a fresh chat. The timer runs since "The AI look." if you pressed S there; otherwise press S now.

Mistake 2, Endless chat: say: start a fresh chat, not the Analyst's. That one is full of your LinkedIn text, which the Designer doesn't need. A long chat drags everything along: old questions, old files, old mistakes. The agent gets slower and less precise. Your files carry the work from Role to Role, not the chat.

Say: type the sentence from the guide. The Designer asks at most five questions, one at a time: your style, three words for how your site should feel, a colour or a website you love, and something that is yours. Then it writes your Stitch prompt and shows it in the chat. Copy it.

Do, at about minute 5: Stitch on the projector, with the prompt your stage copy's Designer wrote (Preflight). Web, not app. The fast model. Paste, and send it as it is. Point at "Enhance prompt": leave it alone, it pulls the design back to the AI look. Then one change at a time; colours and fonts in Edit Theme. Looks like your neighbour's? Ask Stitch for variants. And never paste a website address into Stitch: it copies that site's design. TO VERIFY in the demo run: the names of these buttons in Stitch.

Then back to the Designer's chat with the HTML or a screenshot. The Designer writes design/brief.md, with the style, the personal detail and one signature move, and checks every colour pair for contrast. If it darkens a colour, that's the accessibility check at work.

Pulse check at about minute 9: who sees their design in Stitch? Two minutes before the end: hand your design to the Designer now, a screenshot is enough.

Stitch will not work for someone (age check, credits, sign-in)? They type "no Stitch" in the Designer's chat, as its message with the prompt says, and it writes their own brief from their answers and their style's ready brief. "default" is only for someone with no time for the interview. The guide names neither, on purpose. Time's up: the checkpoint keeps a finished brief, or puts in the default brief.

Timer: press S when the room starts, or hover it and click Start. P pauses or resumes it, R puts it back to the full time; each Block has its own, and the keys work from the speaker view too. At one minute left the slide shows the checkpoint.

Developer · Role 3 of 6

Your site on localhost.

What we do · guide page 4

Start the Developer
Fonts: already in your repo
Your signature move
Let it build
Look at your site

Why we do it

The agent reads Modern Web Guidance first, because its training is out of date: mistake 6.
One task, one chat, no extra files “for context”: more context makes it slower, not smarter. That's mistake 3.
The preview builds the finished pages and shows you the site itself, not the agent's word for it.

25

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. Not about to finish?Not done? Jump to the checkpoint: stop the agent, start a fresh chat and type Catch me up: the room just finished the Developer block.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

Developer Block, 25 minutes, the longest. Mistakes 3 and 6.

Say: fresh chat, smallest Gemini Flash, the sentence from the guide's first step. The Developer checks your design brief, reads the Modern Web Guidance guides (dark mode, CSS, layout, HTML, accessibility, and the one for your signature move), tells you in two sentences what it will do differently because of them, builds, runs the Check and starts the preview.

Signature move: one per site, the one the brief names. Visitors who set their computer to reduce motion get a fade, or no movement; no content is ever hidden.

Mistake 6, Outdated knowledge: point at the moment it opens the guides. That's the opening demo, now in your own repo.

Mistake 3, Too much context or too many subagents: keep this chat on one task. Don't paste your LinkedIn text again, don't drop five files in "for context", don't ask for three things at once, and don't start a swarm of agents. More context makes the agent slower and less precise, not smarter.

Preview: the agent runs node tools/preview.mjs; it builds the site into _site/ first (node tools/build.mjs, which puts the content into the HTML: pre-rendering), then prints an address. After a change, a reload builds again. It keeps running; Ctrl+C stops it. If the page says "Your site could not be built", it names the problem.

Fonts: two fonts per style come with the repo, in fonts/. The Developer runs node tools/fonts.mjs, which copies the fonts the brief names into site/assets/fonts/. No question, no download.

Pulse check at minute 15: who sees their site on localhost, in their style? At minute 20: who has the Check at 5 of 6? The sixth item, What an agent sees, passes; the privacy page waits for the Lawyer.

Time's up: the developer checkpoint builds the site in the colours and fonts of their own brief, if the brief is finished.

Timer: press S when the room starts, or hover it and click Start. P pauses or resumes it, R puts it back to the full time; each Block has its own, and the keys work from the speaker view too. At one minute left the slide shows the checkpoint.

QA · Role 4 of 6

A checked site.

What we do · guide page 5

Start QA
QA looks first
Then it audits
Findings in plain words
Run the Check yourself
What an agent sees

Why we do it

“Done” needs evidence: screenshots and numbers, not a promise. Not verifying is mistake 5.
Phone and desktop, light and dark: what your visitors will see.
One fix at a time, each one shown, so nothing else breaks.

10

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. Page broken or missing? Jump to the checkpoint: stop the agent, start a fresh chat and type Catch me up: the room just finished the QA block. Page works? Skip it.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

QA Block, 10 minutes. Mistake 5 (Not verifying). Five minutes shorter than before: they went to the Designer. A page that works needs no QA checkpoint.

Say: the agent says "done" a lot. Done means evidence. QA looks first: node tools/look.mjs saves eight screenshots (phone and wide, light and dark) into qa/ and measures LCP and CLS on a slow phone. Then the Check: six items, each PASS or NEEDS ATTENTION, and it never blocks. "Privacy page written" stays NEEDS ATTENTION until the Lawyer has run: expected. "What an agent sees" passes: the build put the content into the HTML, so search engines, AI agents and link previews read it without JavaScript.

Mistake 5, Not verifying: the agent fixes one finding at a time and proves each fix with new screenshots or numbers. Ask it: show me.

Everyone runs the Check once themselves, in Antigravity's terminal, in the repo folder: node tools/check.mjs.

Chrome DevTools for agents is set up in every repo: QA also runs a Lighthouse audit and a performance trace, and Antigravity asks before each tool runs. If it does not start on a laptop, QA works without it.

Time's up: say "Page works? No checkpoint: accept the fixes QA showed you, fresh chat, the Lawyer." Checkpoint qa only for a broken or missing page: from developer on, a checkpoint replaces the page and its stylesheet with the Developer checkpoint's version, so their own Developer and QA work there is gone.

Timer: press S when the room starts, or hover it and click Start. P pauses or resumes it, R puts it back to the full time; each Block has its own, and the keys work from the speaker view too. At one minute left the slide shows the checkpoint.

Lawyer · Role 5 of 6

A privacy page, no private data.

What we do · guide page 6

Start the Lawyer
Private data first
The privacy page
Check and read it

Why we do it

Your site is public: a phone number or a home address does not belong on it.
A site in the EU needs a privacy page. A template for a portfolio without tracking covers it; not legal advice.
You read it before you accept.

10

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. No privacy page yet? Jump to the checkpoint: stop the agent, start a fresh chat and type Catch me up: the room just finished the Lawyer block.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

Lawyer Block, 10 minutes. No new mistake; practise reading before you accept.

Say: not legal advice. A privacy page for a personal portfolio in the EU with no tracking, from a template. The Lawyer looks for private data (phone number, address, birth date) in the content file and the site, asks before it takes anything out, then fills the privacy page with your name and email.

Before you accept: read the privacy page in the preview (footer link "Privacy").

Freelance goal, or services or prices on the site? The Lawyer explains what a commercial site needs (an address in the EU, the Partita IVA in Italy, an Impressum in Germany) and two options: a business address that may be public, added later, or a site that sells nothing. It adds no address and no VAT number itself. A photo: the privacy page mentions it, and the Lawyer checks it came from the photo tool and has alt text.

If someone already pushed private data: taking it out now doesn't remove it from Git's history. Talk to them (troubleshooting card in the instructor guide).

Time's up: at the read-back already? Finish it, then Ops. No privacy page? Checkpoint lawyer writes it from their content file, and also resets their page and stylesheet to the Developer checkpoint's.

Timer: press S when the room starts, or hover it and click Start. P pauses or resumes it, R puts it back to the full time; each Block has its own, and the keys work from the speaker view too. At one minute left the slide shows the checkpoint.

Ops · Role 6 of 6

Your site live, link shared.

What we do · guide page 7

Start Ops
Read the file list back
Say yes to publish
Sign in if GitHub asks
Wait until it is live
Share your link

Why we do it

Read the file list before you say yes: a CV or a photo would be public, and Git keeps old versions. That's mistake 4.
Every push publishes: GitHub Actions puts your site live in about a minute.
Share the link: a site counts when someone sees it.

05

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. Not live yet? Keep your Ops chat going while the room gives feedback: no checkpoint can publish for you.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

Ops Block, 5 minutes. Mistake 4 (Accepting without reading).

Say: Ops runs git status and reads the list back: the files it will publish. Mistake 4: read that list before you say yes. A CV.pdf, an original photo, a notes file in it goes into a public repo, for everyone, and Git keeps old versions. The small photo in site/assets/ belongs there; the original does not.

Then it commits, pushes, and waits with node tools/live.mjs until the site online matches your last commit: usually under a minute, at most two. GitHub Actions builds the site with the same build tool first, and once a day by itself. Address: https://USERNAME.github.io/portfolio/

First push: GitHub may ask for a sign-in, with the account that owns the repo. Windows: Git for Windows opens a "Connect to GitHub" window (Git Credential Manager), maybe behind Antigravity IDE, then the browser. Mac and Linux: Git asks for a username in the terminal and wants a token as the password; the guide's Ops page walks them through it (instructor guide cards w-push, m-push, l-push). TO VERIFY in the demo run (#11) whether Antigravity IDE signs in by itself.

If live.mjs says Pages is not switched on: Settings → Pages → Source: GitHub Actions, and Ops publishes again.

Celebrate: ask people to open their neighbour's site. Live? Keep your GitHub username ready for the gallery walk.

Then the Feedback Block, five minutes in the guide. Anyone not live yet keeps their Ops chat going meanwhile.

Time's up: not live yet? Keep the Ops chat going; no checkpoint publishes. Checkpoint ops equals the Lawyer's, so it is only for anyone still without a privacy page (it resets their page's design too); after it, they still need Ops in a fresh chat.

Timer: press S when the room starts, or hover it and click Start. P pauses or resumes it, R puts it back to the full time; each Block has its own, and the keys work from the speaker view too. At one minute left the slide shows the checkpoint.

Feedback

Your feedback, sent from the guide.

What we do · guide page 8

Open page 8 in the guide: Feedback
Tap through the eleven questions
Write the two text answers
Press Send feedback

Why we do it

Your answers shape the next run of this workshop.
Anonymous: no name, no email.
The two text answers help the most. Be specific.

05

00

left in this Block

Need help? Ask your agent: Where am I?

Time's up. Not sent yet? The required questions are enough: answer them and press Send feedback.

Wi-Fi {{wifi.ssid}}·Password {{wifi.password}}·Guide {{guideShort}}

Gallery walk.

Same template, same two hours. Not one alike.

Live already? Call out your GitHub username.

After the Feedback Block, about 3 minutes.

Ask: who is live and wants their site up here? Click into the field at the bottom and type six to eight GitHub usernames, separated by spaces. Hard to spell? Let them type it themselves. Press Enter: each site appears in its own tile, live, side by side. Four sites show as 2 by 2, eight as 4 by 2.

Say one true, specific thing about each: the style, a colour, the photo, the signature move. Then: same template, same two hours, and not one looks like another.

A click on a tile opens that site in a new tab, for a signature move that needs scrolling. A tile that says "There isn't a GitHub Pages site here." has a typo, or that site is not live yet: fix the name and press Enter again. A repo with another name: type user/repo. The names stay in this browser, so a reload keeps them.

Fewer than three live? Show the Demo site and go on to the seven mistakes.

Seven mistakes to avoid.

1
No plan. Analyst
Write the spec before any code.
2
Endless chat. Designer
One Role per chat. Start fresh.
3
Too much context or too many subagents. Developer
One focused task per chat. No agent swarm.
4
Accepting without reading. Ops
Read every change back. Read git status before you push.
5
Not verifying. QA
Proof, not promises: the Check, screenshots, numbers.
6
Outdated knowledge. Developer
Give the agent current docs: Modern Web Guidance.
7
The biggest model for everything. Setup
Start with the smallest, fastest Gemini Flash.

Thank you.

Your site is live, and it's yours. Keep building.

Connect

linkedin.com/in/fabian-krumbholz

AI-Native Web Development, Hands-On.

The slides

The guide

Your site

Know the topic

Know the AI

Know the code

Performance

Accessibility

Privacy

Today's platform

Vibe coding

Agentic coding

Spec

Spec Today: Analyst

Design

Design Today: Designer

Tickets

Tickets Today: the Blocks

Feature branch

Feature branch At home

Build

Build Today: Developer

Merge request

Merge request At home

CI pipeline

CI pipeline Today: GitHub Actions

QA

QA Today: QA

Legal

Legal Today: Lawyer

Publish

Publish Today: Ops

Model

Agent

Tools

MCP

Rules

Skills

Hooks

Subagents

Input tokens

Output tokens

One Role, one fresh chat

Files are the memory

Only what's needed

What the model read

What it missed

What

Where

When

Performance

Device mode

Screenshots

Lighthouse

Console

For agents

Wi-Fi

Guide

You need

Classic

Modern

Bold

Playful

Technical

No plan. Analyst

Endless chat. Designer

Too much context or too many subagents. Developer

Accepting without reading. Ops

Not verifying. QA

Outdated knowledge. Developer

The biggest model for everything. Setup

Connect