开发者用HTML重构AI输出交互界面取代纯文本报告

Serena心心

AI生成长文本面临人类阅读瓶颈，单文件HTML因支持即时交互与低启动成本，正取代传统Markdown和幻灯片成为新的通用交付形态。

AI-assisted summary of Claude Code 开发者也在这样用 HTML，普通人能拿它做什么？ — original source. Check the original for full context.

Source published: 2026-10-10

Key ideas

代码被视为 AI 的母语，普通人无需掌握语法细节，即可通过自然语言让 AI 生成包含动效与交互逻辑的单文件 HTML 作品。 (0:00)
结合 Hyperframes 框架与 HTML 动态代码，创作者能将抽象技术概念具象化为视频动画，甚至自动化编排渲染出完整的 YouTube 视频。 (1:46)
枯燥的学习笔记可借助 HTML 转化为集成主动回忆遮挡、即时反馈练习与 Flashcard 的互动工具，甚至能直接产品化并产生付费收益。 (3:06)
针对 AI 生成百行以上 Markdown 文本导致的未读瓶颈，直接让 Claude Code 输出具备控件与并排对比的 HTML 页面，能大幅提升阅读完成率。 (4:06)

Detailed notes

## Background 本内容由创作者 Serena心心于 2026 年 10 月 10 日发布在 YouTube 频道。视频简介指出，AI 让人重新认识了 HTML：它不再局限于单纯制作网页，而是普通人借由 AI 表达想法、制作作品的强力载体，涵盖交互 PPT、Hyperframes 视频动画编排、可边学边练的备考网站以及可视化长篇交互报告等多种实践。

## TL;DR 视频探讨了在 AI 时代，代码已成为大模型的“母语”，普通人无需掌握复杂的编程语法即可通过自然语言驱动 HTML 创作。心心通过四大实际案例展示了 HTML 的多元用途：替代传统 PPT 实现主题与图表联动、结合 Hyperframes 制作概念解释动画乃至全自动编排视频、将静态备考笔记转变为带主动回忆与测验的交互式付费学习网站，以及借鉴 Anthropic 团队经验把冗长 AI 报告转化为可视化的可交互仪表盘。最后，视频分析了在单文件 HTML、React 框架与传统 PPT 之间的选型逻辑，强调 HTML 正在成为一种人机协作下低成本、高自由度的全新通用视觉输出格式。

## Atmosphere & style 视频整体呈现出一种轻快、亲切且极具启发性的科技分享氛围，心心以自身真实的使用场景和独立开发经验娓娓道来，没有生硬的技术说教。整个流程层层递进，从直观的视觉 Demo 展示到引发对 AI 人机交互瓶颈的底层思考，兼具极客探索的兴奋感与务实落地的工具属性。观看过程中不仅能真切体会到“普通人也能被 AI 赋能”的低门槛惊喜，更能感受到一种打破传统工作流、用代码作为画布自由表达的创作快感。

## Bulletin - [00:00](https://www.youtube.com/watch?v=_L_po8BMbGg&t=0s) 代码被视为 AI 的母语，普通人无需掌握语法细节，即可通过自然语言让 AI 生成包含动效与交互逻辑的单文件 HTML 作品。 - [01:46](https://www.youtube.com/watch?v=_L_po8BMbGg&t=106s) 结合 Hyperframes 框架与 HTML 动态代码，创作者能将抽象技术概念具象化为视频动画，甚至自动化编排渲染出完整的 YouTube 视频。 - [03:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=186s) 枯燥的学习笔记可借助 HTML 转化为集成主动回忆遮挡、即时反馈练习与 Flashcard 的互动工具，甚至能直接产品化并产生付费收益。 - [04:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=246s) 针对 AI 生成百行以上 Markdown 文本导致的未读瓶颈，直接让 Claude Code 输出具备控件与并排对比的 HTML 页面，能大幅提升阅读完成率。

