回路 / The Loop — 提出有价值的问题，比直接获取答案更重要。
这个专题收集和整理我与 Gemini、ChatGPT、Claude 等 AI 的对话记录。每一篇对应一次完整的提问与回答过程。通过留存这些层层追问，还原日常思考的真实轨迹。
概要
这一期从一个模糊的记忆片段开始：“Claude 前段时间在生成可视化上，好像选了 SVG，还有一份新闻稿。” 循这条线索一路追问，串出了 2026 年 Anthropic 在 AI 输出格式上的一次范式切换：
- 产品端：2026-03-12 官方博客宣布 Claude Builds Visuals（beta）——在对话中内联生成 HTML + SVG 交互式图表
- 工程哲学端：2026-05-08 Thariq Shihipar（塔里克·希希帕，Anthropic Claude Code 团队工程师） 发表《The Unreasonable Effectiveness of HTML》，主张用 HTML 全面取代 Markdown 作为 Claude Code 的默认输出格式
- 业界跟进：Simon Willison（西蒙·威利森，Django 联合创始人、独立 AI 工具作者） 从最初因 GPT-4 时代的 token 上下文限制而坚持 Markdown，到读完塔里克后表示”重新考虑”；Andrej Karpathy（安德烈·卡帕西，OpenAI 创始成员、前 Tesla AI 总监） 公开支持，并抛出金句”Voice in, Visuals out”
- 反方声音：Kurtis Redux（柯蒂斯·雷杜，独立开发者，撰有《The Unreasonable Ineffectiveness of HTML》反驳博文） 用 CloudZero 的实测数据反驳——HTML 相比 Markdown 消耗 2–6 倍 token，含 CSS/JS 时高达 8–10 倍，生成慢 2–4 倍，git diff 噪音大
争到最后，双方收敛到一个务实的场景分工：Markdown 是 Agent 之间的工作语言，HTML 是给人类看的展示界面。这一期把这条线捋一遍，也把 SVG 相对位图和 Canvas 的技术优势、Claude Builds Visuals 与 Artifacts 的边界差异都拆开讲清楚。
Q: 过去半年 Claude 的输出从纯文字变成了带滑块、带图表的 HTML 页面——这次转向的分水岭是哪一份公告？
对应的是 Anthropic 2026 年 3 月 12 日的官方博客 Claude now creates interactive charts, diagrams and visualizations，功能名叫 Claude Builds Visuals（beta）。原文关键描述：
Claude can create custom charts, diagrams and other visualizations in-line in its responses—and then tweak and modify its creations as the conversation develops.
（Claude 可以在其响应中内联创建自定义图表、图解和其他可视化内容——并随着对话的推进调整和修改它的创作。）
三个要点：
- 来源：这个功能是 2025 年秋天预览的 Imagine with Claude 项目的对话版落地
- 发布路径：3 月 12 日 beta 上线 → 4 月 22 日在 Claude 付费计划正式可用 → 之后向所有计划（含免费版）开放
- 触发方式：默认开启，Claude 会自己判断要不要画；用户也可以直接说 “draw this as a diagram” 或 “visualize how this might change over time”
技术实现根据 Anthropic 官方帮助中心 的说明，是 “用 HTML 构建——和网页相同的构建块”（原文：“Claude builds them using HTML—the same building blocks as web pages—so they’re interactive and specific to your question rather than static images.”）。因此天然可交互——点击节点、拖动滑块、展开全屏都可以，也支持保存为 .svg 或 .html 文件。目前限制在网页版和桌面客户端，iOS/Android 暂不支持。
Q: 这个”内联可视化”跟 Artifacts 有什么区别？两个不是长得挺像的吗？
同一家公司的两个不同定位产物。Artifacts（工件） 是 Claude 从 2024 年起提供的功能——在侧边栏独立面板里生成一份完整、持久、可分享/下载的作品（网页、组件、文档、代码）；而这次的内联可视化是白板性质，官方博客里其实有一句话专门说清楚：
Claude’s conversations already include artifacts: permanent tools and documents created by Claude, designed to be shared or downloaded as more polished work. By contrast, these charts, diagrams and visualizations serve a different purpose: Claude builds them to aid users’ understanding as it’s discussing the topic at hand. They appear in-line, rather than in a side panel, and they’re temporary—they change or disappear as the conversation evolves.
对齐成一张表更直观：
| 维度 | Artifacts（工件） | Claude Builds Visuals（内联可视化） |
|---|---|---|
| 位置 | 侧边栏独立面板 | 对话流内联 |
| 生命周期 | 永久，可分享/下载 | 临时，随对话演进或消失 |
| 目的 | 交付一个”完整作品” | 帮你当下理解讨论中的主题 |
| 典型触发 | ”生成一个 XX 应用" | "画一下""可视化一下""解释一下这个流程” |
| 心智负担 | 类似”打开一个文档” | 类似”在白板上画一笔” |
一句话概括：Artifacts 是给你留下的作品，内联可视化是给你看完就丢的思考道具。前者对应长期归档，后者对应即时沟通。
Q: 底层为什么选 SVG，而不是位图（PNG/JPEG）或 Canvas？
先给一个术语底座：SVG（Scalable Vector Graphics，可缩放矢量图形） 是 W3C 标准的矢量图格式，用 XML 文本描述图形（点、线、多边形、贝塞尔曲线），浏览器原生支持。它的优势可以拆成五条，逐个跟位图和 Canvas 对比：
1. 无限缩放不失真
SVG 是基于数学公式渲染的矢量图形——放大 10 倍或缩到手机屏，边缘和文字始终锐利。位图（PNG/JPEG）是固定像素阵列，放大就糊。
2. 每个节点都是 DOM，天然可交互
SVG 元素是 HTML DOM（Document Object Model，网页文档树）的一部分。这意味着：
- 用普通 CSS 就能控制颜色、hover 效果、阴影、过渡动画
- 用
onclick就能给某根柱状图或某个节点绑定点击事件 - Canvas 也能画得很复杂，但它是”像素画笔”——要绑事件必须自己算鼠标坐标是否落在某个图形上
3. 体积轻量，代码即图形
一张典型的折线图/柱状图 SVG 通常只有几 KB 到几十 KB（纯 XML 文本），可以直接内联进 HTML。相比之下同分辨率的 PNG 动辄几百 KB。而且 XML 天然支持 Gzip / Brotli（两种主流的 HTTP 文本压缩算法）压缩。
4. 文本可搜索、无障碍友好
SVG 里的标签、数字、标题都是真正的 <text> 元素，不是被像素化的死图：
- 浏览器 Ctrl+F 能搜到图表内部数据
- 搜索引擎爬虫可以索引
- 屏幕阅读器（无障碍软件）可以读出来
5. AI 时代的”天选格式”（LLM-Friendly）
这是最关键的一条。大模型天然擅长写结构化文本（XML/HTML/代码），但没法”画”出 PNG 二进制图。让 Claude 生成 SVG 相当于让它写代码，而它本来就在做这件事。
更重要的是实时演进能力：你说”把第三根柱子改成红色”，模型只需要修改 SVG 里几行 <rect> 的属性；如果是 PNG，它得整张图重新画一遍。
三种技术的对齐表
| 维度 | SVG | Canvas | 位图（PNG/JPEG） |
|---|---|---|---|
| 渲染原理 | 矢量（DOM 节点） | 位图（脚本画像素） | 固定像素阵列 |
| 放大效果 | 完美锐利 | 模糊/锯齿 | 糊成马赛克 |
| 交互能力 | 极强（每节点可绑事件） | 较弱（需算鼠标坐标） | 无 |
| CSS 动画 | 直接支持 | 每帧重绘 | 不支持 |
| 文本可搜索 | 是 | 否 | 否 |
| LLM 友好度 | 高（改标签即可） | 中（改脚本） | 低（需重画） |
| 适合场景 | 数据图表、拓扑图、UI 图标 | 游戏、粒子系统 | 照片、复杂纹理 |
Q: 三月的产品发布已经解释了 SVG，为什么五月塔里克那篇《HTML 的不合理有效性》还能在开发者圈掀起波澜？
因为它把三月的产品功能升级成了工程哲学。3 月的公告告诉你”Claude 现在会画图了”；5 月塔里克的这篇文章直接主张：用 HTML 全面取代 Markdown 作为 Claude Code 的默认输出格式——不只是画图，而是从需求文档、代码评审、设计原型到研究报告，都改用 HTML 输出。
原文的展示形式本身就在证明观点：他放了 20 个 self-contained（“自包含”，即单文件、无外部依赖、双击就能在浏览器里打开）的 .html demo，每个都是”你原本会随手翻过的 markdown 文档”变成”你会真的读进去的一个网页”。分类如下（demo 集合页）：
| 分类 | 数量 | 举例 |
|---|---|---|
| Exploration & Planning（探索与规划） | 3 | 三种代码方案并排对比、多种视觉设计选项、含时间轴+风险表的实施计划 |
| Code Review & Understanding（代码评审与理解） | 3 | 带边栏批注的 diff 页、面向 reviewer 的 PR 说明、模块架构框图 |
| Design（设计） | 2 | 从 repo（代码仓库）拉出的活页设计系统、组件所有 variant（变体）的对比页 |
| Prototyping（原型） | 2 | 带滑块调节的动画 sandbox（实验沙盒页面）、四页真的能点的流程 |
| Illustrations & Diagrams（插图与图表） | 2 | 内联 SVG 图、带 hover 详情的部署流程图 |
| Decks（幻灯片） | 1 | <section> 标签 + 20 行 JS 就是一个能翻页的演示 |
| Research & Learning（研究/学习） | 2 | 带折叠区+侧边术语表的 feature 讲解、含可交互 hash ring（一致性哈希环，分布式系统里的经典结构）的概念解释 |
| Reports（报告） | 2 | 含小图表的周报、按分钟对齐的 incident timeline（故障时间轴） |
| Custom Editing Interfaces（自定义编辑器） | 3 | 拖拽的 ticket triage board（工单分级板）、feature flag（功能开关）编辑器、变量高亮的 prompt tuner |
塔里克的核心论据可以浓缩成六条：
- 信息密度：HTML 有表格、SVG、CSS、多栏——Markdown 只有一维线性文本
- 视觉清晰度：颜色编码 + 折叠面板 + 布局层级，避免”文字墙”引发的审阅疲劳
- 可分享性：一个
.html上传即可，浏览器原生打开 - 交互能力：滑块、按钮、输入框——用户可以直接改参数看结果，然后把参数复制回 prompt
- 场景适配：diff、call-graph（函数调用关系图）、时间轴——这些空间信息天生适合 HTML，Markdown 会把它们压平
- 人在回路（Keep Humans in the Loop）：作者最后写的一句是全文题眼——“The real reason I use HTML is that I feel much more in the loop with Claude”
第 6 点最重要：长 Markdown 计划书容易让人产生”审阅疲劳”进而盲目信任 AI。HTML + 交互控件强迫你重新加入协作过程，用鼠标点、拖、切换——盯着看的时候，判断力才在线。
Q: 这么好的想法，业界怎么反应的？有反方观点吗？
支持派和反对派都很鲜明。
支持派
- 卡帕西 在 X 上公开跟进，抛出核心口号”Voice in, Visuals out”——语音是人类给 AI 最好的输入，视觉才是 AI 给人类最好的输出。他建议在 prompt 结尾直接加一句”organize the reply into HTML, then open the generated file in a browser”，说效果”惊人地好”（转载见 36Kr 报道）
- 威利森 起初因为 GPT-4 时代 8K token 上下文窗口的历史习惯而坚持 Markdown，读完塔里克后表示”重新考虑了”这个立场，并在自己的 linkblog 里用 GPT-5.5 生成了一个 Linux 安全漏洞（来源 copy.fail 项目）的 self-contained HTML 讲解页做验证
反方：《The Unreasonable Ineffectiveness of HTML》
独立开发者 雷杜 撰文反驳，主要论据三条：
| 反驳点 | 具体数据（据 CloudZero 与其他实测） |
|---|---|
| Token 成本 | 1000 字文档 Markdown ~250 token，HTML ~1500 token（约 6 倍）；带 CSS/JS 时高达 8–10 倍。输出 token 在主流 API 里定价是输入 token 的 3–5 倍，重度用户一年下来可能多花几千美元 |
| 生成时长 | HTML 比 Markdown 慢 2–4 倍——塔里克本人在原文里也承认了这一点 |
| 版本控制 | HTML diff 在 Git 里噪音巨大——标签属性变化混杂在真实内容变更里，PR review（合并请求评审）成本大增。塔里克也承认这是”最大的短板之一” |
雷杜还抛出一个尖锐的角度：Anthropic 按 token 收费，塔里克又是 Claude Code 工程师——公开建议大家用一种更耗 token 的输出格式，多少有点”既当运动员又当裁判”的嫌疑。这个疑问最终没有被正面回答，读者自行判断。
收敛后的共识
争到最后，双方其实收敛到一个务实的场景分工：
| 场景 | 更适合的格式 |
|---|---|
| Agent 之间传消息、AI 的工作记忆、需要 git diff 的长期文档、README | Markdown |
| 复杂计划评审、代码审查、多方案对比、原型演示、给人看的最终展示 | HTML |
塔里克本人也在原文里承认——Markdown 在 AI 的”后台工作语言”角色上依然不可替代，HTML 的战场是”前台给人看的展示界面”。
Q: 那从个人视角，怎么把这个能力用起来？
上手门槛几乎为零，只需要改 prompt。三种触发方式，粒度递增：
1. 最轻：让 Claude 决定
什么都不加，Claude 会自己判断。你问”复利是怎么运作的？“它大概率给你画一条可以拖动利率滑块的曲线（依赖你用的是 claude.ai 网页版且启用了 Builds Visuals）。
2. 显式指令：在 prompt 里指定输出格式
卡帕西版：
Organize the reply into HTML, then open the generated file in a browser.
或者更具体：
用 HTML output，中间嵌入 SVG 架构图和数据流图。
3. 最重：Claude Code 里生成 self-contained HTML artifact
塔里克原文推荐的语法：
Create a single HTML artifact for this task. Use tables, SVG diagrams, and sections where useful.
配套的是”把 Claude 指向一个 design system 参考文件”这个技巧——一次配好，之后每个 HTML 输出都会自动匹配你的品牌样式，不会出现 2000 年代默认蓝色下划线的窘迫场面。
一条硬约束：给自定义交互界面加”导出按钮”
塔里克原文里有一句被反复引用：
Ask for a throwaway editor for the exact thing you’re working on — and always end with an export button that turns whatever you did in the UI back into something you can paste into the agent or commit. You stay in the loop; the loop gets tighter.
翻译成人话：你让 Claude 生成的 UI 界面必须有一个”复制为 JSON / 复制为 prompt / 复制为 markdown”的按钮。否则你在里面拖拖拽拽调好的顺序、开关、参数，全部困在这个一次性 HTML 文件里，没法回流到你的实际工作流。
参考资料
- Claude now creates interactive charts, diagrams and visualizations — Anthropic 官方博客，2026-03-12。Claude Builds Visuals 的产品发布公告
- Visuals in Claude — 官方帮助中心 — 官方对”用 HTML 构建可视化”的技术说明，也列了保存为
.svg/.html的方法 - The unreasonable effectiveness of HTML — examples — Thariq Shihipar 的 20 个 HTML demo 展示页面（配套原文的示例集合，原文纯文字博文另有链接但暂未追到官方托管地址）
- Imagine with Claude 预览视频 — 2025 年秋 Anthropic 发布的实时视觉生成预览，Claude Builds Visuals 的技术前身
- 干掉 .md？兜里 Token 不够，没法和 Karpathy 共情（36Kr） — 中文对 HTML vs Markdown 争议的整合报道，含卡帕西 X 帖子和雷杜反方观点的具体数据
- Simon Willison 关于 HTML 输出的立场变化（转载梳理） — 威利森从 Markdown 阵营转向的公开记录
- 别写 Markdown 了，用 HTML【译】（人人都是产品经理） — Thariq 原文的中文全译版，也是目前找得到的最完整原文替代