本文最后更新于 2026-05-12，文章内容可能已经过时。

让LLM输出HTML：一个让我关掉Notion的小技巧

我以为这是个没什么用的小技巧。

结果做完那张对比表格的那一刻，我把Notion关掉了。

事情的起点是Andrej Karpathy在X上的一条推文。他提到，当你需要LLM输出结构化信息时，与其让它输出Markdown，不如直接让它输出HTML——然后扔进浏览器渲染。颜色、表格、折叠、标签、内联样式，全都可以用上。

我当时的反应是：这不是多此一举吗？

然后我试了。

---

第一章：Karpathy在说什么？

Karpathy的原始逻辑并不复杂：LLM的输出格式，是一个被严重低估的变量。

Markdown是为"被工具渲染"而设计的，但大多数时候我们的工作流里没有那个工具——我们把输出粘贴到飞书文档，粘贴到微信，粘贴到邮件，然后看着一堆##和**符号发呆。

HTML不一样。HTML是浏览器的母语。你不需要任何中间层，直接打开就是渲染好的页面。

更关键的是，HTML给了模型一个表达维度的升级：

  • 纯文本：线性，只有内容
  • Markdown：有层级，但依赖渲染器
  • HTML：有颜色、有交互、有视觉权重、有空间布局

当你需要比较5款工具、展示优先级、区分状态的时候，这个维度差异是质变，不是量变。

Karpathy的判断是：对于"需要被扫描而不是被阅读"的信息，HTML是最优输出格式。

这句话我后来反复用来做决策，非常好用。

---

第二章：怎么操作？（5分钟跑通）

操作链路极简，三步：

写Prompt（指定输出HTML）

↓


拿到HTML代码


↓


在浏览器打开渲染
第三步有三种方式，任选其一： 方式A（最快）：浏览器地址栏

在地址栏输入 data:text/html, 然后把HTML代码直接粘贴在后面，回车。浏览器会直接渲染，不需要任何文件操作。

方式B：保存为本地文件

把HTML代码保存为 output.html，双击打开。适合内容较长、需要保存的场景。

方式C：在线预览工具

