At a glance
WHAT IT’S REALLY ABOUT
Anthropic’s Claude Code workflow: interactive specs, HTML plans, agent verification
- The speaker argues that as models and agents run longer, teams must front-load clarification by having Claude “interview” the user for requirements rather than relying on vague prompts like “make it better.”
- The workshop proposes replacing long Markdown specs with dense, visual HTML specs (including screenshots) to improve human review, reduce ambiguity, and speed feedback loops—especially for UI work.
- A three-phase repo guides attendees through (1) interactive requirement gathering, (2) generating multiple HTML design directions, and (3) an embedded verification framework demonstrated on a React to-do app.
- The verification approach makes app state and test contracts readable in the DOM (via data attributes/schemas/fixtures/invariants) so agents can verify behavior without brittle DOM scraping.
- Verification can be run in three “surfaces”—a human-readable dashboard, an agent-driven browser workflow (via Playwright MCP), and a headless CLI/CI run—with optional video clips as shareable evidence.
IDEAS WORTH REMEMBERING
5 ideasLet Claude extract requirements instead of over-constraining it.
The talk applies Sutton’s “Bitter Lesson” mindset: rather than trying to hard-code every constraint up front, prompt Claude to interrogate you for missing details so the true requirements can be surfaced iteratively.
Avoid vague prompts; specify domains of improvement and invite iteration.
“Make it better” produces unfocused changes; better prompts define what to optimize (audience, UX goals, constraints) and explicitly request Claude to ask clarifying questions before producing a spec.
Use HTML specs to increase information density and reviewability.
Long Markdown plans are often unread; HTML can present layouts, interactions, and visuals (including screenshots) in a way that’s faster for humans to validate and easier to give concrete feedback on.
Generate several HTML design directions early to converge faster.
Creating multiple visual variants (e.g., brutalist vs fintech styles) lets you choose and critique concrete options, reducing back-and-forth and misinterpretation compared with text-only descriptions.
Make verification part of the artifact by publishing state contracts to the DOM.
By emitting structured state (e.g., totals/active/done) and verification metadata as DOM-readable attributes, an agent can validate behavior directly instead of relying on fragile selectors or inference from UI pixels.
WORDS WORTH SAVING
5 quotesBad prompting is when you say, "Just make it better."
— Arno
The more capable the models get, the more you should try to resist constraining them.
— Arno
You probably know what you want when you see it, but Claude is likely better at extracting what you want and what you need from you than you are in specifying it to Claude.
— Arno
Especially if the Markdown files get, you know, they get more than about two hundred lines long, it's unlikely you're gonna read it, and certainly unlikely that your colleagues are gonna read them.
— Arno
The objective here at the end is to figure out how do you embed the verification into the artifact itself.
— Arno
High quality AI-generated summary created from speaker-labeled transcript.
Get more out of YouTube videos.
High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.
Add to Chrome