昨天让 Claude Code 帮我审一个 PR。
它生成出来一块 Markdown，200 多行 diff 解释夹着代码块，看了五分钟，愣是没看出哪几行是真正危险的改动。
信息全在那，但排版太平了，根本抓不住重点。
后来我试了个不一样的搞法：让它输出 HTML。
同一个 PR，这次直接给我一个网页，高风险改动标红，建议优化标黄，每行 diff 旁边有小气泡批注，顶部还有一张严重程度汇总表，浏览器一开，5 秒扫完重点。
这招是 Anthropic Claude Code 团队的 Thariq Shihipar 从内部带出来的，Django 联合创始人 Simon Willison 看完也说：我从 GPT-4 时代就默认要 Markdown，现在得重新想想了。
我研究了一下，确实有点东西。
Markdown 的问题出在哪
先说清楚：不是说让 Claude 帮你写网页，是让它在给你解释东西的时候，用 HTML 格式来呈现。
想想 Markdown 是什么？标题、段落、代码块，从头到尾一条线，但日常碰到的技术信息，很多本质上是空间性的：
diff 是左右对照的
架构是盒子连箭头
设计系统是色卡排一排
流程图是分支加判断
Markdown 把这些全压成了一维，信息没丢，但结构丢了。
HTML 不一样，Claude 输出 HTML 的时候，手里的工具箱一下子大了：
直接画内联 SVG——流程图架构图不需要 Mermaid 也不需要第三方插件
折叠面板——解释分层收起来，想看哪层点哪层
颜色编码——红的高危黄的注意绿的过了，一眼就明白
多 tab 切换——三个方案并排，不用来回滚
甚至能带点 JS——滑块调参数、动画看效果，5 秒体感胜过 5 段文字
说白了就是一句话：HTML 让 Claude 从「写文档的」变成了「做可视化的」。
哪些场景最好用
Thariq 配了 20 个示例 HTML 文件，挑几个在开发中特别实用的：
代码审查
这是我自己体感最强的，可以这样写 prompt：
帮我审查这个 PR，输出一个 HTML 页面，渲染真实的 diff， 在行内用 margin 批注标注问题，按严重程度颜色分级。出来就是彩色 diff + 行内批注 + 汇总表，跟你在 GitHub 看那些纯文本 review comment 完全不是一个体验。
方案对比
还不确定选哪条路的时候特别好用：
我在考虑这三种数据库方案，帮我生成一个 HTML 对比页面， 每个方案一栏，包含优缺点、适用场景和预估成本。三个方案并排放着，能直接指一个说「就这个，展开讲讲」，不用在脑子里同时 hold 住三段连续文字了。
架构图
画一个这个系统的架构图，用内联 SVG，不要用 Mermaid。 模块之间的数据流用箭头标注。出来是矢量图，直接拷进文档就能用，不需要额外工具链。
学习新概念
解释 RAG 的工作原理，输出 HTML。用折叠面板分层， 每层可以点击展开更多细节，侧边放术语表。概念之间有依赖关系的时候，这种分层导航比线性 Markdown 教程好用太多了。
设计系统
把我们的设计 token 渲染成一个 HTML 色板页面， 每个颜色显示 hex 值、使用场景和对比度评分。这种事 Markdown 根本做不了，颜色总不能用文字描述吧。
临时幻灯片
几个<section>标签加 20 行 JS，就是一个能用方向键翻页的 slide deck，开会前临时让 Claude 把设计文档转成 slides，不用开 Keynote。
怎么用
prompt 里得明确写「输出 HTML」，不说的话 Claude 默认还是给你 Markdown，加一句 Output as a self-contained HTML file 就够了。
「self-contained」这个词很关键，加了这个，输出的 HTML 不依赖外部 CSS 和 JS，双击文件就能在浏览器里看。
可以配合 CLI 一行搞定：
cat some_code.py | claude -p "解释这段代码，输出 HTML， 用颜色标注关键路径，折叠面板展示细节" > explanation.html open explanation.html一行命令，浏览器自动弹出来一个交互式解释页面，这是 Simon Willison 的日常用法。
这些 HTML 可以存下来当文档，自包含的，commit 到仓库里就行，比纯 Markdown 的 README 信息密度高不少。
还有个高级玩法：让 Claude 做一个临时编辑器，比如一个拖拽排序界面、一个参数调节面板，末尾带个「导出」按钮，在界面里调好了，点导出，把结果文本再喂回给 Claude 继续下一步。
人始终在循环里，但循环变紧了。
最后
这技巧的核心其实不是 HTML 好不好的问题，是你得意识到：跟 AI 沟通的时候，输出格式本身就是一个工具选择。
Markdown 是给人写文档用的。HTML 是给浏览器渲染用的。你让 AI 输出的东西最终是拿眼睛看的——那浏览器显然是更好的渲染器。
下次让 Claude Code 帮你审代码、画架构、解释技术概念的时候，试试在 prompt 末尾加一句：
Output as a self-contained HTML file with inline CSS and SVG diagrams.同样的模型，同样的上下文，输出体验差一个量级。
我们出海社区终于有自己的网站了！
欢迎关注，这个账号还会持续分享更多AI编程、出海工具、实战经验、踩坑记录。
想了解更多可以加我 vx: 257735 聊。
出海赚钱案例：一个人做了个开源UI库，不融资不投广告，45天30万美元
出海建站必备：一小时搞定自建邮件，免费！
OpenClaw 真香！我让它每天帮我干这些活
出海赚钱案例：一个人用 PHP 做到月入 17 万美金，利润率 99%！
（2026年最新）Codex CLI 国内使用全攻略：终端 + VSCode + Cursor + Opencode 四种姿势全搞定
从海外公司注册到 Stripe 收款，跑通了出海收付款全流程（实操分享）
玩转 Claude Code Hooks：让自动化渗透到每个环节
