Andrej Karpathy — OpenAI 联合创始人、前特斯拉 AI 负责人,也是 AI 领域最受尊敬的声音之一 — 今天分享了一个技巧,这个技巧已经开始病毒式传播。这个技巧只有一行:

Karpathy 的技巧

"在任何提示的末尾添加: Format your entire response as a complete HTML document. 然后将输出保存为 response.html,并在浏览器中打开它。"

就是这样。在任何提示末尾加上一句话,就能将输出从一大段文本转变为设计精美的交互式文档,包含合适的标题、颜色编码的部分、表格、可折叠手风琴,甚至支持深色模式。它适用于 ChatGPT、Claude 和 Gemini。不需要任何编码知识。

为什么这个技巧这么有效?

当你让 AI 生成文本时,模型只是提供信息。当你要求生成 HTML 时,模型会设计信息。AI 不仅仅回答你的问题 — 它会创建布局、选择视觉层次、组织部分,并以立即可扫描的方式呈现内容。

差异非常明显。关于“十大 JavaScript 框架”的文本响应给你一个带段落的编号列表。而 HTML 响应则提供带颜色编码评分的比较表格、每个框架的可折叠详情,以及适用于任何屏幕的自适应布局。

Karpathy 的话:“长而密集的文本块 — 即使是格式良好的 Markdown — 很快就会让人疲惫。你的大脑必须承担所有重任:解析结构、保持上下文,并在脑海中格式化信息。HTML 完全改变了游戏规则。”

实际怎么操作?

三个步骤。不到一分钟。

步骤 1: 像平常一样写你的提示。任何主题,任何 AI 模型。

步骤 2: 在末尾添加这一行:"Format your entire response as a complete HTML document with modern styling, clean layout, proper headings, and a dark background with light text."

步骤 3: 复制 HTML 输出,将其保存为 .html 文件(任何文本编辑器都行),然后在浏览器中打开。

就是这样。你现在拥有一个设计精美的文档,而不是一大段文本。

💡 专业技巧

在你的 HTML 提示中添加“include collapsible sections, tables where appropriate, and a table of contents at the top”,效果会更好。AI 会创建可点击展开和折叠的交互元素。

---

📬 觉得这个有价值? 我们每周发布真正改变你工作方式的 AI 技巧。直达你的收件箱 →

---

哪 5 类提示最适合用 HTML 输出?

不是每个提示都适合 HTML 输出。简单问题不需要。但这五类会带来巨大转变:

使用场景 为什么 HTML 更好 示例提示结尾
比较带颜色编码的并排表格"...as HTML with a comparison table and pros/cons highlighted"
速查表有序网格布局,可打印"...as a printable HTML cheat sheet with sections and examples"
研究摘要可折叠部分,关键亮点加粗"...as HTML with collapsible sections and a summary table at the top"
学习指南渐进式披露,交互式"...as an interactive HTML guide with expandable explanations"
决策矩阵带视觉评分的加权表格"...as HTML with a scored decision matrix and recommendation"

HTML 输出不能做什么?

它不是魔法。有几个限制:

没有真正的交互性。 HTML 是静态的 — 没有数据库连接、没有实时数据、没有实际应用功能。它是一个设计好的文档,不是 web 应用。

不同模型质量不一致。 Claude 通常生成最干净的 HTML,视觉设计更好。ChatGPT 有时会让 CSS 过于复杂。Gemini 的 HTML 功能正常但不够精致。

短回答用不着。 如果你问“法国首都是什么”,要求 HTML 输出会浪费 token 和时间。这个技巧适用于通常会是 500+ 字文本的响应。

需要保存文件。 你需要复制输出、保存为 .html,然后在浏览器中打开。多花几秒钟,但不像在聊天窗口直接阅读那么无缝。

Kkarpathy 的更深层观点是什么?

HTML 技巧很实用,但 Karpathy 的核心论点更重要:“我们仍在使用 2022 年的界面来处理 2026 级的智能。”我们输入文本提示,得到文本响应。但这些模型能生成交互式文档、视觉解释、3D 模拟和动态界面。我们才刚开始探索 AI 如何呈现信息。

Kkarpathy 预测下一步演进:AI 响应将是交互式视频、3D 模拟或即时生成的动态可视化。你不再只是阅读,而是亲身体验。HTML 是朝这个方向的第一步 — 而且现在就能用。

这直接连接到上下文工程 — 控制 AI 不只说什么,还如何呈现信息的技能。输出格式是上下文的一部分。指定“format as HTML with collapsible sections”的提示,会产生本质上不同(且更好)的结果,而不指定格式的相同提示则不然。

想获取更多实用提示技巧?试试免费的 Prompt Optimizer — 它会重构任何提示以获得更好输出,包括格式规范。对于有效提示的完整框架,请查看我们的 ICCSSE 指南

---

📬 想要更多这样的内容? 来自 AI 构建者的实用 AI 技巧,每周更新。免费订阅 →

---

常见问题

这个技巧适用于 ChatGPT、Claude 和 Gemini 吗?

是的。所有主流 AI 模型都能生成 HTML。Claude 通常视觉设计最干净。ChatGPT 和 Gemini 都表现良好。用你平时用的模型试试吧。

我需要懂 HTML 或编码吗?

不需要。你完全不用编辑 HTML。只需复制 AI 的输出,用任何文本编辑器(甚至记事本)保存为 .html 文件,然后在浏览器中打开。AI 处理所有代码。

我能和同事分享 HTML 输出吗?

能。.html 文件是自包含的 — 直接发送文件,任何人就能在浏览器中打开。不需要服务器或托管。离线也能用。

获取优秀 HTML 输出的最佳提示是什么?

在任何提示末尾添加这个:"Format your entire response as a complete, self-contained HTML document with modern styling, clean typography, a dark color scheme, proper headings, tables where appropriate, and collapsible sections for detailed explanations." 你对设计的描述越具体,结果越好。

披露:本文中有些链接是联盟链接。我们只推荐我们亲自测试并定期使用的工具。查看我们的 完整披露政策