Appearance
HTML 在 AI 时代真正有意思的玩法，不是用来写文档，而是用来做一些以前你想都没想过的事情。
背景：Markdown vs HTML
| 格式 | 优势 | 劣势 |
|---|---|---|
| Markdown | 噪音少、人类看得懂、模型生成修改顺手 | 不能可视化 |
| HTML | 可以排版、样式、布局、视觉舒服 | 费 Token、渲染时间长 |
结论：Markdown 是新时代的 Word，HTML 是新时代的 PPT。
但 Anthropic 工程师发现了一些场景，HTML 的优势远超 Markdown。
5个高价值Use Case
#01 让HTML渲染方案
场景：让 AI 出设计方案
| 传统方式 | HTML 方式 |
|---|---|
| Markdown 列出方案 A、B、C | 生成一个 HTML，6种方案并排展示 |
| 脑子里拼不出画面 | 实际看到 UI，可并排比较 |
提示词：
我不确定 XX 该怎么设计。生成 6 种截然不同的方法，
在布局、语调和密度上都要有差异，作为单个 HTML 文件
以网格形式布局，让我可以并排比较。每个方法都标明它做出的取舍。核心价值：把 HTML 当成可视化思考画布，让 AI 把所有可能性展示在面前。
#02 PR 解释器
场景：代码审查
| 传统方式 | HTML 方式 |
|---|---|
| 看代码 diff | HTML 渲染代码 diff，带语法高亮 |
| 逐行分析 | 可交互、有点击展开 |
提示词：
Review 这段 PR，用 HTML 渲染代码 diff，
用绿色标注新增、红色标注删除，
并在每个改动旁边添加解释性注释。核心价值：把枯燥的 diff 变成可交互的代码审查工具。
#03 HTML 选择器（带滑块的调试器）
场景：参数调试
| 传统方式 | HTML 方式 |
|---|---|
| 不断问 AI 修改参数 | 一次生成带滑块的 HTML |
| 每次都要重新生成 | 拖动滑块实时调整 |
提示词：
为一个电商页面生成 HTML，要求：
- 价格显示区（带滑块调整折扣）
- 库存显示（带滑块调整数量）
- 实时计算总价
- 用滑块交互，不用来回问 AI核心价值：让 AI 生成"可交互的调试工具"，而不是静态文档。
#04 内容展示（HTML 报告）
场景：生成分析报告
| 传统方式 | HTML 方式 |
|---|---|
| Markdown 报告 | 包含图表、表格、图标的 HTML 报告 |
| 静态展示 | 可视化、可交互 |
提示词：
分析这份销售数据，生成一个 HTML 报告：
- 每月趋势图（用 Chart.js）
- 关键指标表格
- 同比环比数据
- 结论摘要核心价值：把数据变成"可看可交互"的报告资产。
#05 一次性操作工具
场景：临时编辑器
| 传统方式 | HTML 方式 |
|---|---|
| 在 AI 里问一句改一句 | 一次生成完整 HTML 编辑器 |
| 无法预览 | 所见即所得 |
提示词：
生成一个待办事项 HTML 应用：
- 输入框添加任务
- 点击完成任务
- 可删除
- 数据保存在 localStorage核心价值：AI 生成"可用的临时工具"，而不是建议。
场景速查表
| 场景 | 推荐用 HTML | 原因 |
|---|---|---|
| 方案比较 | ✅ | 可视化、并行展示 |
| 代码审查 | ✅ | 带解释的 diff |
| 参数调试 | ✅ | 滑块交互 |
| 数据报告 | ✅ | 图表可视化 |
| 快速原型 | ✅ | 所见即所得 |
| 简单问答 | ❌ | Markdown 足够 |
| 纯文字内容 | ❌ | Markdown 更简洁 |
核心价值总结
┌─────────────────────────────────────────────────────────┐
│ HTML 在 AI 时代的真正价值 │
├─────────────────────────────────────────────────────────┤
│ │
│ 不是"更好的 Markdown" │
│ 而是"可交互的可视化画布" │
│ │
│ 1. 把可能性展示出来（方案渲染） │
│ 2. 把枯燥的东西变活（代码 diff） │
│ 3. 把来回问变成一次搞定（调试器） │
│ 4. 把静态报告变活（可交互报告） │
│ 5. 把建议变成可用工具（临时编辑器） │
│ │
└─────────────────────────────────────────────────────────┘提示词模板
模板1：方案对比
生成 N 种不同的 [设计方案]，
每个都要有 [关键差异点]，
作为单个 HTML 文件以网格形式布局，
让我可以并排比较。模板2：交互调试
生成一个带 [滑块/按钮/输入框] 的 HTML，
让我可以实时调整 [参数]，
实时看到结果。模板3：数据报告
分析 [数据/文件]，生成 HTML 报告：
- [图表类型]
- [关键指标]
- [结论摘要]模板4：临时工具
生成一个 [功能] HTML 应用：
- [功能1]
- [功能2]
- [数据持久化方式]一句话总结
HTML 在 AI 时代的价值 = 所见即所得 + 可交互 + 可视化。
适用场景：方案比较、代码审查、参数调试、数据报告、临时工具。
不适场景：简单问答、纯文字内容、Token 敏感场景。
