夜雨聆风AI 大神卡帕西转发了一篇文章，标题很直接：「HTML 出奇的有效」。
文章作者是 Anthropic 的 Claude Code 工程师 Thariq。他说自己已经几乎不再写 Markdown 了，所有需要输出内容的场景，全部交给 Claude Code 直接生成 HTML。
他还做了一个示例站点，放了 20 个纯 HTML 文件，涵盖代码审查、设计、数据报告、交互原型、幻灯片演示等 9 大类场景。
这篇文章发了之后直接爆了：1.5 万个赞，1100 多万浏览量。
卡帕西在转发时说了一句话：
你在跟 AI 对话结束的时候加一句「structure your response as HTML」，然后用浏览器打开那个文件，效果可能会出乎你的想象。
我试了一下，确实很香。
但我也发现一个问题：很多人不知道具体该怎么写 Prompt，也不知道生成的 HTML 怎么分享出去。
这篇文章，我就直接给你5 个场景的 Prompt 模板，你复制就能用。顺便教你怎么把 HTML 文件变成在线链接，发给别人就能看。
Markdown 和 HTML，到底啥关系？
先说结论：Markdown 是草稿纸，HTML 是 PPT。
两者分工不同，没有谁取代谁。
Markdown 是用来跟 AI 一起思考的。
- 语法简单，人类能写，AI 能懂
- 适合快速记录想法、梳理逻辑
- 编辑方便，改内容像写字一样自然
HTML 是用来把思考包装成成品的。
- 有布局、有配色、有交互
- 适合演示、分享、传播
- 阅读体验好，信息密度高
典型工作流：
1. 用 Markdown 跟 AI 讨论 3 小时，把内容打磨清楚
2. 用 5 分钟让 AI 生成 HTML，直接出成品
真正值钱的是那 3 小时的思考，不是那 5 分钟的排版。
5 个场景的 Prompt 模板（直接复制）
下面是 5 个我常用的场景，每个都附带 Prompt 模板。你只需要把内容替换成你自己的，就能生成精美的 HTML 页面。
模板 1：项目计划汇报
场景： 老板让你做个项目计划，用 HTML 交差，比 PPT 还快。
Prompt：
请帮我把以下内容整理成一个 HTML 页面，用于向管理层汇报项目计划。
要求：
- 左侧固定目录，右侧滚动内容
- 用卡片布局展示每个阶段的目标和交付物
- 关键风险用红色标注，里程碑用绿色标注
- 顶部加一个项目概览卡片（时间、预算、负责人）
- 配色专业简洁，适合正式汇报
- 响应式设计，手机也能看
内容如下：
[在这里粘贴你的项目计划 Markdown]
效果： 一个带目录、卡片布局、风险标注的专业汇报页面，浏览器打开就能演示。
模板 2：数据报告可视化
场景： 月度数据报告，用 HTML 做成交互式看板。
Prompt：
请帮我把以下数据整理成一个 HTML 数据报告页面。
要求：
- 顶部用大数字卡片展示核心指标（营收、用户数、增长率）
- 中间用表格展示详细数据，支持按列排序
- 底部用图表展示趋势（可以用 Chart.js 或 SVG）
- 关键数据用颜色标注（增长用绿色，下降用红色）
- 加一个"下载 CSV"按钮，方便导出原始数据
- 配色参考 Excel 风格，专业清晰
数据如下：
[在这里粘贴你的数据]
效果： 一个带交互表格、趋势图表、数据导出的专业报告页面。
模板 3：代码审查报告
场景： 给团队做代码审查，用 HTML 展示问题和改进建议。
Prompt：
请帮我把以下代码审查意见整理成一个 HTML 页面。
要求：
- 左侧是文件列表，点击文件在右侧显示审查意见
- 每个问题用卡片展示，包含：问题描述、严重程度、建议修改、代码示例
- 严重程度用颜色区分（严重=红色，警告=黄色，建议=蓝色）
- 加一个"复制修改建议"按钮，方便开发者直接使用
- 顶部展示审查概览（文件数、问题数、严重问题占比）
- 配色参考 GitHub 风格
审查意见如下：
[在这里粘贴你的审查意见]
效果： 一个带文件导航、问题分类、一键复制的专业代码审查页面。
模板 4：个人作品集
场景： 求职或接单，用 HTML 做个人的作品集网站。
Prompt：
请帮我把以下作品整理成一个 HTML 作品集页面。
要求：
- 顶部是个人简介（头像、姓名、技能标签、联系方式）
- 中间是作品网格，每个作品用卡片展示（封面图、标题、简介、链接）
- 底部是时间线，展示工作经历和教育背景
- 加一个"联系我"按钮，点击弹出邮件或微信二维码
- 支持深色模式切换
- 配色现代简洁，参考 Behance 风格
作品内容如下：
[在这里粘贴你的作品列表]
效果： 一个专业的个人作品集网站，可以直接发给 HR 或客户。
模板 5：培训课件/幻灯片
场景： 给团队做培训，用 HTML 做成可交互的课件。
Prompt：
请帮我把以下培训内容整理成一个 HTML 幻灯片页面。
要求：
- 每一页是一个独立的"幻灯片"，用左右箭头切换
- 每页包含标题、要点列表、配图（可以用 SVG 或占位图）
- 关键概念用高亮框展示
- 底部加进度条，显示当前页码/总页码
- 支持键盘左右键切换
- 配色参考 PPT 模板，适合投影演示
培训内容如下：
[在这里粘贴你的培训内容]
效果： 一个可交互的幻灯片页面，浏览器打开就能讲课，还能在线分享。
HTML 做好了，怎么分享出去？
很多人卡在这一步：HTML 文件做好了，但怎么给别人看？
方法 1：直接发文件
- 把 HTML 文件发给对方，让对方用浏览器打开
- 优点：最简单
- 缺点：对方需要下载文件，体验一般
方法 2：用免费托管服务（推荐）
- 把 HTML 文件上传到 Vercel、GitHub Pages、Netlify 等平台
- 会自动生成一个在线链接，别人点开就能看
- 优点：体验好，链接可以长期有效
- 缺点：需要注册账号（但都是免费的）
方法 3：让 AI 帮你操作
如果你不懂怎么上传，可以直接把这句话发给 AI：
帮我把这个 HTML 文件部署到 Vercel，生成一个在线链接。请一步步指导我操作，包括注册账号、上传文件、获取链接。
AI 会给你详细的操作指南，甚至可以直接帮你写命令行脚本。
门槛真的已经低到不能再低了。
进阶玩法：让 HTML 可交互
HTML 比 Markdown 强的地方，是它可以做交互。
下面是几个简单的交互想法，你可以让 AI 帮你实现：
1. 折叠/展开内容
- 适合长文档，读者可以点击展开感兴趣的部分
- Prompt：「给每个章节加一个折叠按钮，默认只展示标题」
2. 深色模式切换
- 加一个开关，让读者自己选浅色或深色主题
- Prompt：「加一个深色模式切换按钮，用 localStorage 记住用户选择」
3. 数据筛选/排序
- 适合数据报告，读者可以自己筛选想看的内容
- Prompt：「给表格加筛选和排序功能，用户可以按日期、金额、状态筛选」
4. 表单提交
- 适合收集反馈，读者可以在页面里直接提交意见
- Prompt：「加一个反馈表单，提交后把数据发送到我的邮箱」
这些交互用 Markdown 完全做不到，但 HTML 只需要几行 JavaScript 就能实现。
写在最后
回到卡帕西那条帖子。
他说 AI 交互的演进是这样的：
纯文本 → Markdown → HTML → 交互式神经网络视频
方向已经很清晰了：输出端在进化，输入端也在进化。
现在我们跟 AI 交互主要靠打字和说话，但未来可能是「指向屏幕说改这里」，就像跟同事协作一样。
但不管交互方式怎么变，有一件事不会变：
AI 可以帮你把想法做成 HTML，但它没办法替你拥有想法。
那 3 小时的思考，永远是你自己的。
你用 HTML 做过什么有趣的东西？ 留言告诉我你的玩法，也说说你遇到了什么坑。
关注我，下期分享「如何用 AI 生成一个完整的个人网站」。
