Video Summary - Why this Claude Code engineer uses HTML files as AI specs

Main technological ideas: HTML as “AI specs” for Claude Code

Markdown plans/specs can become impractically long as agents run longer (multi-hour runs). The speaker argues that users stop reading/editing these huge plans—which is a mistake—so people must stay “in the loop.”
HTML is positioned as a better medium than Markdown for agent-facing plans/specs because:
- Models can use more context/tokens with HTML.
- HTML is easier for humans to read and scroll, making plans more engaging and understandable.
- HTML supports richer, more visual artifacts (less “ASCII mockups,” more actual rendered/structured visuals).
- It enables interactive/rich artifacts that users can meaningfully work through rather than passively read.

The speaker reframes planning as compute allocation:

Example: “Claude can run for 8 hours” implies spending around $500.
Since cost is tied to runtime, specs, PRDs, and planning become essential gating decisions for where to spend compute.
“Product management is dead / what’s next?” is rebranded as being a “compute allocator” who decides what work is worth running.

Prompt style: ask Claude to produce brainstorming ideas in an HTML file.
Outcome: Claude generates multiple visual demos (e.g., mockups and diagram-like structures) so the user can scroll and compare ideas rather than read an enormous text dump.
Personal guideline mentioned: the user doesn’t read outputs longer than the screen in terminal/Claude Code mode, but HTML artifacts are scannable, so they actually review all options.

Prompt pattern: “Create an HTML file as a plan that helps me visualize implementation… include excerpts, mock-ups, code, etc.”
Output characteristics:
- A self-contained HTML spec/plan (not just a Markdown blob).
- Includes structure like file-system scaffolding, code excerpts, mood boards/visuals, helper scripts, and templates.
The plan is described as something the user can actually read and iterate on.

Technique: when the user dislikes a section of the HTML plan (notably a table of rendering/visualization rules per data type), they prompt Claude to create an editable HTML artifact with a custom UI.
“Throwaway UI” approach:
- Keeps the plan interactive and personalized.
- Lets the user adjust fields, hide/show items, add fields, etc.
- Produces output the user can copy back into the plan.

HTML artifacts are treated like shareable documents:

Can be uploaded/shared (e.g., via web links).
Easier for managers/peers to read than long Markdown specs.
Example use: weekly status updates delivered to a manager in HTML so the manager can digest progress quickly.

The speaker emphasizes “bookends” in specs:

Additional verification ideas beyond unit tests:

Rubrics for outcomes with managed agents.
Evidence like recorded outputs/videos.
Use of synthetic data and CLI runs to catch known breakages (a regression/verification mindset).

Living design system
- Create a designsystem.html artifact representing colors/typography/spacing/components.
- Pass it to future projects so Claude can reference the design system quickly.
- Supports component-level variations and marketers’ needs (e.g., component visualization pages, downloadable images).
“Specs as interactive tools”
- HTML plans can function like lightweight review tools: review workflows shaped to the team’s process.
- Idea: commenting/calling out sections like a lightweight Figma-like review loop.

Claire Vo (host / “How I AI” product leader and AI obsessive)
Thariq Shihipar (speaker; engineer working on Claude Code, referenced as “Tharik” in subtitles)
Source/context: Anthropic (“Code with Claude” event mentioned)