## Key takeaways - [00:00](https://www.youtube.com/watch?v=_L_po8BMbGg&t=0s) HTML 在 AI 时代被赋予新定义：它不再只是单纯的建站工具，而是普通人用自然语言表达创意与构建轻量应用的通用载体。 - [00:00](https://www.youtube.com/watch?v=_L_po8BMbGg&t=0s) Anthropic 团队成员在日常工作流中已开始频繁要求 Claude Code 直接输出 HTML，代替传统的长篇 Markdown 文档。 - [01:02](https://www.youtube.com/watch?v=_L_po8BMbGg&t=62s) HTML 制作演示文稿支持主题实时换肤、数据图表动态联动与点击展开详情，打破了传统 PPT 的静态限制。 - [01:02](https://www.youtube.com/watch?v=_L_po8BMbGg&t=62s) AI 编写 HTML 幻灯片省去了繁琐的手工排版和对齐操作，让创作者能够将主要精力集中在演示的核心逻辑与文案内容上。 - [01:46](https://www.youtube.com/watch?v=_L_po8BMbGg&t=106s) 利用 AI 将抽象台词转化为 HTML 动画，能直观展现如 MCP 协议连接等复杂技术机制，显著降低观众的理解门槛。 - [01:46](https://www.youtube.com/watch?v=_L_po8BMbGg&t=106s) 借助 Hyperframes 框架，可将口播音频、录屏片段与 HTML 动态特效有机串联，直接自动化导出完整视频成品。 - [03:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=186s) 通过引入 Active Recall 遮挡机制与即时评分测试，HTML 能够将静态备考笔记升级为具备完整学习闭环的互动工具。 - [03:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=186s) 普通人基于个人需求搭建的 HTML 互动工具，在验证有效后可以低成本转化为面向大众的独立付费软件产品。 - [04:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=246s) 当前 AI 交互存在严重的认知矛盾：模型生成长文本速度极快，但人类用户往往缺乏耐心阅读超过百行的纯 Markdown 报告。 - [04:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=246s) 将长文本输出重构为带颜色分区、滑块控件与并排对比的 HTML 仪表盘，能显著改善方案评估效率与团队阅读完读率。 - [05:16](https://www.youtube.com/watch?v=_L_po8BMbGg&t=316s) 单文件 HTML 的核心价值在于启动成本极低，适合一次性分析报告、轻量小工具与即时原型验证。 - [05:16](https://www.youtube.com/watch?v=_L_po8BMbGg&t=316s) HTML、React 与 PowerPoint 各有分工：HTML 胜在快速验证与直观呈现，复杂系统需用 React 重构，而协同场景仍离不开 PPT。 - [05:16](https://www.youtube.com/watch?v=_L_po8BMbGg&t=316s) 技术底层并未发生巨变，真正被颠覆的是人机交互方式，HTML 正演进为人人皆可调用的新型通用视觉输出格式。

## Detailed walkthrough ### [00:00](https://www.youtube.com/watch?v=_L_po8BMbGg&t=0s) 重新认识 HTML：代码是 AI 的母语

在 AI 时代，心心坦言 HTML 是一项彻底被重新认知的技术。过去人们只要提到 HTML，第一反应往往是“不就是用来做网页的吗”，而且前提还必须是自己得掌握代码编写能力。然而现在，普通人只要借助 AI，就能用 HTML 迅速搭建出一套既美观又支持实时交互的演示幻灯片（PPT）；心心自己甚至曾用 HTML 制作过一整支 YouTube 视频以及相关视觉动画，还搭建出了一套能边学边练的房地产互动学习网站，并真正收到了用户的付费购买。与此同时，就连 Anthropic 旗下的 Claude Code 团队成员，也已经开始在日常工作流中更频繁地要求 Claude 直接输出 HTML，而不再是传统的 Markdown 文档。

从底层逻辑来看，HTML 的本质就是用来编写网页内容的结构化语言，浏览器通过解析这些标签代码，来决定在哪个位置显示标题、文字或图片。心心在网页上演示了右键点击“审查元素”（Inspect）的操作，直观展示出网页背后那些界定“哪里是标题、哪里是正文”的标签。最关键的启示在于：“代码就像是 AI 的母语，只要一件事能变成代码，我们就可以让 AI 帮我们开挂。”普通人不必亲自去啃语法，只需要把想法清晰地交代给 AI，就能直接跨越编程门槛。

