How I AIWhy this Claude Code engineer uses HTML files as AI specs | Thariq Shihipar (Anthropic)
CHAPTERS
- 2:39 – 4:30
HTML as a richer spec medium than Markdown
Thariq explains the team’s emerging shift: using HTML files as specs/plans because they’re easier for humans to read and more expressive. HTML lets the model produce visual structure, mockups, and more “web-native” artifacts without ASCII approximations.
- 4:30 – 5:51
The “compute allocator” mindset: specs as cost control
They connect planning to economics: letting an agent run for hours translates into real spend, so humans become “compute allocators.” Specs/PRDs become the decision layer where you choose what’s worth paying for and reduce waste from misalignment.
- 5:51 – 6:48
Why HTML makes specs more engaging (and therefore higher quality)
Claire reframes the value: models can read anything, but humans disengage from raw Markdown. HTML pulls people into the document so they interact, critique, and refine—raising the quality of both the plan and the resulting implementation.
- 6:48 – 9:24
Demo: brainstorming in HTML with Claude Code
Thariq shows a simple prompt that asks Claude Code to brainstorm demo ideas directly into an HTML file. The output includes multiple options with visual mockups, risks, and structured context—making it easier to review than a long chat response.
- 9:24 – 11:20
From brainstorm to a full implementation plan in HTML
After selecting an idea, Thariq has Claude interview him to clarify requirements, then generate a comprehensive HTML plan. The plan bundles narrative, filesystem layout, code excerpts, mockups, and logic—something he says he’ll actually read.
- 11:20 – 13:50
Prompting philosophy: trust Claude, but add constraints that matter
They discuss how to balance guidance and openness in prompts. Thariq warns against over-constraining with overly elaborate “expert planner” instructions, but still sets key requirements (like including code excerpts) while giving Claude flexibility.
- 13:50 – 18:16
The future of PRDs and tech specs: one artifact or many, tailored by audience
Claire and Thariq explore how HTML enables customizable “spec packaging,” from single-file artifacts for solo builders to tabbed/multi-view docs for larger orgs. They highlight using boundaries like type interfaces and success criteria to anchor alignment.
- 18:16 – 20:23
Making HTML specs editable with micro-apps (throwaway UIs)
Addressing Markdown’s editability advantage, Thariq demonstrates generating a custom HTML UI to edit a tricky part of the plan (decision rules). This “micro-software on top of micro-software” lets him interact with content via forms, hide/show fields, and export back to Markdown or the plan.
- 20:23 – 25:39
Abundance mindset: more tokens for thinking artifacts than production code
Thariq frames an “abundance” shift: only a small fraction of generated tokens become production code, while most go into exploratory artifacts—dashboards, interfaces, and planning docs. Cheap generation enables just-in-time documentation and disposable tools that improve understanding.
- 25:39 – 26:39
Using HTML plans as implementation and verification artifacts
Thariq explains how he would use the HTML plan as a handoff artifact: clear context, then instruct Claude to implement. HTML mockups and intent embedded in the plan also support verification—checking whether the output matches what was intended.
- 26:39 – 32:21
Demo: living design systems in HTML (design.md → design.html)
Thariq shows a “living design system” captured as an HTML file—colors, typography, spacing, components—that can be dropped into new projects and referenced by Claude. Claire adds an advanced approach: generating component-level guides and marketer-friendly pages to export realistic UI assets.
- 32:21
Annotations, comments, and custom review workflows + recap and lightning round
They brainstorm adding comment/annotation layers to HTML plans (Figma-like review), enabling teams to shape review workflows via custom interfaces. They recap the HTML workflow end-to-end, then close with quick personal questions and event highlights.
Why plans got unreadable—and why that’s a problem
Thariq and Claire open with a practical complaint: agent plans have become so long in Markdown that people stop reading them. Thariq argues this is a mistake because staying “in the loop” is essential when agents execute large chunks of work unattended.
Collaboration and sharing: links, readable status updates, and adoption
They discuss practical collaboration: HTML artifacts can be hosted and shared as links, making teammates more likely to read them. Thariq also uses HTML for weekly status updates generated from Slack, increasing clarity while reducing his time spent writing reports.
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