📄 长文速览：Using Claude Code — The Unreasonable Effectiveness of HTML

作者 Thariq（Anthropic Claude Code 团队成员）分享了他从 Markdown 全面转向 HTML 作为 agent 输出格式的实践与思考：

🔑 核心论点
随着 agent 能力越来越强，Markdown 正在变成瓶颈——超过 100 行的 md 文件几乎没人会认真读完。HTML 才是更适合 AI 时代的输出格式。

📊 HTML 的六大优势

1️⃣ 信息密度更高 —— 表格、CSS 设计、SVG 插图、可交互元素、空间数据……几乎所有 Claude 能理解的信息，HTML 都能高效表达

2️⃣ 视觉清晰易读 —— 可以用标签页、插图、链接组织内容，甚至做成移动端响应式，远超纯文本的阅读体验

3️⃣ 易于分享 —— Markdown 文件在浏览器里渲染很差，HTML 上传到 S3 后一个链接就能分享，同事真正打开阅读的概率大幅提升

4️⃣ 双向交互 —— 可以在 HTML 中加入滑块、旋钮等交互控件来调整设计参数，再用「复制为 prompt」按钮把结果粘贴回 Claude Code

5️⃣ 数据摄取能力强 —— Claude Code 可以读取文件系统、Slack/Linear 等 MCP、浏览器、git 历史等多源上下文来生成 HTML

6️⃣ 更有乐趣 —— 用 HTML 创作让作者感觉更投入、更有参与感

🛠 实际用例
• 方案探索与规划 —— 生成多方案对比的 HTML 网格，或带原型图和代码片段的技术方案
• 代码审查 —— 渲染 diff、内嵌注释、流程图，效果比 GitHub diff 视图更好，现在作者每个 PR 都附 HTML 说明
• 设计与原型 —— 交互式设计调整、动画原型、组件库可视化
• 报告与研究 —— 从代码库、Slack、git 历史等多源数据综合生成可读性极强的报告甚至幻灯片
• 自定义编辑界面 —— 为特定任务构建一次性编辑器（如拖拽排序 ticket、配置编辑器），带导出按钮

❓ 常见疑问
• Token 消耗？确实更多，但 Opus 4.7 的 1M 上下文窗口让这点增量几乎无感，收益远超成本
• 速度？HTML 生成比 Markdown 慢 2-4 倍，但结果是值得的
• 版本控制？HTML diff 噪音大，这是目前的主要短板
• 怎么让 Claude 做出符合审美的 HTML？让它扫描你的代码库生成设计系统文件，作为后续生成的参考

💡 不用做复杂配置，直接对 Claude 说「make a HTML file」就能开始。

原文：x.com/trq212/status/2052809885763747935
示例集：thariqs.github.io/html-effectiveness