《Claude Code 与 HTML：为什么网页是 AI 编程的高效界面》

导语

这篇 Claude Blog 的核心经验是：在 Claude Code 工作流里，HTML 往往比 Markdown 更适合承载复杂信息。原因不是 HTML 更“高级”，而是它能把结构、视觉、交互、代码、图表和反馈放在同一个可浏览界面里。随着 AI 能做的事越来越复杂，人类需要更好的方式留在回路中。

1. HTML 的信息密度更高

Markdown 擅长文字结构，但 HTML 可以同时表达表格、CSS 设计数据、SVG 插图、代码片段、JavaScript 交互、工作流图、画布空间数据和图片。几乎任何 Claude 能读的信息，都可以被高效表示成 HTML。

这对 AI 协作很关键。模型输出越复杂，纯文字越容易变成一大段没人细读的计划。HTML 可以把信息分层、并列、可视化，让人更容易审查。HTML 的优势不只是“展示漂亮”，而是把复杂输出变成人类愿意读、读得懂、能反馈的对象。

2. 可读性、分享和交互让反馈回路变短

作者说，自己往往不会认真读超过 100 行的 Markdown，更难让组织里的其他人读。但 HTML 可以用 tabs、插图、链接和响应式布局组织内容，上传后也能直接分享链接，别人打开浏览器就能看。

更重要的是双向交互。HTML 文档可以带滑块、旋钮、表单、拖拽卡片、实时预览和复制按钮。比如调动画参数时，HTML 可以让人直接试不同选项，再把结果复制成 prompt 或 JSON 交回 Claude Code。这让人仍然在回路中，但回路更紧。

3. Claude Code 的优势在于能吃进更多上下文

作者强调，选择 Claude Code 生成 HTML，而不是只在 Claude.ai 或 Claude Design 里做，是因为 Claude Code 可以读取代码库、文件系统、MCP、浏览器上下文和 git 历史。它能把这些上下文综合成报告、解释页、PR 审查页或设计探索页。

这意味着 HTML 不是孤立文档，而是代码工作流的一部分。你可以让 Claude Code 读代码，生成带流程图和关键代码片段的 HTML 解释；也可以让它梳理多个 UI 方案，做成网格对比；还可以让验证 agent 读取这些 HTML 文件，获得比单一计划更丰富的背景。

4. 适用场景：规划、审查、设计、研究和一次性编辑器

文章列了几类用法。规格与规划：让 Claude Code 生成多个方向、mockup、数据流和实施计划。代码审查：用 HTML 渲染 diff、注释、严重程度和模块关系。设计原型：用 HTML 快速做交互、动画调参和组件库可视化。

研究报告和学习解释也适合 HTML，因为它能把 Slack、代码库、git 历史和互联网材料综合成易读页面。还有一种很实用的模式是“临时编辑器”：为当前任务做一个一次性 HTML UI，比如拖拽排序 Linear ticket、编辑 feature flag、调 system prompt，并用 copy 按钮导出 Markdown、JSON 或 diff。

5. 为什么作者几乎停止使用 Markdown

作者承认 Markdown token 更少，但 HTML 的表达力和“更可能被阅读”的优势更重要。在 Opus 4.7 的 1MM context window 下，额外 token 不再明显。

他也说自己现在几乎不再用 Markdown，可能属于 HTML maximalist。原因不是规划消失了，而是规划变成多个 HTML 文件：探索、实现计划、UI 方案、验证参考。真正原因是 HTML 让作者更有参与感；当 Claude 接手更多工作，人类需要一种方式持续看见它的选择。

结论

HTML 在 Claude Code 工作流里的价值，是把 AI 输出从“读一大段文字”变成“审查一个可交互对象”。它让复杂信息更密、更清楚、更容易分享，也让反馈从文本评价变成直接操作。AI 越能独立做事，人越需要这种可视、可调、可验证的界面来保持判断力。

思想框架

文章先比较 HTML 与 Markdown 的表达能力，再说明可读、可分享、可交互如何缩短反馈回路，随后列出规划、代码审查、设计、研究和临时编辑器等应用场景。它的底层逻辑是：AI 编程效率取决于人机反馈界面。