Skip to content
How I AIHow I AI

Why this Claude Code engineer uses HTML files as AI specs | Thariq Shihipar (Anthropic)

Thariq Shihipar is an engineer at Anthropic working on the Claude Code team. He’s spent the past several months experimenting with HTML as a replacement for Markdown in planning and implementation workflows, discovering that richer visual formats lead to better human engagement—and, ultimately, better products. In this episode, filmed at Anthropic’s Code with Claude event in San Francisco, Thariq demonstrates how to use HTML artifacts to create interactive plans, build throwaway UIs for specific problems, and maintain living design systems that travel with your codebase. *What you’ll learn:* 1. Why HTML has replaced Markdown as the ideal format for AI agent communication and planning 2. How to brainstorm in HTML to get visual mockups and interactive demos instead of text lists 3. The technique for building throwaway micro-UIs to edit specific parts of your plan 4. How to create a living design system in HTML that lives in your repo and travels with every project 5. Why “complexity has to earn its keep” and how HTML helps you stay in the loop without over-constraining Claude 6. The prompting technique that gives Claude flexibility while ensuring that you get what you need 7. Why 99% of your AI-generated tokens should go to planning, interfaces, and communication—not production code *Brought to you by:* Celigo—Intelligent automation built for AI: https://celigo.com/howIAI Persona—Trusted identity verification for any use case: https://withpersona.com/lp/howiai *In this episode, we cover:* (00:00) Introduction (02:39) HTML as the new Markdown (04:30) The compute allocator mindset (05:51) How HTML makes specs more engaging (06:48) Demo: Brainstorming in HTML with Claude Code (09:24) From brainstorm to full implementation plan (11:20) Prompting philosophy: Trust Claude but give it constraints (13:50) The future of PRDs and tech specs (18:16) Making HTML specs editable (20:23) The abundance mindset (24:17) Just-in-time documentation and throwaway software (25:39) Using plans as artifacts for implementation (26:39) Demo: Living design systems in HTML (30:16) Adding comments and annotations to HTML plans (31:42) Recap: The HTML workflow (32:21) Lightning round and final thoughts *Tools referenced:* • Claude Code: https://claude.ai/code • Claude Design: https://claude.ai/design • AWS: https://aws.amazon.com/ • Figma: https://www.figma.com/ • GitHub: https://github.com/ *Other references:* • Anthropic Code with Claude event: https://claude.com/code-with-claude • SpaceX partnership announcement: https://www.anthropic.com/news/higher-limits-spacex • Jevons paradox: https://en.wikipedia.org/wiki/Jevons_paradox *Where to find Thariq Shihipar:* Website: https://www.thariq.io/ LinkedIn: https://www.linkedin.com/in/thariqshihipar/ X: https://x.com/trq212 GitHub: https://github.com/ThariqS *Where to find Claire Vo:* ChatPRD: https://www.chatprd.ai/ Website: https://clairevo.com/ LinkedIn: https://www.linkedin.com/in/clairevo/ X: https://x.com/clairevo _Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._

Thariq ShihiparguestClaire Vohost
May 18, 202635mWatch on YouTube ↗

CHAPTERS

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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.

  13. 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.

  14. 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