HTML is the new Markdown: How Anthropic engineers are building with Claude Code | Thariq Shihipar

The discussion highlights the transition from Markdown to HTML as a more effective format for interacting with AI agents like Claude, particularly for handling complex plans and visual elements. HTML enables richer, interactive contentsuch as scrollable interfaces, diagrams, and mockupsmaking it more practical than Markdown for detailed specifications and collaborative workflows. Emphasis is placed on the enduring importance of clear documentation, including product requirements and technical specs, to guide AI-driven tasks and allocate computational resources efficiently. The evolving role of product managers is redefined as "compute allocators," focusing on strategic resource management and using AI agents to explore uncertainties, refine specifications, and generate visual artifacts.

Key themes also center on leveraging HTML for user-centric, interactive design systems and workflows, including dynamic component visualizations and living design documentation. AI tools like Claude are used to automate tasks such as generating mockups, code excerpts, and style guides, while iterative collaboration helps refine ideas into actionable plans. The conversation underscores the value of balancing high-level prompts with flexibility, allowing AI to interpret and produce outputs without micromanagement. Additionally, there is a focus on improving user experience through gamified interfaces, interactive HTML artifacts, and just-in-time documentation, while addressing challenges related to tooling limitations and the need for streamlined, customizable workflows. Ethical considerations around AI interaction, including privacy and emotional language in prompting, are also briefly explored.

• What if you switch from Markdown to HTML for agent communication to create interactive, scrollable plans?

  • Concrete move: Generate HTML-based plans with scrollable sections, visual diagrams, and embedded code snippets using Claude.
  • Why now: Markdown becomes impractical for complex, long-form plans (e.g., 1000+ lines), while HTML allows richer, interactive content that improves clarity and reduces manual editing.
  • Expected upside: Faster collaboration with AI agents, fewer workarounds for visual elements, and higher-quality outputs from agents like Claude due to improved context handling.

• What if you use AI to generate detailed PRDs with technical success criteria and allocate compute resources strategically?

  • Concrete move: Use Claude to draft PRDs that combine product requirements and tech specs into a single HTML document, including types (e.g., data structures) for validation.
  • Why now: As AI workflows require significant compute (e.g., $500/hour), prioritizing tasks via clear documentation ensures you spend resources on high-impact work.
  • Expected upside: Reduced wasted compute, faster alignment with stakeholders, and more actionable outcomes from AI-generated specs.

• What if you create a living design system in HTML, dynamically updated by AI from code repositories?

  • Concrete move: Use Claude to automate the generation of HTML design systems (e.g., component details, color palettes) linked to GitHub repos.
  • Why now: HTML-centric workflows enable real-time updates, interactive component visualizations (e.g., sliders for spacing), and seamless integration with marketing and development tools.
  • Expected upside: Consistent cross-project design, faster iteration with stakeholders, and reduced manual effort in maintaining design systems.

• Adopt HTML over Markdown for AI Agent Communication: Replace Markdown with HTML for interacting with AI agents like Claude to create scrollable, visual, and interactive content (e.g., diagrams, mockups) that improve clarity and reduce manual editing efforts.
• Generate Structured HTML Plans with AI: Use AI tools (e.g., Claude Code) to brainstorm ideas, create interactive HTML files with mockups, code excerpts, and timelines, ensuring plans are visually intuitive and actionable for development.
• Prioritize Compute Allocation via Clear Documentation: Define high-impact tasks through detailed PRDs and specs, ensuring computational resources are spent on projects with measurable outcomes (e.g., avoiding unnecessary AI processing on low-value tasks).
• Implement Interactive HTML-Based Design Systems: Automate design systems using AI (e.g., Claude) to generate HTML artifacts with component details (colors, layouts), enabling real-time updates and cross-project consistency via GitHub integration.
• Iterate with AI for Refinement: Engage in iterative collaboration with AI agents by using follow-up prompts to refine initial brainstorming outputs (e.g., turning rough ideas into structured HTML plans with visual agendas and demos).