用 [CodePen](https://codepen.io) 或 [JSFiddle](https://jsfiddle.net) 的HTML预览区，粘贴进去即可。

⚠️ 关键Prompt指令：每次让模型输出HTML时，记得加上这句话：
"输出完整HTML，使用内联CSS，不要引用任何外部资源（字体、图片、CDN）。"
这样保证你的HTML在任何环境下都能独立渲染，不依赖网络。

零工具依赖，零学习成本，任何人5分钟内能跑通。

如果你想直接测试本文的Prompt模板，不需要配置任何环境——直接访问 [api.884819.xyz](http://api.884819.xyz)，接入主流模型API，把Prompt粘进去就能跑。文中所有示例均在该平台验证过，响应速度和格式稳定性都没问题。新用户注册即送体验token，国产模型（Deepseek/千问等）完全免费，没有月租。

---

第三章：4类场景实测

我用同一套内容，分别用纯文本和HTML输出，测了4类场景。以下是真实结论。

---

场景① 信息汇总对比 ⭐⭐⭐⭐⭐

任务：比较5款AI写作工具的功能差异

这是HTML输出最值的场景，没有之一。

纯文本输出的对比，你需要反复横跳、用眼睛对齐列，读完一遍基本忘了前面写什么。HTML版本用表格、颜色标注"支持/不支持"、加粗关键差异点，扫一眼就能得出结论。

Prompt模板： 
你是一个产品评测专家。请对比以下5款工具：[工具列表]。


对比维度包括：价格、核心功能、适用人群、最大缺点。



输出要求：


  • 输出完整HTML，使用内联CSS，不要引用任何外部资源
    • 

  • 用表格展示对比，"支持"用绿色背景，"不支持"用浅红色背景
    • 

  • 每款工具加一句"一句话裁判词"放在表格下方
    • 

  • 整体风格简洁，使用无衬线字体，最大宽度900px居中
    •
纯文本 vs HTML的差距：

纯文本版本，我需要花3分钟才能得出"哪款最适合我"的结论。HTML版本，15秒。

这不是夸张，是信息密度和视觉引导共同作用的结果。

裁判词：信息对比类任务，HTML是标配，不是加分项。
💡 以上Prompt可在 api.884819.xyz 直接使用

---

场景② 数据报告生成 ⭐⭐⭐⭐

任务：把一段销售数据描述做成可视化摘要

注意：这里不是让模型生成真正的图表（那需要JavaScript库），而是用HTML的视觉元素——进度条、色块、大数字排版——来模拟数据可视化的视觉效果。

效果出乎意料地好。

Prompt模板： 
以下是本月的销售数据摘要：[数据描述]


请生成一份HTML格式的数据报告，要求：


  • 输出完整HTML，使用内联CSS，不要引用任何外部资源
    • 

  • 关键指标用大号数字突出显示（font-size: 2.5em）
    • 

  • 用CSS进度条（div + background-color + width百分比）展示完成率
    • 

  • 超出目标的指标用绿色，未达标的用橙色
    • 

  • 顶部加一个总结句，用灰色背景区分
    • 

  • 整体宽度800px，卡片式布局
    •
踩坑提示：

如果你的数据包含真实百分比，要在Prompt里明确说明，否则模型有时会"合理推断"出一个数字。数据报告的可信度来自准确性，这里不能让模型自由发挥。

裁判词：视觉效果很能打，但数据必须你来提供，模型只负责排版。
💡 以上Prompt可在 api.884819.xyz 直接使用

---

场景③ 阅读笔记整理 ⭐⭐⭐

任务：把一篇长文做成结构化拆解

这个场景，HTML有用，但没有前两个场景那么惊艳。

原因在于：阅读笔记的核心价值是内容本身，而不是视觉呈现。你需要的是理解，不是扫描。HTML能做到的——层级标题、关键词高亮、折叠摘要——Markdown加上一个好的渲染器也能做到。

Prompt模板： 
以下是一篇文章的全文：[文章内容]


请生成结构化阅读笔记，输出完整HTML，使用内联CSS，不要引用任何外部资源。



格式要求：


  • 顶部：3句话核心摘要，浅蓝色背景框
    • 

  • 中间：按原文逻辑分段，每段一个小标题 + 2-3句提炼
    • 

  • 关键术语用  标签高亮
    • 

  • 底部：3个"我的疑问"占位框（浅灰色虚线边框），供手动填写
    • 

  • 字体大小16px，行高1.8，阅读舒适
    •
什么时候值得用：

如果你要把这份笔记分享给别人，或者打印出来，HTML版本明显更专业。如果只是自己看，纯文本或Markdown够了。

裁判词：分享给别人时值，只给自己看时可以省这一步。
💡 以上Prompt可在 api.884819.xyz 直接使用

---

场景④ 日程/Todo管理 ⭐⭐

任务：生成带颜色优先级的任务清单

说实话，这个场景我测完之后有点尴尬。

HTML版本的Todo确实好看——高优先级红色、中优先级橙色、低优先级绿色，整整齐齐。然后我意识到：这个文件我没有办法更新它。

Todo的核心需求是可编辑、可勾选、可持久化。一个静态HTML文件做不到这些。你每次更新任务，都要重新生成一遍，这个成本完全抵消了视觉上的收益。

什么时候还算有用：

如果是一次性的项目计划（比如活动执行清单、会议议程），不需要动态更新，HTML版本可以作为"只读展示版"发给团队。

裁判词：好看，但没用。Notion、飞书、滴答清单随便哪个都比它强。

---

场景评分汇总

| 场景 | 推荐指数 | 核心理由 | 适合人群 | | 信息汇总对比 | ⭐⭐⭐⭐⭐ | 视觉引导直接决策效率 | 所有人 | | 数据报告生成 | ⭐⭐⭐⭐ | 视觉冲击强，需自备数据 | 内容/运营/产品 | | 阅读笔记整理 | ⭐⭐⭐ | 分享时值，自用时可省 | 研究者/写作者 | | 日程/Todo管理 | ⭐⭐ | 静态文件无法更新，鸡肋 | 几乎不推荐 |

---

第四章：什么时候不该用？

HTML输出有明确的不适用边界，不要为了用而用。

以下场景请直接用纯文本： 简单问答：你问"Python怎么读取CSV"，模型给你一个HTML页面，你会想骂人。代码调试、技术解释、概念澄清——这些场景需要的是准确性和可复制性，HTML是噪音。 创意写作：故事、文案、诗歌，线性阅读体验本身就是内容的一部分，视觉装饰只会分散注意力。 需要继续编辑的内容：如果你的输出要粘贴到Word、飞书、邮件，HTML会带来一堆格式垃圾。 判断框架只有一句话：
「如果你的输出需要被扫描而不是被阅读，就用HTML；如果需要被思考而不是被展示，纯文本够了。」

扫描 = 对比、检索、决策

阅读/思考 = 理解、创作、调试

用这个标准过一遍你的任务，5秒钟就能判断要不要用HTML。

---

第五章：进阶玩法 + 判断口诀

如果你已经开始频繁使用HTML输出，可以考虑一个进阶操作：在Prompt里固定你的CSS主题变量。

把你的品牌色、字体偏好、间距风格写成一段CSS模板，每次生成HTML时作为"样式基座"传入：

在所有HTML输出中，使用以下CSS变量：

--primary: #2D5BE3;（主色，用于标题和强调）


--bg: #F8F9FA;（背景色）


--text: #1A1A2E;（正文颜色）


--font: 'PingFang SC', 'Microsoft YaHei', sans-serif;


--radius: 8px;（圆角统一）


所有卡片使用 box-shadow: 0 2px 8px rgba(0,0,0,0.08);

这样你生成的所有HTML页面风格统一，像是同一个产品出来的，而不是每次都随机发挥。

---

最后，给你一个可以随时查的判断口诀： 
要扫描不要阅读 → 上HTML

要思考不要展示 → 纯文本够了


要编辑要更新   → 别用HTML，用真正的工具


要分享要展示   → HTML是最快的"临时网页"

---

这次测试让我意识到一件事：

LLM的输出格式，本身就是一个被严重低估的Prompt变量。我们花了大量时间优化Prompt的措辞和逻辑，却很少认真想过"输出成什么格式，对后续使用影响最大"。

下一篇我想聊聊另一个方向——

不是让模型输出更好看，而是让模型输出「更容易被下一个模型读懂」：结构化输出在多步Agent里到底怎么设计，才能让整条链路不断链？从JSON Schema到函数调用格式，这里面有很多坑我已经踩过了。

如果你对这个方向感兴趣，点个关注，我下周发。

---

🔗 本文所有Prompt模板均可在 [api.884819.xyz](http://api.884819.xyz) 直接运行。注册即送体验token，国产模型（Deepseek R1、通义千问Qwen3等）完全免费，按量付费，没有月租。
本文由8848AI原创，转载请注明出处。关注8848AI，带你从零开始学AI。

#AI教程 #Prompt技巧 #ChatGPT #HTML #LLM #8848AI #人工智能 #效率工具