让AI输出HTML而不是Markdown——Anthropic工程师的20个实战案例
你有没有这样的体验：让 AI agent 帮你做技术方案对比，它吐出一大段 Markdown。方案A、方案B、方案C 全部竖着排，你得上下翻滚对比，脑子里不断切换上下文。
Anthropic Claude Code 团队工程负责人 Thariq Shihipar 说：别用 Markdown 了，让 agent 输出 HTML。
这不是炫技。他做了 20 个案例展示页，核心论点只有一句：空间信息需要空间渲染，Markdown 会把一切压平成一维。
Markdown 的问题在哪
Markdown 本质是线性文档——从上到下，一段接一段。但真实世界的很多信息是空间的：
你用 Markdown 写方案对比，读者只能上下翻。三段文字在视觉上可能隔了半屏，但逻辑上它们是并列的。这就是为什么你读 AI 生成的长文总觉得累——信息在视觉上的排列方式跟它的逻辑结构不匹配。
6 个可以直接抄的设计模式
Thariq 的 20 个 demo 里，有 6 个模式特别适合 agent 工作流。
一、方案对比卡片
三个方案并排，每张卡片包含代码块、优缺点列表、底部指标行（包大小、可测试性、复用性、SSR支持）。右侧自动给出推荐总结。
适合：技术选型、架构决策。
想象一下：你问 agent「SSR 选 Next.js 还是 Remix 还是 Astro」，它不再给你写三段文字，而是直接渲染一个三列对比卡片，底部打分，右侧推荐。决策效率翻倍。
二、实施计划一体页
六个模块合在一个页面：时间线里程碑、数据流图、原型 Mockup、关键代码、风险表、待决问题。
适合：项目启动、需求拆解。
这不是一份"报告"，这是一个可以直接交给执行者的工作界面。
三、可拖拽看板
四列（Now / Next / Later / Cut），卡片可拖拽，标签可筛选，一键导出为 Markdown。
适合：Sprint 规划、需求优先级排序。
四、特性解释器
顶部导航栏（TL;DR → 请求路径 → 配置 → 注意事项 → FAQ），步骤可折叠，配置代码用标签页切换。
适合：技术文档、新人 onboarding。
五、概念可视化
一致性哈希的环形交互图：滑块调节节点数量，按钮增删节点，颜色弧线显示归属，底部对比表格（普通取模 vs 一致性哈希）。
适合：技术教学、算法演示。
六、事件时间线报告
时间线（分钟级精度）+ 影响数据表（请求数、错误率、用户数、数据丢失、SLA 达成率）+ 根因 diff 标注 + Action items 清单。
适合：事故复盘、周报。
设计系统：纸感 + 三字体栈
20 个 demo 共享一套设计语言，值得单独说一下：
这套系统的核心思路是：用最少的设计元素创造最大的信息层次。serif 标题定调性，sans 正文保可读，mono 代码区分逻辑。配色只有 4 个，但通过透明度和面积分配创造了足够的层次。
怎么用起来
如果你在做 agent 开发或者用 Claude Code / Hermes 这类工具，有三件事现在就可以做：
第一，把方案对比、实施计划、看板这些模式作为 agent 输出的可选格式。不是所有输出都要 HTML，但涉及"对比"、"规划"、"结构化呈现"的场景，HTML 远胜 Markdown。
第二，复刻"实施计划一体页"的结构作为项目规划的默认输出。时间线+数据流+原型+代码+风险+待决，一个页面交付一个完整的项目启动包。
第三，代码审查的输出要求 HTML 格式。严重性标签用颜色区分（红=必须修、黄=建议改、绿=可选优化），行级注解直接内联，比看 diff 输出高效得多。
source: thariqs.github.io/html-effectiveness[1]
Simon Willison 深度解读: simonwillison.net[2]
参考链接
[1] thariqs.github.io/html-effectiveness: https://thariqs.github.io/html-effectiveness/
[2] simonwillison.net: https://simonwillison.net/2026/May/8/unreasonable-effectiveness-of-html/