html-effectiveness 是一个 HTML 示例合集项目（HTML effectiveness examples），收录了 20 个自包含的.html页面：无需安装、无需构建、无任何外部依赖，用浏览器直接打开即可体验。它展示了 AI 助手如何把"一堵 markdown 文字墙"变成真正会被阅读的可交互页面——从代码审查、设计系统、幻灯片，到状态报告和小工具编辑器，全部即开即用。🎯

📦 项目是什么：HTML 作为 AI 输出格式的价值

这个仓库是博客文章《The unreasonable effectiveness of HTML》（HTML 的"不合理"高效性）的配套示例集。核心思路很简单：

• 每个文件都是单页自包含的：HTML + CSS + JS 全部写在一个.html里
• 没有构建步骤：不用npm install，不用打包器
• 没有外部运行时依赖：断网也能完整运行
• 把"被扫一眼"的文档变成"被读完"的页面：diff 变成带批注的可视化、流程变成流程图、方案变成可点击的交互原型

正如 README.md 中所说：

There is nothing to install or build. Clone the repo and openindex.html(or any individual file) in a web browser.

🚀 快速安装步骤：两条命令，5 分钟上手

由于零安装、零构建，"上手"就是 clone + 打开：

git clone https://gitcode.com/gh_mirrors/htm/html-effectiveness

然后直接双击打开 index.html（分类总入口），或者打开任意一个编号文件即可。推荐浏览器：Chrome、Edge、Firefox 等现代浏览器均可，无任何版本门槛。✅

最快体验路线（建议按顺序看 3 个页面）：

1. index.html —— 总览页，卡片式导航 20 个示例，按 9 大场景分类
2. 09-slide-deck.html —— 用方向键翻页的 HTML 幻灯片，感受"无构建步骤的演示文稿"
3. 03-code-review-pr.html —— 带边注、严重度标签的 PR 审查页，看 AI 如何把 diff 变成可视化信息

🗂️ 20 个示例全清单：9 大场景速查表

💡 提示：示例中的产品名（如 Acme）、数据和场景均为虚构，仅用于演示效果，这一点在 README.md 的 "A note on sample data" 一节中有明确说明。

💡 为什么值得看：3 个最有代表性的示例详解

1. 代码审查页：让 diff 变成空间信息

03-code-review-pr.html 把 PR 的 diff 渲染为带 margin notes（边注）、严重度标签和跳转链接的页面。核心洞察是：diff 和调用图本质上是空间信息，markdown 会把它压扁——而 HTML 可以让代码的"形状"一目了然。

2. 幻灯片：一个文件就是一套 PPT

09-slide-deck.html 本质上就是若干<section>标签加约二十行 JS：左右方向键翻页，无 Keynote、无导出步骤，开会时直接投屏就能用。

3. 交互原型：5 秒胜过一段文字

07-prototype-animation.html 提供时长与缓动函数的滑块，让你在接入真实代码前先"调"动画；08-prototype-interaction.html 把 4 个屏幕串成可点击流程——动效和交互无法被"描述"，只能被"感受"。

📐 示例背后的三条设计原则

想借鉴这些示例到自己项目里？记住 CONTRIBUTING.md 中约定的三条底线，这也是项目保持"即开即用"的原因：

1. 单文件自包含：每个示例必须是一个独立.html，无构建、无外部运行时依赖
2. 示例数据必须虚构：不引入真实客户名、真实指标
3. 与总索引保持一致：新增或改名示例时需同步更新 index.html 的卡片结构

❓ 常见问题（FAQ）

Q：需要 Node.js 或任何开发环境吗？A：不需要。零安装、零构建，浏览器能打开文件即可，断网也能运行。

Q：这些页面可以直接嵌入自己的产品吗？A：可以。每个文件都是独立 HTML，样式与脚本内联，拷走即可改造。

Q：想提交新的示例怎么办？A：阅读 CONTRIBUTING.md 中的贡献指南，建议先开 issue 讨论再提交 PR。

Q：发现渲染问题或错别字？A：同样通过 issue 反馈，附上浏览器版本即可；安全相关漏洞请按 SECURITY.md 的流程报告。

🎬 总结：5 分钟开始你的第一次体验

回到最快的上手路径：

1. git clone https://gitcode.com/gh_mirrors/htm/html-effectiveness
2. 打开 index.html，浏览 9 大分类的 20 个卡片
3. 挑一个和你工作最相关的页面（推荐 16-implementation-plan.html 或 11-status-report.html）仔细体验交互细节
4. 把它当作"提示词模板"——下次让 AI 输出交付物时，直接说："按这个页面的结构输出"

这就是 html-effectiveness 的全部魅力：不是教你写 HTML，而是展示HTML 作为 AI 交付格式的天花板——零安装、零构建，打开即用。✨