[01:02](https://www.youtube.com/watch?v=_L_po8BMbGg&t=62s) Demo 1：用 HTML 替代传统 PPT，做出动态交互演示

心心展示的第一个案例是大家在职场与学习中最熟悉的 PPT 演示文稿。她所演示的这套 Slides 并不是在传统软件中一页页排版出来的，而是直接让 AI 编写出单文件 HTML，随后在浏览器中双击打开即可流畅使用。与普通静态 PPT 截然不同的是，这种基于 HTML 的幻灯片具备完整的动态交互能力： - **实时换肤与配色联动**：在展示页面中点击橙色按钮，右侧的卡片主题色就会即刻刷新，同样也能一键切换成紫色或绿色。 - **动态图表与数据联动**：在职业图表页面，切换不同的筛选条件后，画面中的气泡大小与右侧的圆环比例会实时产生动画联动；用鼠标点击某一个职业，还能就地下拉展开关于该职位的详细介绍。

传统的 PPT 制作往往把大量时间耗费在机械对齐、拖拽文本框、调整配色等繁琐的美工细节上。而用 HTML 制作演示文稿，AI 可以在极短时间内全量生成；如果对版式或细节不满意，用户也只需要直接用自然语言对 AI 发号施令进行修改，完全摆脱了手动拖拽的低效流程。这种创作方式的转变，让创作者能够将绝大部分心力集中在“想清楚到底要讲什么”的核心逻辑上，而把排版、色彩搭配以及动效实现全权托付给 AI。

[01:46](https://www.youtube.com/watch?v=_L_po8BMbGg&t=106s) Demo 2：结合 Hyperframes 制作视频动画与全片编排

在演示文稿之外，HTML 还能进一步跃升为视频制作与动态视觉特效的生产工具。心心提到自己往期的技术科普视频——包括讲解 Loop Engineering、Graph Engineering 以及 Hermes Agent 等主题——其中大量画面甚至整套动态视觉，都是基于 HTML 跑出来的。当面临一个极其抽象的科技概念时，为了让观众更直观地理解，创作者往往只需将自己说的那句台词原封不动地发给 AI，指令它将这段解释具象化为一个网页动画。

心心以自己解释“Claude Code 如何借助 MCP（Model Context Protocol）接入 Higgsfield 获得图像与视频生成能力”为例：她将这句抽象的文字设定交给 AI，并结合 Hyperframes 框架，把网页动画转化为了成片中的视觉效果。画面左侧是 Claude Code，右侧是 Higgsfield，中间通过动态的 MCP 连线完成对接；连接成功的一瞬间，右侧界面便立刻生成出精致的产品图。单纯依靠口播往往晦涩难懂，但通过这种 HTML 动态图解，观众一眼就能直观领会“给 Claude 装上了外部插件扩展能力”的过程。更有甚者，在制作关于 Hermes Agent 的整支 YouTube 视频时，心心全程采用了基于 HTML 的自动化管线：先录好解说口播音频并准备好屏幕录制片段，随后让 AI 借助 Hyperframes 将这些音视频素材与 HTML 代码动画有机编排串联，最终直接渲染导出成完整视频，打破了以往必须依赖传统剪辑软件逐帧剪辑的思维定势。

```mermaid flowchart TD accTitle: AI结合HTML与Hyperframes制作视频工作流 accDescr: 展示从口播素材与概念指令到最终视频导出的完整编排流程

subgraph Inputs ["素材与创意输入"] A["录制口播音频 & 屏幕录像"] B["抽象概念说明文字"] end

subgraph Processing ["AI 生成与代码渲染"] B --> C["AI 生成 HTML 动态交互画面"] A --> D["Hyperframes 编排框架"] C --> D end

subgraph Output ["成品输出"] D --> E["导出成完整 YouTube 视频"] end ```

[03:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=186s) Demo 3：将学习笔记转化为可交互的练学工具与独立产品

面对枯燥冗长的学习资料，纯文本通常很难让人保持专注。针对这一痛点，心心展示了如何利用 AI 与 HTML 将死板的备考笔记转化为能够“边学边练”的交互式学习网站。她以自己备考加州房地产执照时制作的互动学习工具为例，展示了如何将知识点拆解为多元互动形式： - **主动回忆（Active Recall）遮挡机制**：在网站首页或章节笔记中，用户可以一键将专业术语的解释遮挡隐藏起来，先逼迫自己在大脑中回忆推导，再点击展开核对正确答案。 - **即时反馈分类练习**：在第一课的法律概念分类测试中，页面提供动产与不动产的辨析选择；用户点击选项后，系统立即给出正误判断与深度解析。 - **翻卡复习与阶段自测**：页面下方集成了 Flashcard 翻转卡片功能用于快速刷题回顾，最后还会附带一套针对本节课知识点的完整 Quiz，用来检验阶段性的记忆留存率。

一份普普通通的备考笔记，借由 HTML 的能力被重构成了一套具备完整学习闭环的软件工具。心心甚至以此为基础，将其上线打造成了一个面向大众的独立付费产品并获得了实际收益。她强调，即使不去做商业化产品，普通人单纯为自己搓一个能边看边考的专属交互式学习小工具，在日常工作与备考场景下也已经具有极高的实用价值。

[04:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=246s) Demo 4：解决 AI 长文本的“未读瓶颈”，将输出界面化

心心引述了 Claude Code 团队成员 Thariq Shihipar 撰写的技术博文《Using Claude Code: The unreasonable effectiveness of HTML》（通俗翻译即“HTML 好用得有点离谱”）。Thariq 在文章中指出了当前人机交互中普遍存在的一大认知瓶颈：现在的 AI 可以在几秒钟内轻松吐出数百行结构极其严谨的规划案或调研报告，然而现实中包括作者自己在内，普通人面对超过 100 行的纯 Markdown 文本，往往根本没有耐心去逐字阅读，更遑论在公司组织内指望其他同事去全篇研读。

心心也生动描绘了许多用户的典型现状：屏幕上 AI 飞速输出了一大段文字，用户只是下意识地一路狂按回车，嘴里念叨着“确认确认、可以可以、继续执行”，但实际上谁都没有真正耐心去审阅内容。针对这种“AI 生成太快、人类来不及也不愿意读”的供需矛盾，Thariq 转变了策略，开始越来越多地命令 Claude Code 直接输出 HTML。 - **维度对比可视化**：原先需要向下滚动数百行的死板文本，在 HTML 页面中可以被重新组织为带颜色分区、带有动态图表的仪表盘。 - **并排评估与实时控件**：不同的技术或业务备选方案可以左右并排直接对比，甚至能够嵌入滑块、按钮以及拖拽控件，让审阅者直接参与参数微调。 - **阅读完读率跃升**：实践反馈证明，当长篇报告被包裹成一个整洁美观的 HTML 交互页面后，他人真正愿意主动打开并完整看下去的概率出现了爆发式增长。

HTML 的底层价值，正在于它成功把 AI 庞杂的文本输出，转化为人类真正愿意阅读、乐于动手的可视化交互界面。

[05:16](https://www.youtube.com/watch?v=_L_po8BMbGg&t=316s) 何时选用 HTML？轻量原型的低启动成本与视觉输出新形态

针对“现代前端框架那么多，为什么不用 React？做演示为什么不用 PowerPoint？”的潜在疑问，心心认为这并不是非黑即白的替代关系，而是取决于具体的业务阶段与应用场景：

心心总结道，AI 时代的 HTML 并没有经历底层技术的自我突变，真正发生改变的是人与技术的连接方式——过去被门槛挡在外面的普通人，现在完全可以依靠自然语言驱动网页技术去自由表达、创作内容甚至孵化微型产品。从过去的 Word、PowerPoint、Markdown，到如今的 AI + HTML，HTML 正逐渐演变为一种通用的“视觉输出格式”：它可以是灵动的交互演示，可以是一段动态视频特效，可以是一份让同事乐于阅读的交互研报，也可以是专属的自测学习软件。

## Notable quotes > [00:00](https://www.youtube.com/watch?v=_L_po8BMbGg&t=0s) 代码就像是 AI 的母语，只要一件事能变成代码，我们就可以让 AI 帮我们开挂。 — 心心

> [00:00](https://www.youtube.com/watch?v=_L_po8BMbGg&t=0s) 不就是用来做网页的吗 — 心心

> [01:02](https://www.youtube.com/watch?v=_L_po8BMbGg&t=62s) 想清楚到底要讲什么 — 心心

> [01:46](https://www.youtube.com/watch?v=_L_po8BMbGg&t=106s) 给 Claude 装上了外部插件扩展能力 — 心心

> [04:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=246s) Using Claude Code: The unreasonable effectiveness of HTML — Thariq Shihipar

> [04:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=246s) HTML 好用得有点离谱 — 心心

> [04:06](https://www.youtube.com/watch?v=_L_po8BMbGg&t=246s) 确认确认、可以可以、继续执行 — 心心

> [05:16](https://www.youtube.com/watch?v=_L_po8BMbGg&t=316s) 视觉输出格式 — 心心

## Mentioned Claude Code, Anthropic, Thariq Shihipar, Hyperframes, Higgsfield, MCP (Model Context Protocol), Hermes Agent, Loop Engineering, Graph Engineering, React, PowerPoint, Markdown, Serena心心

## Video description AI 让我重新认识了 HTML：它不只是用来做网页，也能成为普通人表达想法、做出作品的一种方式。这期用我自己做过的例子，给你看看 AI＋HTML 能怎么玩：做能互动的 PPT，结合 Hyperframes 制作视频动画、编排整支视频，把学习笔记变成能边学边练的网站，以及把 AI 的长篇输出变成更直观的交互式报告。 🔗 视频中提到的链接我的房地产考试学习网站（中文版）： https://www.realestatelicensenotes.com/zh/

Claude Code 团队成员 Thariq Shihipar 的文章： Using Claude Code: The unreasonable effectiveness of HTML https://claude.dev/blog/using-claude-code-the-unreasonable-effectiveness-of-html/ 🎬 相关视频｜本期提到的 HTML 视频与动画案例

想看看这些 HTML 画面放进完整视频里是什么效果，可以接着看这几支：

① Loop Engineering｜用 HTML 动画讲解抽象概念《Prompt、Harness 还没学完，硅谷又开始聊 Loop Engineering 了》把概念变成能看懂的画面，是我用 HTML 做视频的一种方式。 https://www.youtube.com/watch?v=sTFjuwIKF5g

② Graph Engineering｜用 HTML 制作概念解释画面《矽谷 AI 圈又造词了：Harness、Loop 已过时？Graph Engineering 是什么？》这也是本期提到的 HTML 视觉动画案例，可以看看动画如何配合讲解。 https://www.youtube.com/watch?v=tn_I4_1yFSY

③ Hermes Agent｜用 AI＋HTML 编排整支视频《一人公司秘密武器｜你为什么立即要用 Hermes Agent?!》先录好口播、准备录屏，再用 AI 配合 Hyperframes，把素材和 HTML 动画编排起来，导出完整视频。 https://www.youtube.com/watch?v=iLWw9jRFon8

④ Claude Code × Higgsfield｜把一句解释做成小动画《AI 视频赚钱，还能这样玩？给 Claude「开挂」》本期展示的 MCP 连接动画就来自这支：左边是 Claude Code，右边是 Higgsfield，通过 MCP 连起来，把“接上图片和视频生成能力”这件事画出来。下方链接从约 4:22 的动画案例开始： https://www.youtube.com/watch?v=jCke7Mg7YnU&t=262s

══════════════════════════════ 订阅我的Newsletter: https://serenaxinxin.substack.com/ AI 学习社群: https://pathunfold.com/serena ══════════════════════════════ 相关视频： https://youtu.be/wpiqMoM5h60

https://youtu.be/2yr6wuTHEzg?si=wodIKec0l2g5yhMi

https://youtu.be/Vu0IpRQRbYg?si=qLdQ25LajwNg2YcL

https://youtu.be/tn_I4_1yFSY?si=I-ajYtGIEhCsSfGb

https://youtu.be/kKtK9aVKM7A

https://youtu.be/MrmO_XMJLhE

https://youtu.be/iLWw9jRFon8

https://youtu.be/sTFjuwIKF5g

https://youtu.be/weDxB65pV3o

https://youtu.be/IoQSFZAhzrI

https://youtu.be/fB4uipaYYeU

https://youtu.be/RZEb6FLZSHE ══════════════════════════════ 视频章节： 00:00 AI 让我重新认识 HTML 00:39 HTML 到底是什么？ 01:02 Demo 1：用 HTML 做互动 PPT 01:46 Demo 2：用 HTML 做视频和动画 03:06 Demo 3：把学习资料变成互动工具 04:06 Demo 4：让 Claude Code 输出 HTML 05:16 什么时候用 HTML 最合适？

#ai #vibecoding #html

[Source](https://www.youtube.com/watch?v=_L_po8BMbGg)

中文简报

开发者用HTML重构AI输出交互界面取代纯文本报告 AI生成长文本面临人类阅读瓶颈，单文件HTML因支持即时交互与低启动成本，正取代传统Markdown和幻灯片成为新的通用交付形态。视频探讨了在AI时代，代码已成为大模型的“母语”，普通人无需掌握复杂的编程语法即可通过自然语言驱动HTML创作。心心通过四大实际案例展示了HTML的多元用途：替代传统PPT实现主题与图表联动、结合Hyperframes制作概念解释动画乃至全自动编排视频、将静态备考笔记转变为带主动回忆与测验的交互式付费学习网站，以及借鉴Anthropic团队经验把冗长AI报告转化为可视化的可交互仪表盘。最后，视频分析了在单文件HTML、React框架与传统PPT之间的选型逻辑，强调HTML正在成为人机协作下低成本、高自由度的全新通用视觉输出格式。代码被视为AI的母语，普通人无需掌握语法细节，即可通过自然语言让AI生成包含动效与交互逻辑的单文件HTML作品。 (0:00) 结合Hyperframes框架与HTML动态代码，创作者能将抽象技术概念具象化为视频动画，甚至自动化编排渲染出完整的YouTube视频。 (1:46) 枯燥的学习笔记可借助HTML转化为集成主动回忆遮挡、即时反馈练习与Flashcard的互动工具，甚至能直接产品化并产生付费收益。 (3:06) 针对AI生成百行以上Markdown文本导致的未读瓶颈，直接让Claude Code输出具备控件与并排对比的HTML页面，能大幅提升阅读完成率。 (4:06)

Reading summary

心心指出，在 AI 能够熟练编写代码的背景下，HTML 已不再局限于专业前端开发领域，而是演进为一种由自然语言驱动的通用“视觉与交互输出形态”；无论普通人还是专业开发者，都能利用它将冗长文本高效转化为可交互的演示、视频特效、轻量工具与数据仪表盘。以交互式网页重塑演示文稿体验 (1:02) 传统的 PPT 制作往往将大量时间耗费在机械对齐、拖拽文本框和排版微调等低效美工环节。利用 AI 生成单文件 HTML，用户可以直接在浏览器中双击打开运行具备完整逻辑联动能力的动态幻灯片。例如，心心展示的演示页面支持一键切换全局卡片配色，并在职业图表页面中根据筛选条件实时改变气泡尺寸与圆环比例，同时支持点击就地下拉查看岗位详情。在制作流程上，创作者不再需要手动进行复杂的版面调整，只需通过自然语言向 AI 描述修改需求即可完成即时迭代。这种工作流将用户的注意力从繁琐的样式编排中解放出来，使其能够专注于演示内容的核心表达逻辑。结合代码动画打通视频自动化编排 (1:46) 除静态演示外，HTML 还能作为视频动态视觉与特效的生成工具。在解释诸如 Loop Engineering、Graph Engineering 等抽象技术概念时，心心直接将口播台词交给 AI，由其编写出具象化的网页动画。例如在演示 Claude Code 通过 MCP 协议接入 Higgsfield 获得图像生成能力时，画面以动态连线完成对接，并即刻渲染出产品图，直观呈现插件扩展机制。在全片制作层面，心心结合 Hyperframes 框架构建了自动化视频管线。创作者录制好口播音频与屏幕录像后，AI 会将这些媒体素材与 HTML 代码动画进行时序编排，最终直接导出为完整的 YouTube 视频（如关于 Hermes Agent 的科普视频），打破了传统必须依赖非线性剪辑软件逐帧处理的制作定式。将静态学习笔记转化为闭环交互产品 (3:06) 面对难以长期保持专注的枯燥备考资料，HTML 能够将静态文本转化为包含学习闭环的互动工具。心心以备考加州房地产执照为例，展示了利用 AI 将法律概念笔记重构成交互式网站的做法。该页面集成了针对专业术语的主动回忆（Active Recall）遮挡机制，要求用户先在大脑中推导再点击核对答案。此外，页面还内嵌了动产与不动产分类练习的即时正误反馈、用于快速复习的 Flashcard 翻转卡片，以及章节阶段自测 Quiz。心心不仅将这套工具用于自身复习，还进一步将其部署为面向大众的独立付费产品并获得了实际商业收益，证明了轻量网页应用从个人工具向微型产品转化的可行性。通过界面化输出破解长文本未读难题 (4:06) 引用 Claude Code 团队成员 Thariq Shihipar 的博文观点，心心指出当前人机协作存在显著的认知负荷瓶颈：AI 可以在数秒内输出数百行详尽严谨的 Markdown 报告，但人类用户往往缺乏耐心阅读超过 100 行的纯文本，常常在未审阅的情况下连续回车确认。为解决“AI 生成过快与人类阅读滞后”的矛盾，Thariq 与心心均开始让 AI 直接输出带有颜色分区、动态图表与并排对比控件的 HTML 仪表盘。审阅者可以通过滑块与按钮直接微调参数，直观评估不同方案。实践表明，将长篇论述转化为交互式界面后，他人完整阅读并参与讨论的比例显著提升。单文件 HTML 的适用场景与边界 (5:16) 心心强调，采用 HTML 并不意味着全盘替代传统演示软件或现代前端工程。技术选型取决于任务的生命周期与协作需求：单文件 HTML 具有极低的启动成本与极短的“提示词到视觉成品”路径，非常适合一次性报告、即时原型验证与个人微型工具。相对而言，如果原型经过验证后需要演进为长期维护、高复杂度且需大量组件复用的工程，依然应当转向 React 等现代前端框架；若处于需要团队成员多人二次协同编辑、或强依赖企业统一模板规范的办公场景，传统 PowerPoint 等办公软件仍具备不可替代的协同价值。心心总结认为，AI 时代的 HTML 底层规范并未发生根本突变，核心转变在于自然语言抹平了普通人的代码编写门槛。HTML 正在成为一种连接人机交互的轻量级“视觉输出格式”，帮助用户高效表达概念、解决长文本阅读疲劳并验证产品想法，但在长线系统开发与多人协同场景中仍需理性界定其适用边界。

Source quotes

[0:00] 心心: 代码就像是 AI 的母语，只要一件事能变成代码，我们就可以让 AI 帮我们开挂。 [0:00] 心心: 不就是用来做网页的吗 [1:02] 心心: 想清楚到底要讲什么 [1:46] 心心: 给 Claude 装上了外部插件扩展能力 [4:06] Thariq Shihipar: Using Claude Code: The unreasonable effectiveness of HTML [4:06] 心心: HTML 好用得有点离谱 [4:06] 心心: 确认确认、可以可以、继续执行 [5:16] 心心: 视觉输出格式

Original transcript

[0:00] 如果说AI时代有什么东西 [0:02] 让我重新认识了一遍 [0:03] 那html绝对算一个 [0:05] 以前一提到html [0:07] 大家首先想到的就是 [0:08] 不就是用来做网页的吗 [0:10] 而且你还得会写代码 [0:11] 但现在我可以让AI用html帮我快速 [0:14] 做出一套好看又能互动的PPT [0:17] 我还用它做过一整支 [0:18] Youtube视频和视觉动画 [0:20] 甚至做出了房地产互动学习网站 [0:22] 还收到了付款 [0:24] 就连Claude code [0:25] 团队里也已经有人开始 [0:26] 更多地让Claude输出html [0:29] 而不是Markdown文档 [0:30] 那今天我就用几个自己 [0:31] 做过的例子给大家看看 [0:33] 我们普通人怎么用AI [0:35] 加上html赋予自己超能力 [0:39] 简单说html就是用来写网页内容的 [0:42] 浏览器读懂这些代码就能把 [0:44] 标题文字和图片显示出来 [0:47] 比如说我打开这个网站 [0:49] 右键点inspect [0:50] 你看这些html标签就在 [0:52] 告诉浏览器哪里是标题 [0:54] 哪里是正文 [0:55] 而代码就像是AI的母语 [0:58] 只要一件事能变成代码 [0:59] 我们就可以让AI帮我们开挂 [1:02] 啊 [1:02] 那我们首先从大家最熟悉的PPT开始 [1:05] 你现在看到的这套演示呢 [1:07] 就是我让Codex用html做的 [1:10] 直接在浏览器里打开就能用 [1:12] 啊你看这一页 [1:13] 我点一下橙色 [1:14] 右边这张卡片的配色就变了 [1:17] 还可以换成紫色绿色 [1:19] 那再看一下这个职业图表 [1:21] 我换一个筛选条件 [1:23] 气泡和右边的圆环就会跟着变化 [1:26] 点一个职业还能展开它的介绍 [1:29] 用HTML做PPT [1:30] AI生成的快 [1:31] 想修改呢 [1:32] 也可以直接和AI说 [1:34] 不用自己一个一个去拖拽 [1:36] 对我来说呢 [1:37] 这样就能把更多的时间 [1:38] 放在想清楚讲什么上 [1:40] 啊像排版配色 [1:41] 还有互动和动画 [1:43] 就都交给AI来做 [1:46] 那除了做PPT [1:47] 我们甚至可以用它来做视频 [1:49] 做小动画 [1:50] 如果你是频道的老观众 [1:52] 不知道你有没有注意啊 [1:53] 我讲Loop engineering graph engineering [1:56] 还有Hermes agent等等这几支视频呢 [1:58] 里面有很多画面呢 [1:59] 甚至整套视觉动画 [2:01] 其实都是由HTML做的 [2:03] 比如说我想要解释一个概念 [2:05] 我想让观众看得更直观 [2:07] 就可以直接把我说的那句话扔给AI [2:10] 让它帮我做成一个网页动画 [2:12] 啊那就比如说有一次呢 [2:13] 我要解释Claude code怎么 [2:15] 通过MCP接上Higgsfield [2:17] 获得生成图片和视频的能力 [2:20] 我就把这句话交给AI [2:21] 再结合Hyperframes这个框架 [2:24] 把网页动画做成了大家 [2:26] 现在看到的视频画面 [2:28] 你看左边是Claude code [2:29] 右边呢是Higgsfield [2:31] 中间通过MCP连起来 [2:33] 连接完成以后呢 [2:34] 右边就出现了啊生成的产品图 [2:37] 那我如果光讲的话 [2:38] 可能会有点抽象 [2:40] 但是配上画面呢 [2:41] 观众就一眼能看懂 [2:42] 哦原来是给Claude加上了一个新能力 [2:46] 那我甚至还用AI加上html [2:48] 做完了一整支Youtube视频 [2:50] 那就是讲Hermes agent那支 [2:52] 我先录好了口播 [2:54] 然后再准备一些录屏 [2:55] 然后让AI通过Hyperframes把 [2:58] 这些素材和动画编排起来 [3:00] 最后导出成完整的视频 [3:02] 放在以前 [3:03] 我真没想过做视频还能这么做 [3:06] 那除了做演示和视频呢 [3:08] 我们还可以用它来学习 [3:10] 比如说你想学一个概念 [3:12] 但是如果光看文字会比较抽象 [3:14] 不太好理解 [3:15] 那这个时候呢 [3:16] 就可以让AI把你想学的内容 [3:18] 做成一个可以互动的网页 [3:20] 像我做的这个房地产考试学习网站 [3:23] 就是把我的学习笔记和资料放进去 [3:26] 让它变成一个可以边看边练的地方 [3:28] 啊 [3:29] 你看首页这里就可以把解释给遮住 [3:32] 啊自己先想一想 [3:33] 然后再点开核对 [3:34] 进入第一课呢 [3:36] 笔记也可以这样一边看一边考自己 [3:39] 啊这里面还有呢分类练习 [3:41] 我可以先判断它是不动产还是动产 [3:44] 选完以后呢 [3:45] 下面就会给出解释 [3:46] 那再往下呢 [3:47] 还能翻卡片复习 [3:49] 最后呢做一个quiz [3:50] 看看自己到底记住了多少 [3:52] 同一份学习资料呢 [3:54] 就可以做出这些不同的互动 [3:55] 让我边学边练 [3:57] 我还把这个学习工具呢 [3:58] 做成了一个上线的产品 [4:00] 但是对于大多数人来说啊 [4:02] 做一个可以互动的学习 [4:03] 工具就已经很实用了 [4:06] 那今年5月呢 [4:08] Claude Code团队的Thariq写了一篇文章 [4:10] 标题翻译成大白话就是 [4:13] html好用的有点离谱 [4:15] 他说现在AI可以一下子生成 [4:17] 几百行的计划和研究报告 [4:20] 但是他发现呢 [4:21] 自己连超过100行的 [4:22] Markdown都不太会认真读 [4:24] 更不要说让组织里的其他人看完了 [4:27] 哎你有没有这种感觉啊 [4:28] 就是每次AI给你生成一大堆输出 [4:31] 你就一直按回车 [4:32] 确认确认 [4:33] 可以可以执行 [4:34] 但其实根本没有耐心把它读完 [4:37] 所以呢他开始越来越偏好让Claude code [4:40] 直接去输出html [4:42] 同样一份内容呢 [4:43] 原来是几百行往下滚的文字 [4:46] 换成html呢 [4:47] 就可以有图表有颜色 [4:49] 把几个方案并排放在一起比较 [4:51] 甚至加上按钮拖拽 [4:53] 让你直接参与调整 [4:55] 那他的感受是呢 [4:56] 同样一份报告 [4:57] 做成html别人真正愿意打开 [5:00] 愿意读下去的概率就会高很多 [5:02] 哎这其实呢 [5:03] 也点出了一个新的瓶颈 [5:05] AI生成的太快 [5:07] 人却来不及看 [5:08] 也不一定愿意看 [5:09] html的价值呢 [5:10] 可能就是把AI的文字输出 [5:13] 变成一个人愿意阅读 [5:14] 愿意操作的界面 [5:16] 那讲到这里 [5:17] 可能有人会问 [5:18] 那html文件到底什么时候用最合适 [5:21] 前端框架这么多 [5:22] 为什么不用react做演示 [5:24] 为什么不用Powerpoint呢 [5:26] 那我的答案是啊 [5:27] 不用说谁替代谁 [5:29] 只是适合的阶段和场景不一样 [5:31] 比如说我只是想快速 [5:33] 做一份一次性的报告 [5:34] 一个小工具 [5:35] 或者一个产品原型 [5:37] 就不一定要一开始做得很复杂 [5:39] 先用一个html文件就 [5:41] 可以把它做出来用起来 [5:43] 但是当这个原型真的要 [5:45] 变成一个长期维护的产品 [5:47] 页面越来越多 [5:48] 功能越来越复杂 [5:49] 同一套界面还需要反复的使用 [5:52] 比如说react这类工具的 [5:54] 组件就会更有价值 [5:55] 啊那要让同事接着改 [5:57] 或者要用公司的模板呢 [5:58] 那可能还是用Powerpoint更方便 [6:01] 我觉得html的优势就 [6:02] 在于啊启动成本低 [6:04] AI可以直接上手修改 [6:06] 从啊一份文字内容到 [6:08] 一个能看能用的视觉成品 [6:11] 中间的距离很短 [6:12] 所以AI让我重新认识html [6:14] 并不是因为html有了什么新的变化 [6:17] 而是AI让不会写代码的普通人 [6:19] 也可以用网页技术去表达去创作 [6:21] 甚至做一个小产品 [6:23] 以前我们习惯用PPT word或者 [6:26] Markdown来表达和整理内容 [6:28] 现在有了AI [6:29] 我们也可以用上html的优势 [6:31] 用AI加上html去创作 [6:33] html当然还是网页的基础 [6:35] 但是在AI时代 [6:36] 我觉得它越来越像一种 [6:39] 通用的视觉输出格式 [6:41] 可以是一份演示 [6:42] 一段视频动画 [6:44] 一份交互式报告 [6:45] 也可以是帮你学习的工具 [6:47] 啊那如果你还发现了什么用 [6:49] html帮自己开挂的小技巧 [6:51] 欢迎在评论区留言分享给大家 [6:53] 那今天的分享就到这里了 [6:55] 希望可以给你带来一些启发 [6:57] 我是心心 [6:57] 我们下期见拜拜

开发者用HTML重构AI输出 交互界面取代纯文本报告