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." 你对设计的描述越具体,结果越好。
披露:本文中有些链接是联盟链接。我们只推荐我们亲自测试并定期使用的工具。查看我们的 完整披露政策。