share.dax.cool · thariq-html-workflow

HTML 不是文档
throwaway editor

解读 Thariq @ Anthropic · 一套 AI 时代的人机协作工作流
Markdown 的隐含假设是"人会从头读到尾"
HTML 的隐含假设是"人只想扫重点和动手改"
原作者 Thariq · Anthropic · 1.5M 阅读 · 看上去在讲格式审美, 实际在讲一套全新的工作流
01 · Four Big Ideas

四个核心论点

扫读用 · 每条 30 秒看完

Idea 01

HTML = throwaway editor

不是文档, 是用完即扔的可视化工具
经典例子: 30 个 Linear ticket 要重排优先级, 让 Claude 生成可拖拽 HTML, 分 Now / Next / Later / Cut 四列, 拖完点 copy as markdown 把结果贴回 Claude Code。

适用场景: 调动画缓动曲线 / 调颜色 / 调 cron / 调 regex——所有"用纯文字描述很费劲"的事, HTML 表达力高一个量级。下方第 02 段就是真的可拖拽的实例。
Idea 02

HTML 网做 spec, 不是 Markdown plan

spec 从过渡产物 → multi-agent 共享内存
流程: ① 让 Claude 生成 6 个不同方向的方案, 平铺一个 HTML 横向对比 → ② 挑一个深入做 mockup + 数据流图 → ③ 写实施计划。新 session 把整个 HTML 网络当 context 喂回。

关键转变: verification agent 也读这堆 HTML——spec 不再是"给人读完就丢"的中间产物, 而是 multi-agent 协作的共享状态。
Idea 03

SVG 是被严重低估的输出

一张图 ≈ 200 行 Markdown
让 Claude 把 token bucket 限流逻辑画成 SVG 流程图, 关键代码片段做内联注释, 加 gotchas 段落。

相比 Mermaid 的语法约束, 内嵌 SVG 表达力更强——任意定位 / 任意视觉细节 / 任意交互。下方第 03 段就是一张这样的真 SVG 图, 替你看完一半文档。
Idea 04

诚实承认代价

慢 2-4×, 但 1MM context 下不可见
HTML 比 Markdown 生成慢 2-4 倍, diff 也更难 review——这是真的代价, 不掩饰。

但 Opus 4.7 + 1MM context window 下, 多出来的 token 在 context 里几乎不可见。这是关键取舍——拿写得慢换看得快 + 改得快, 在长 context 模型上账算得过来。
02 · Live throwaway editor

动手感受 · 拖拽重排

Idea 01 的真实演示——你拖完点导出按钮, 把结果直接贴回 Claude

拖拽卡片到任意列 · 桌面用鼠标 · 移动端长按拖动
Now · 立刻做
LIN-101
修复登录页面 OAuth 回调 404
LIN-088
DB 写入加 retry, 防止 connection reset
Next · 这周
LIN-112
用户头像换 R2, 释放 S3 出口流量
LIN-076
Dashboard 加 dark mode 切换
LIN-129
支付失败重试逻辑改成 exponential backoff
Later · Q3
LIN-054
报表导出从 PDF 切到 Excel + CSV 双格式
LIN-093
支持 SSO (SAML / OIDC)
LIN-117
国际化 i18n 框架接入
Cut · 删掉
LIN-042
实验室功能: 内置 Markdown 编辑器
LIN-067
Q1 提的 Slack 集成 (用户量 0)
03 · SVG over Markdown

Token Bucket 限流 · 一张图说清

Idea 03 的真实演示——内嵌 SVG + 内联注释 + 关键 gotchas

Token Bucket Algorithm · 限流逻辑 refill source 每秒 +N tokens +1 / 100ms Token Bucket 7 / 10 capacity ↑ 上限 = burst capacity 满了多余的 token 直接丢 incoming request 需要 1 token consume tokens > 0 ? 原子操作 ✓ ALLOW · 200 tokens -= 1 yes ✘ DENY · 429 Retry-After: t no Gotchas: ① 多实例共享 bucket 必须用 Redis Lua 脚本, 否则并发减扣有竞态 ② refill 用懒计算 (lazy refill on access), 不要起后台 timer——CPU 浪费 + 时钟漂移 ③ burst capacity 设太大 = 限流形同虚设 (一秒打满 100 个); 设太小 = 正常突发也被拦
这张 SVG 替代了一份 ~200 行 Markdown 文档
04 · Workflow Shift

Markdown 时代 → HTML 时代

这不只是格式之争, 是协作模式的范式转移

Before · Markdown 时代

人是顺序读者

  • spec 是单线 plan, 一份 markdown 从头读到尾
  • 方案对比靠想象 / 跳读
  • 调参 = 来回贴文本, 描述偏差累积
  • verification 看不懂中间过程, 只能看最终代码
  • 一份 spec 写完即丢
After · HTML 时代

人是扫读 + 动手者

  • spec 是 HTML 网, 多方案横向并列
  • 方案对比靠肉眼直接扫
  • 调参 = 拖滑块改颜色, copy 出来贴回
  • verification agent 也读 HTML, spec 成共享状态
  • spec 是 multi-agent 长期共享内存
05 · Honest Cost

不掩饰的代价

三个数字

2-4×
HTML 比 Markdown 生成慢的倍数
(token 多, 模型要写更多结构)
1MM
Opus 4.7 的 context window
(多出来的 HTML token 几乎不可见)
📉 难
HTML 改动的 diff review 难度
(structure + style 混在一起)
06 · Take-away

一句话

看完这页 30 秒后还记得的部分

Markdown 的隐含假设是
"人会从头读到尾"

HTML 的隐含假设是
"人只想扫重点和动手改"
后者才符合 AI 时代人和机器协作的真实形态