使用 Claude Code：HTML 的不合理有效性

Simon Willison's Weblog

Simon Willison's Weblog2026年5月8日

使用 Claude Code：HTML 的不合理有效性

8.5Score

TL;DR · AI 摘要

Thariq Shihipar 倡导将 HTML 作为 AI 输出格式，因其支持 SVG、交互组件和结构化样式，比 Markdown 更适合技术文档。

核心要点

HTML 支持 SVG 和交互式元素，提升信息传达效率
GPT-5.5 生成的 HTML 解释页面包含彩色标注与分步解析，清晰展示漏洞机制
相比 Markdown，HTML 在 token 效率下降时仍具优势，尤其适合复杂技术内容

结构提纲

按章节快速跳转。

§引言：HTML vs Markdown
Thariq Shihipar 提出 HTML 是更有效的 AI 输出格式，优于传统 Markdown。
·Prompt 示例与实践
使用具体提示词让模型输出带注释 diff 和颜色编码的 HTML 文档。
›实测案例：Linux 漏洞解释
用 GPT-5.5 生成 HTML 页面详细解释 obfuscated Python 脚本的攻击逻辑。
·视觉与交互增强
HTML 可嵌入调色板、表格、步骤编号等结构化元素，提高可读性。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）

AI 输出格式优化：HTML 的优势
- 结构化表达能力
  - 支持 SVG 插图
  - 内联 CSS/JS 交互
- 实际应用案例
  - PR 差异分析（带注释）
  - 安全漏洞解释（含分步拆解）
- 对比 Markdown
  - token 效率低但语义丰富
  - 更适合复杂技术场景

金句 / Highlights

值得收藏与分享的关键句。

HTML 支持 SVG 图表、交互控件和内联导航，使信息更易理解，而 Markdown 不具备这些能力。
— 第 2 段
⬇︎ 下载 PNG 𝕏 分享到 X
在处理复杂代码如 Linux 权限提升漏洞时，HTML 能清晰呈现关键步骤与底层原理，优于纯文本。
— 第 4 段
⬇︎ 下载 PNG 𝕏 分享到 X
即使 token 成本更高，HTML 因其丰富的表现力，在技术解释类任务中更具合理性。
— 第 3 段
⬇︎ 下载 PNG 𝕏 分享到 X

#AI#HTML#提示工程#安全#Claude

打开原文

使用 Claude Code：HTML 的非理性有效性

[Simon Willison 的博客](https://simonwillison.net/)

赞助商：WorkOS — 通过 SSO、SCIM、RBAC 等功能让你的应用具备企业级能力。

2026年5月8日 - 链接博客

[使用 Claude Code：HTML 的非理性有效性](https://twitter.com/trq212/status/2052809885763747935)。由 Anthropic 公司 Claude Code 团队的 Thariq Shihipar 撰写的富有启发性的文章，主张将 HTML 而不是 Markdown 作为从 Claude 获取输出的格式。

这篇文章充满了有趣的示例（收集在这个网站上），以及类似这样的提示建议：

帮我审查这个 PR，创建一个描述它的 HTML 文件。我对流式传输/背压逻辑不太熟悉，所以请重点关注这部分。用内联边距注释渲染实际的 diff，按严重程度对发现进行着色，并添加任何有助于清晰传达概念的内容。

自从 GPT-4 时代以来，我一直默认要求大多数内容以 Markdown 格式输出，因为当时 8,192 token 的限制使得 Markdown 相比 HTML 在 token 效率上优势明显。

但 Thariq 的这篇文章让我重新思考了这一点，尤其是在输出方面。要求 Claude 用 HTML 提供解释意味着它可以嵌入 SVG 图表、交互式组件、页面内导航等众多方式，让信息更易于浏览。

去年12月我写过一篇关于构建 HTML 工具的有用模式的文章，但那篇文章主要聚焦于像我的 tools.simonwillison.net 网站上的交互式工具。我现在很期待开始更多地尝试用丰富的 HTML 解释来响应临时提示。

#### 在 copy.fail 上尝试

copy.fail 描述了一个最近发现的 Linux 安全漏洞，包括一个以混淆 Python 代码形式分发的 PoC（概念验证）。

我尝试让 GPT-5.5 创建一个 HTML 形式的漏洞解释，如下所示：

curl https://copy.fail/exp | llm -m gpt-5.5 -s '详细解释这段代码。重新格式化它，展开任何令人困惑的部分，并深入探讨它的作用和工作原理。输出 HTML，样式整洁，并利用 HTML、CSS 和 JavaScript 的能力使解释丰富且互动性强，尽可能清晰'

这是生成的 HTML 页面。效果不错，不过我本应更强调解释漏洞本身，而不是围绕它的 Python 框架。

图1：一张深色主题技术文档截图，标题为“这个 Python 脚本的作用”。正文内容：“这是一个紧凑的、故意混淆的 Linux 特定本地权限提升概念验证。其明显目标是篡改 /usr/bin/su 的内存中图像/页面缓存，然后执行 su 以获取更高权限。” 黄色边框的提示框写着：“安全提醒：此解释仅用于代码理解、逆向工程和防御分析。不要在你没有所有权或管理权的系统上运行此代码。在易受攻击的内核上，此类代码可能会改变特权可执行文件的行为。” 左侧列标题为“高层次总结”：“脚本以只读方式打开 /usr/bin/su，解压缩嵌入的二进制载荷，然后以每4字节为单位处理该载荷。对于每个块，它执行一系列精心安排的操作，涉及 Linux 内核加密套接字接口 AF_ALG、管道和 splice()。重要的是，这不是普通的文件写入操作。它从未对 /usr/bin/su 调用 write() 函数。相反，它似乎依赖于一个与 spliced 文件页和加密 API 相关的内核漏洞/原语，从而将可控字节放置到特权可执行文件的页面缓存表示中。” 编号步骤如下：“1. 打开目标可执行文件 — /usr/bin/su 以只读方式打开。2. 解码隐藏载荷 — 将 zlib 压缩的十六进制 blob 解压成字节。3. 分块修补 — 重复调用辅助函数，偏移量分别为 0、4、8……”。右侧列标题为“为何看起来奇怪”，包含 Pattern 和 Purpose 两列的表格：“import os as g — 使用短别名使脚本紧凑且更难阅读。socket(38, 5, 0) — 使用原始数字 Linux 常量而非可读名称。压缩的十六进制 blob — 隐藏二进制载荷字节并保持脚本小巧。splice() — 不通过普通用户空间复制即可移动基于文件的页面。try: recv(...) except: 0 — 触发内核操作并忽略预期错误。”

发布于 2026年5月8日晚上9点

使用 Claude Code：HTML 的不合理有效性

TL;DR · AI 摘要

核心要点

结构提纲

思维导图

金句 / Highlights

使用 Claude Code：HTML 的非理性有效性

[Simon Willison 的博客](https://simonwillison.net/)

最近的文章

月度简报