作者认为,随着 AI 智能体能力的增强,Markdown 在处理复杂信息时显得低效且可读性差,转而推崇使用 HTML 作为输出格式。HTML 能提供更高的信息密度,支持表格、SVG、CSS、交互元素等,使复杂信息(如数据、设计、工作流)的呈现更清晰高效。HTML 文档在视觉清晰度、易于分享(通过链接)和双向交互(如参数调整)方面优势明显。Claude Code 能利用庞大的本地或 MCP 上下文(如代码库、Slack、Linear)生成 HTML。作者列举了在需求规划、方案探索、代码审查等场景下的应用示例,并强调无需复杂设置,直接提示 Claude 生成即可。
作者认为,随着 AI 智能体能力的增强,Markdown 在处理复杂信息时显得低效且可读性差,转而推崇使用 HTML 作为输出格式。HTML 能提供更高的信息密度,支持表格、SVG、CSS、交互元素等,使复杂信息(如数据、设计、工作流)的呈现更清晰高效。HTML 文档在视觉清晰度、易于分享(通过链接)和双向交互(如参数调整)方面优势明显。Claude Code 能利用庞大的本地或 MCP 上下文(如代码库、Slack、Linear)生成 HTML。作者列举了在需求规划、方案探索、代码审查等场景下的应用示例,并强调无需复杂设置,直接提示 Claude 生成即可。
如果你的需求文档、分析报告或者代码审查说明是用 HTML 写的,别人真正去耐心阅读它的概率绝对会大幅提升。
双向交互 (Two-way Interaction)
HTML 允许你与文档进行真实的互动。例如,你可以让 Claude 在页面上加几个滑块 (Sliders) 或旋钮,用来直观地调整设计效果;或者提供一些选项,让你微调算法的参数,看看结果会发生什么变化。你甚至可以要求它加个按钮,让你把微调后的完美参数"一键复制"为提示词,直接粘贴回 Claude Code 里去。
用 Claude 制作 HTML 文档本身就是一件极其好玩的事。它让我感觉自己更深度地参与到了创造的过程中,光凭这份参与感,就足够有吸引力了。
如何开始 (How to Get Started)
我其实有点担心,大家读完这篇文章后,会把它搞成一个专门的 /html 复杂技能指令或者类似的东西。虽然那样做可能也有价值,但我特别想强调的是:你根本不需要做任何繁琐的设置,就能让 Claude 为你生成 HTML。你只需要像平时聊天一样,直接告诉它:"给我做一个 HTML 文件"或者"生成一个 HTML 制品 (Artifact)"就行了。
为了让大家有更直观的感受,我已经为各种不同的使用场景制作了许多 HTML 文件。你可以在这里查看所有示例:https://thariqs.github.io/html-effectiveness/ ,下面是对一些核心场景的概览。
需求、计划与探索 (Specs, Planning & Exploration)
对 Claude 来说,HTML 是一块可以深入探讨问题的广阔画布。当接手一个新问题时,我不再指望它只给我丢出一个单薄的 Markdown 计划,而是期望它能生成一张由多个 HTML 文件交织而成的思考网络。
比如,我会先让 Claude Code 进行头脑风暴,探索几种不同的实现方案;接着,我会让它选中其中一个方案深入展开,可能还会让它画些界面草图或者写几段核心代码片段;最后,当我觉得方向对了,我才会让它写出一份详细的实施计划。等我对计划彻底满意后,我会开启一个新会话,把这些积累下来的 HTML 文件全部喂给它,让它正式开始敲代码。
在验证环节,我也会让负责检查的 AI 智能体会话读取这些 HTML 文件,这样它就能拥有更宏伟的全局视角,清楚我们到底想要实现什么。
提示词示例:
我还没想好新手引导页面 (Onboarding screen) 要走什么风格。请生成 6 种截然不同的方案--在布局、语气和信息密度上做出差异--并把它们放在同一个 HTML 文件的网格布局里,方便我并排对比。请在每个方案旁清晰标注它所做的取舍权衡。
请在一个 HTML 文件里创建一份详尽的实施计划。记得画一些视觉草图,展示数据流向,并补充上我可能需要重点审查的代码片段。排版要清晰,让人容易消化理解。
那版本控制怎么办? 老实说,这确实是 HTML 最大的痛点之一。相比起清爽的 Markdown,HTML 文件在版本控制工具里的差异对比 (Diffs) 非常杂乱,代码审查起来比较头疼。
怎么让 Claude 生成的页面符合我的审美,不至于太丑? Claude 内置的前端设计插件已经能帮它生成相当不错的 HTML 页面了。但如果你想让页面完全契合你们公司的品牌风格,你可以让 Claude 扫描你们的代码库,生成一个专属的"设计系统 HTML 文件"。之后,你可以把这个文件作为参考资料丢给 Claude,让它在生成其他 HTML 页面时"照猫画虎",保持风格的高度一致。
保持人机协同 (Stay in the Loop)
说到底,我觉得自己如此钟爱 HTML 的根本原因在于:它让我真切地感觉到,自己依然在这个循环之中,依然在与 Claude 并肩作战。
我之前一度很恐惧,既然我连几百行的 Markdown 计划书都懒得仔细看了,那以后是不是只能两眼一抹黑,任由 Claude 自己去盲目做决定了?但现在我很高兴地说,因为有了 HTML,我感觉自己比以往任何时候都更紧密地参与到了这段人机协同的创作旅程中。
如果你的需求文档、分析报告或者代码审查说明是用 HTML 写的,别人真正去耐心阅读它的概率绝对会大幅提升。
双向交互 (Two-way Interaction)
HTML 允许你与文档进行真实的互动。例如,你可以让 Claude 在页面上加几个滑块 (Sliders) 或旋钮,用来直观地调整设计效果;或者提供一些选项,让你微调算法的参数,看看结果会发生什么变化。你甚至可以要求它加个按钮,让你把微调后的完美参数"一键复制"为提示词,直接粘贴回 Claude Code 里去。
用 Claude 制作 HTML 文档本身就是一件极其好玩的事。它让我感觉自己更深度地参与到了创造的过程中,光凭这份参与感,就足够有吸引力了。
如何开始 (How to Get Started)
我其实有点担心,大家读完这篇文章后,会把它搞成一个专门的 /html 复杂技能指令或者类似的东西。虽然那样做可能也有价值,但我特别想强调的是:你根本不需要做任何繁琐的设置,就能让 Claude 为你生成 HTML。你只需要像平时聊天一样,直接告诉它:"给我做一个 HTML 文件"或者"生成一个 HTML 制品 (Artifact)"就行了。
为了让大家有更直观的感受,我已经为各种不同的使用场景制作了许多 HTML 文件。你可以在这里查看所有示例:https://thariqs.github.io/html-effectiveness/ ,下面是对一些核心场景的概览。
需求、计划与探索 (Specs, Planning & Exploration)
对 Claude 来说,HTML 是一块可以深入探讨问题的广阔画布。当接手一个新问题时,我不再指望它只给我丢出一个单薄的 Markdown 计划,而是期望它能生成一张由多个 HTML 文件交织而成的思考网络。
比如,我会先让 Claude Code 进行头脑风暴,探索几种不同的实现方案;接着,我会让它选中其中一个方案深入展开,可能还会让它画些界面草图或者写几段核心代码片段;最后,当我觉得方向对了,我才会让它写出一份详细的实施计划。等我对计划彻底满意后,我会开启一个新会话,把这些积累下来的 HTML 文件全部喂给它,让它正式开始敲代码。
在验证环节,我也会让负责检查的 AI 智能体会话读取这些 HTML 文件,这样它就能拥有更宏伟的全局视角,清楚我们到底想要实现什么。
提示词示例:
我还没想好新手引导页面 (Onboarding screen) 要走什么风格。请生成 6 种截然不同的方案--在布局、语气和信息密度上做出差异--并把它们放在同一个 HTML 文件的网格布局里,方便我并排对比。请在每个方案旁清晰标注它所做的取舍权衡。
请在一个 HTML 文件里创建一份详尽的实施计划。记得画一些视觉草图,展示数据流向,并补充上我可能需要重点审查的代码片段。排版要清晰,让人容易消化理解。
那版本控制怎么办? 老实说,这确实是 HTML 最大的痛点之一。相比起清爽的 Markdown,HTML 文件在版本控制工具里的差异对比 (Diffs) 非常杂乱,代码审查起来比较头疼。
怎么让 Claude 生成的页面符合我的审美,不至于太丑? Claude 内置的前端设计插件已经能帮它生成相当不错的 HTML 页面了。但如果你想让页面完全契合你们公司的品牌风格,你可以让 Claude 扫描你们的代码库,生成一个专属的"设计系统 HTML 文件"。之后,你可以把这个文件作为参考资料丢给 Claude,让它在生成其他 HTML 页面时"照猫画虎",保持风格的高度一致。
保持人机协同 (Stay in the Loop)
说到底,我觉得自己如此钟爱 HTML 的根本原因在于:它让我真切地感觉到,自己依然在这个循环之中,依然在与 Claude 并肩作战。
我之前一度很恐惧,既然我连几百行的 Markdown 计划书都懒得仔细看了,那以后是不是只能两眼一抹黑,任由 Claude 自己去盲目做决定了?但现在我很高兴地说,因为有了 HTML,我感觉自己比以往任何时候都更紧密地参与到了这段人机协同的创作旅程中。