#544. HTML 是新的 Markdown:用AI生成动态 Spec
跨国串门儿计划

#544. HTML 是新的 Markdown:用AI生成动态 Spec

33分钟 519 1天前
节目简介
来源:小宇宙
📝 本期播客简介
本期我们克隆了:AI 工具实践播客《How I AI》Why this Claude Code engineer uses HTML files as AI specs | Thariq Shihipar (Anthropic)
本期节目来自 Anthropic 的 Code with Claude 开发者大会现场。主持人 Clara Vo 邀请参与 Claude Code 工作的 Thariq Shihipar,讨论一个正在悄悄改变 AI 编程工作流的趋势:HTML 正在成为人与 Agent 协作的新型文档格式。
过去,很多人用 Markdown 写 PRD、spec、实现计划,再交给 AI 执行。但随着 Agent 可以运行更久、处理更复杂的任务,计划文档越来越长,人类反而越来越不愿意读。Thariq 提出,真正的问题不是 Agent 能不能读 Markdown,而是人类是否还能深度参与其中。HTML 因为可以承载视觉化 mockup、交互式界面、代码片段、设计系统和验证标准,正在成为更适合人类和 Claude 共同理解、共同修改、共同推进工作的媒介。
这期节目不仅讨论“HTML 是新的 Markdown”,还展示了 Claude Code 如何生成 HTML brainstorm、HTML 实现计划、一次性 micro app、living design system,以及团队状态更新。它本质上是一堂关于 AI 时代产品经理、工程师和创作者如何重新设计文档、计划与协作界面的实战课。
👨‍💻 本期嘉宾
Thariq Shihipar,Anthropic 成员,参与 Claude Code 相关工作。他长期探索人和 AI Agent 的协作方式,尤其关注如何通过更好的界面、计划、文档和验证机制,让人类在 Agent 工作流中保持深度参与。
⏱️ 时间戳
00:00 开场 & 播客简介
HTML 是新的 Markdown
01:33 核心观点预告:Markdown 计划太长,人类已经不读了
03:08 Code with Claude 现场:为什么说 HTML 是新的 Markdown
03:27 从 Markdown 到 HTML:Agent 计划变长之后,人类参与度下降
04:52 PRD、spec 和计划为什么仍然重要
AI 时代的新角色:算力分配者
05:11 当 Claude 跑八小时,意味着它可能花掉五百美元
06:00 产品经理没有消失,而是在变成 compute allocator
06:54 和 Agent 保持同步:不是被 AI 管理,而是共同对齐目标
用 HTML 做 Brainstorm 和计划
07:19 Claude Code 现场演示:用 HTML 生成 demo 想法
08:03 从 ASCII wireframe 到视觉化 brainstorm
08:53 一屏读不完就不会读:为什么 HTML 更容易让人投入
10:01 把想法推进成 HTML 实现计划
11:08 Prompt 不需要复杂:让 Claude 自己决定最佳表达形式
12:04 好 prompt 的平衡:给足信息,但不要限制 Claude
12:54 “我相信你”:开放式信任如何改善模型输出
未来的 PRD、Spec 与验证标准
13:26 PRD 的未来:按项目和受众定制的 spec package
14:37 在哪里介入 Agent 工作流:type interface、边界与决策点
15:21 不只写需求,还要写验证标准和测试方法
16:13 测试验证不等于测试:rubric、视频展示和 Outcomes
一次性 Micro App:为一个问题生成一个界面
16:31 Markdown 易编辑的反对意见:HTML 怎么改?
17:22 让 Claude 为具体决策生成可编辑 HTML artifact
18:47 微型软件:从 HTML 计划里拆出一个模块,生成专属编辑 UI
19:57 这是未来的个人协作方式,还是团队协作方式?
团队协作、即时文档与软件丰裕时代
20:26 把 HTML 计划发给同事:被阅读的概率高一百倍
21:02 用 HTML 周报向经理同步工作状态
21:28 软件 Jevons 效应:便宜的 token 带来更多临时工具和漂亮界面
22:07 即时文档与一次性软件:当创作和查找成本接近零
23:43 把 HTML 计划作为实现和验证依据
Living Design System:可运行的设计文档
24:17 用 HTML 表达 design system,而不是 Design.md
25:22 高级用法:组件可视化页面、营销素材和真实 App 截图
26:50 Component variations:用 knobs 和 sliders 探索设计变化
27:35 在计划里加入评论、圈选和审阅交互
28:18 把 spec 做成轻量 Figma dashboard
实操总结与快问快答
28:35 实操流程总结:HTML brainstorm、HTML plan、micro app、design system
29:48 最喜欢 Claude Desktop 哪个 tab?答案是 Code
30:07 Code with Claude 最兴奋的发布:SpaceX 合作与 orbital data centers
31:08 当 Claude 不听话怎么办:不要吼,保持友好和清晰
32:34 如何找到 Thariq:X 账号 @TQ212
🌟 精彩内容
💡 HTML 是新的 Markdown
Thariq 认为,Markdown 曾经非常适合和 Agent 协作,因为它简单、可读、可编辑。但当 Agent 的任务越来越长、计划越来越复杂,Markdown 文档会变成一千行以上的长文件,人类反而不再阅读。HTML 的优势不只是模型能读,而是人类更愿意读、更容易理解,也更容易参与修改。
“HTML 读起来容易得多。所以它成了你和 Claude 之间更丰富的沟通媒介。”
🧠 人类仍然必须深度参与计划
节目反复强调,AI 越强,PRD、spec 和计划反而越重要。因为让 Claude 长时间运行并不是免费的,它消耗的是 token、时间和金钱。人类的新职责,是决定哪些事情值得让 AI 去做,哪些问题需要先想清楚。
“如果你要花五百美元,那我们现在其实都在变成 compute allocator,也就是算力分配者。”
🛠️ 用 HTML 生成可读的实现计划
Thariq 展示了如何让 Claude Code 先用 HTML brainstorm demo 想法,再把选中的想法扩展成一个完整的 HTML 实现计划。这个计划里可以包括 mockup、代码摘录、文件结构、mood board、逻辑说明和执行步骤。相比一份长 Markdown,这样的计划更像一个小型网页,人类更愿意真正读完并参与。
“这就是计划。它完全是 HTML。这个东西我真的会读。”
🎮 一次性 Micro App:为一个决策生成一个界面
当 Thariq 不喜欢 HTML 计划里某个具体规则表时,他没有回到终端里用文字来回修改,而是让 Claude 为这个问题生成一个专属可编辑界面。这个界面可以修改字段、隐藏内容、添加规则,并把结果导出成 Markdown 再放回计划中。Clara 将其称为“微型软件”,甚至是叠在微型软件之上的微型软件。
“这甚至都不是个人软件了。它更小,是微型软件。”
📄 即时文档和一次性软件的时代
当生成文档、生成界面、生成工具的成本大幅下降后,团队不一定再需要为所有内容强行套用同一个模板。计划可以是 HTML,周报可以是 HTML,设计系统也可以是 HTML。重点从“文档放在哪里、格式是否统一”,转向“这个计划是否清楚、是否有助于判断和执行”。
“因为它很便宜,所以用完就可以扔掉。”
🎨 Living Design System:Design.html 万岁
Thariq 和 Clara 都分享了把 design system 做成 HTML artifact 的做法。它不仅可以展示颜色、字体、间距和组件,还能让 Claude 在不同项目中引用同一套设计语言。Clara 还提到,可以为营销团队生成组件可视化页面,让他们直接下载真实 App 风格的透明 PNG,用于 deck、视频或宣传素材。
“Design.md 已经死了。Design.html 万岁。”
✅ 测试验证不等于测试
节目中还提到,AI 时代的验证不只等于传统 unit test。验证可以是一套 rubric,可以是一组 synthetic data,也可以是让 Claude 展示它完成了什么。对于产品经理来说,未来不仅要写功能需求,还要更清楚地定义成功标准、验证方式和边界条件。
“测试验证不等于测试。”
🤝 对 Claude 友好一点
在快问快答中,Clara 问 Thariq 当 Claude 不听话时会不会吼它。Thariq 表示不会。他更倾向于用友好、清晰的方式和模型沟通,因为他希望未来存在这样一种协作方式:你对模型更友好、更有建设性,它也能给出更好的结果。
“我更希望这样一种情况存在:你对 Claude 友好一点、客气一点,就能得到更好的输出。”
🌐 播客信息补充
本播客采用原有人声声线进行播客音频制作,也可能会有一些地方听起来怪怪的
使用 AI 进行翻译,因此可能会有一些地方不通顺;
如果有后续想要听中文版的其他外文播客,也欢迎联系微信:iEvenight

加入我们的 Discord

与播客爱好者一起交流

立即加入

扫描微信二维码

添加微信好友,获取更多播客资讯

微信二维码

播放列表

自动播放下一个

播放列表还是空的

去找些喜欢的节目添加进来吧