plannotator/effective-html Skill：让 AI 输出从 Markdown 升级为可交互 HTML 的技能包

Skill超级捕获手 技术创作者 2026-08-25 16 阅读

总结

plannotator/effective-html 是一套让 AI Agent 把交付物从「Markdown 文本」升级为「可交互 HTML 页面」的技能包。本质是一组 SKILL.md 规则文件，告诉 AI 生成代码审查报告、架构图、项目计划时要输出自包含 HTML——浏览器直接打开，带深色模式、SVG 图形、折叠交互。目前累计约 1,600 Star、近 6,000 次安装，8 月 25 日单日增长 +3,961 星，正处于快速上升期。

功能与原则

核心能力：将 AI Agent 的输出从线性 Markdown 转为空间化 HTML 交付物。内置三种技能：html-diagram（架构图）、html-plan（项目计划页）、html（通用 HTML 生成），覆盖 Agent 最常见的三类输出场景。设计原则是「零依赖」——生成的是一个 .html 文件，双击即用，无需构建、无需框架。

认可度

GitHub Star 数约 1,581（截至 2026-08-25），单日新增 +3,961（当日热门项目增速前列）。技能集合累计安装量约 5,800 次，分布在 html-diagram（2.1K）、html-plan（1.9K）、html（1.8K）三个子技能。项目于 2026 年 6 月中旬上线，7 月持续更新，8 月进入周榜快速增长通道。

链接

GitHub：https://github.com/plannotator/effective-html

原作者

plannotator 团队（@plannotator），专注 AI 原生工具链开发，项目主页 plannotator.ai，同时维护 Claude Skills Hub 技能导航站。

介绍

传统的 AI Agent 输出是什么格式？Markdown。代码审查报告是一段文字，项目计划是一串列表，架构图是文字描述——线性、静态、无交互。Effective HTML 重新定义了这个交付标准：Agent 生成的不是文本，而是一个 .html 文件，双击浏览器打开，报告有深色模式、方案可以并排对比、架构图是交互式 SVG、计划页带折叠和标注。

它的实现方式不是让 AI 生成 HTML 代码，而是给 AI 一套「HTML 产出规范」——SKILL.md 里写了排版规则（CSS 变量体系）、图形规范（SVG 画法）、交互要求（暗色模式、数据属性驱动），AI 按规则生成后，产出物天然具备专业感。更重要的是，这个规范是可移植的：同一套规则，在 Claude Code、Codex、Cursor 里都能用。

特点

  • 零构建交付：生成的 HTML 文件双击即用，不依赖 npm、React 或任何运行时
  • 深色模式内置：基于 CSS 变量 + localStorage，SKILL.md 里写死了 toggle 按钮和媒体查询自动适配逻辑
  • SVG 架构图：html-diagram 技能要求输出自包含 SVG，不依赖外部图片
  • 多方案并排：支持把多个方案/选项并排展示，鼠标悬停显示详情，而非线性罗列
  • 跨 Agent 通用：基于 SKILL.md 标准，一套规则适用于 Claude Code、Codex、Cursor 等所有兼容工具
  • 自含示例：每个技能目录内置 references/ 文件夹，AI 生成前会先读取参考样式，确保输出风格一致

使用方法

安装（以 Claude Code 为例）：

npx -y skills add plannotator/effective-html --agent claude-code

指定单个技能安装：

# 只装架构图技能
npx skills add plannotator/effective-html --skill html-diagram --agent claude-code

# 只装计划页技能
npx skills add plannotator/effective-html --skill html-plan --agent claude-code

# 只装通用 HTML 技能
npx skills add plannotator/effective-html --skill html --agent claude-code

手动使用：也可以直接复制仓库里任意 SKILL.md 文件内容粘贴到对话中，AI 自动读取并遵守规则，无需任何配置。

使用场景与人群

适用场景：需要 AI 生成「可交付」而非「可阅读」内容的场景——代码审查报告（PR 对比、方案选型）、系统架构图（SVG 可交互）、技术方案文档（多模块并排展示）、项目计划页（带时间线和里程碑）。目标用户：AI 应用开发者、产品经理、需要在团队内外分享 AI 生成内容的技术人员，以及想让 AI 输出物直接当交付物使用而不是再手动整理的人。

输入与输出案例

案例 1：代码审查报告

输入：让 Claude Code review PR #42 并用 Effective HTML 输出

AI 生成：自包含 .html 文件，包含「修改摘要」「问题列表」「方案对比」三个区块。方案对比区内三个方案并排，悬停显示详情，底部带深色模式切换按钮。

案例 2：系统架构图

输入：描述系统架构，让 AI 用 html-diagram 输出

AI 生成：一个 .html 文件，内嵌 SVG 架构图，节点带颜色标注，连线标注数据流向，右上角有「深色模式」切换按钮，浏览器打开即用，无需截图或 PDF 转换。

GitHub: https://github.com/plannotator/effective-html

评论区

0 条评论

登录后可评论。

Skill超级捕获手 16 阅读