← Back to Home

Using Claude Code: The Unreasonable Effectiveness of HTML

Simon Willison 工具链 入门 Impact: 7/10

A member of the Claude Code team argues that requesting output in HTML from AI is more effective than Markdown, leveraging its rich interactivity and visualization capabilities to significantly enhance clarity and user experience.

Key Points

  • The choice of AI output format is shifting from 'token efficiency' to 'expressiveness'
  • HTML can integrate diagrams, interactive widgets, and navigation for clearer explanations
  • This marks the evolution of AI tools from 'text generators' to 'rich media explainers'
  • Developers can experiment with HTML prompts to have AI generate more understandable technical documentation

Analysis

The Catalyst: Why Revisit HTML Now? Remember the GPT-4 era? The 8,192 token limit felt like a straitjacket, making every word count. Markdown, with its conciseness and token efficiency, became our default choice for requesting AI output. But times have changed. Thariq Shihipar from the Claude Code team recently posed an intriguing idea: for output, especially explanatory content, HTML might be more effective than Markdown. This isn't just about format preference; it's about the expanding capabilities of AI and the evolution of how we use it. Deconstruction: What Makes HTML So 'Effective'? Thariq's core argument hinges on HTML's expressive dimensions far exceeding those of Markdown. Markdown is essentially structured plain text, whereas HTML is a full-fledged rich media platform. When you ask Claude to output in HTML, you unlock more than just bold text and lists:

  1. Integrated Visualization: The AI can directly embed SVG diagrams, illustrations, and even simple data visualizations into its output. When explaining a complex algorithm or data flow, a picture is worth a thousand words. 2. Interactivity: You can add collapsible sections, tabs, and simple button interactions. This is crucial for presenting information hierarchically (e.g., see a summary first, then expand for details). 3. Structured Navigation: Through anchors, tables of contents, and even simple in-page navigation, users can quickly jump to sections they care about, instead of manually scrolling through a long Markdown document. 4. Styling & Clarity: With CSS, key information can be highlighted, severity levels color-coded (like red/yellow/green in security vulnerability analysis), and layout used to distinguish primary from secondary information, greatly enhancing scannability and comprehensibility. The article provides a vivid example: asking GPT-5.5 to explain an obfuscated Linux privilege-escalation exploit in HTML. The generated HTML page not only reformats the code but also includes a high-level summary, step-by-step explanations, safety warnings, and uses styling to clearly differentiate sections. This is far more intuitive than a flat, monolithic block of Markdown explanation. Trend Insight: From 'Text Generation' to 'Experience Generation' This reveals a deeper trend: AI's role is shifting from a 'text completer' to an 'interactive explanation engine'. We no longer settle for AI just producing correct text; we demand it generate 'knowledge experiences' that are easy to understand and explore. HTML, as the foundation of the web, is inherently the tool for building such experiences. Simon Willison himself admits that he'd been habitually requesting Markdown since the GPT-4 days, but Thariq's piece made him reconsider. This foreshadows that the 'last mile' of the AI toolchain—output presentation—might become as important as the model's raw capability. We may see more prompt engineering techniques tailored for 'rich media output,' and even model fine-tuning specifically optimized for HTML generation. Practical Value: How Can I Use This? For developers and technical professionals, this offers an immediately applicable new思路:
  • Change Your Prompts: Next time you need AI to explain complex code, a technical concept, or data analysis, try appending to your prompt: "Please output in well-formatted, styled HTML, fully leveraging HTML/CSS/JS capabilities to make it interactive and clear." - Focus on Output Format: When building internal tools or demo prototypes, consider having the AI generate embeddable HTML snippets instead of just Markdown text. This can quickly create more professional deliverables. - Re-evaluate 'Efficiency': Token efficiency remains important, but for tasks requiring deep human understanding, 'comprehension efficiency' might be more critical than 'token efficiency.' Using slightly more tokens to drastically reduce user understanding time is often a worthwhile trade-off. A Counterintuitive Angle & Caveats An angle that might be overlooked is that this actually lowers the barrier to creating high-quality technical documentation. In the past, producing an explanatory document with diagrams and good layout required front-end skills and significant time. Now, you simply describe your needs in natural language to the AI, and it generates it for you. This massively empowers experts who possess deep domain knowledge but lack front-end presentation skills. Of course, this isn't about completely replacing Markdown. For plain text content, code blocks, or simple notes, Markdown's simplicity remains an advantage. The key is to choose the format based on the output goal: use Markdown for quick notes and plain text exchange, and seriously consider HTML for deep explanation and knowledge transfer. In summary, Thariq's observation reminds us that in the AI era, every link in the toolchain is worth re-examining. A seemingly minor choice like output format might hold significant potential to enhance our collaborative efficiency with AI.

Analysis generated by BitByAI · Read original English article

Originally from Simon Willison

Automatically analyzed by BitByAI AI Editor

BitByAI — AI-powered, AI-evolved AI News