1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | effective-html |
| 作者/维护者 | plannotator（GitHub 组织，核心贡献者 backnotprop） |
| 来源链接 | https://github.com/plannotator/effective-html |
| 许可证 | MIT（数据来自 GitHub API） |
| GitHub Stars | 1,396（数据来自 GitHub API） |
| Forks | 108（数据来自 GitHub API） |
| 最新版本 | 未发布正式 Release，以最近一次提交为准（2026-07-08） |
| 安装方式 | npx skills add plannotator/effective-html，或 Claude Code / Codex 插件市场 |
2. 功能介绍与亮点
核心能力是把一句话描述转成自包含（单文件）HTML 视觉产物，覆盖三种典型形态——通用说明/报告类（html）、全屏架构与技术栈图解（html-diagram）、简洁排版的计划页（html-plan）。三者共享同一套「有效 HTML」风格参考库（references/html-effectiveness/），本质是同一套视觉方法论的三种输出模式，而非互不相关的功能堆砌。
亮点集中在容易被忽略的交互细节上，SKILL.md 把这些细节固化成规则：
- 深色模式：手写 CSS 变量 + 主题切换按钮 +
localStorage记忆 + 首屏无闪烁脚本。 - 可缩放画布：SVG 架构图支持拖拽平移与光标锚点缩放，并设置拖拽阈值避免误触发点击。
- 悬浮面板可控：任何覆盖在图上的详情卡片都必须可关闭、可重新打开，避免挡住内容却关不掉。
实现上是纯提示词与参考资料型技能——仓库内没有可执行脚本，Agent 读取 SKILL.md 与参考范例后直接产出静态 HTML/SVG 文件，不依赖额外服务。仓库同时是 Claude Code 与 Codex 插件市场的清单来源，也被第三方跨 Agent 安装器 skills.sh 收录分组。
3. 适用场景
所属分类：前端与设计。适合需要快速把架构设想、项目计划、技术说明变成一份可直接打开、可分享的可视化网页的开发者与技术团队——例如向团队讲清系统架构、给评审材料配一张可交互的技术栈图，或把零散的计划要点整理成一页排版干净的计划文档，而不必打开设计工具或手写 CSS。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——仓库自带
.claude-plugin插件市场清单，可通过/plugin marketplace add与/plugin install直接安装。 - Codex：✅ 原生支持——仓库同时提供
.codex-plugin/plugin.json，README 给出codex plugin marketplace add的等价安装步骤。 - OpenClaw：❓ 未验证——抓取到的材料未提及 OpenClaw 相关适配；SKILL.md 遵循通用 Agent Skills 规范，理论上可安装，但缺乏该仓库自身的直接证据。
- Hermes Agent：❓ 未验证——抓取材料中未见相关信息。
判断依据：仓库内 .claude-plugin、.codex-plugin 清单文件与 README 安装章节。
5. 推荐理由
它把「生成好看的自包含 HTML」这件事从每次现场即兴发挥，变成照一套打磨过的规则走：深色模式、可缩放画布、可关闭面板这些细节不再需要每次单独交代，直接内置进指令里。对经常需要用 Agent 产出架构图、计划页、说明页的用户来说，能省去反复调教提示词的过程，产物观感也更稳定统一。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | GitHub 1,396 Stars、108 Forks（数据来自 GitHub API），落在 1k–5k 区间，且已被第三方技能目录收录展示 |
| 可用性 | 9 | 一条 npx 命令或插件市场即可安装，SKILL.md 与参考范例完整，近两周内仍有提交，无付费依赖 |
| 安全性 | 9 | 纯提示词与参考文档，仓库内无可执行脚本、无网络外发、无需凭据，MIT 许可证明确，近期维护活跃 |
安全检查清单：① 无 shell 命令执行；② 不联网外发数据；③ 不要求 API key/凭据；④ SKILL.md 与参考文件中未发现可疑指令；⑤ 维护者主页与项目官网信息公开、无造假迹象；⑥ MIT 许可证明确；⑦ 最近一次提交为 2026-07-08，维护活跃。
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 与 effective-html 的差异 |
|---|---|---|
| HTML Anything（nexu-io） | 本地运行的「agentic HTML 编辑器」，驱动本机已登录的编码 agent，套用 75 个模板产出周报、海报、社媒卡片等 9 类可发布内容 | 面向内容运营/设计师的广谱模板生成工具，需本地起服务、持续编辑；effective-html 只做三种固定形态的一次性静态产物，安装即用，不追求持续编辑 |
| Prototype_To_Figma_Skill（alima-max） | 把 Claude Code 搭建的可运行原型转成带设计系统组件的 Figma 文件，供团队异步评审 | 交付物是 Figma 设计稿，服务于产品设计评审流程；effective-html 交付物是可独立打开的 HTML 文件，服务于架构说明与计划呈现，不涉及设计软件对接 |
8. 用户评价
该技能已被第三方 Agent 技能目录 agentskill.work 收录并展示 Stars/Forks 等基础信息，但页面未见任何具名用户评论或评分留言；Hacker News 上关于作者同系列产品 Plannotator（配套可视化标注工具）的讨论帖也未具体提及本技能。目前在第三方平台尚无可验证的具名用户评价。
9. 其他补充
版本迭代通过 Git 提交记录呈现，未采用正式 Release 标签；仓库同时被收录进跨 Agent 技能安装器 skills.sh 的分组索引，方便在同一入口发现风格相近的其他 HTML 类技能。
10. 安装使用方式
- 通用安装器：
npx skills add plannotator/effective-html（先执行--list查看可选技能，或用--skill html-diagram只装其中一个） - Claude Code 插件市场：
/plugin marketplace add plannotator/effective-html后/plugin install plannotator-effective-html@effective-html - Codex 插件市场：
codex plugin marketplace add plannotator/effective-html后codex plugin add plannotator-effective-html@effective-html - 手动安装：克隆仓库，把
skills/<html|html-diagram|html-plan>/目录复制到对应 Agent 的 skills 目录
安装后注意：三个子技能均设置 disable-model-invocation: true，不会被模型自动判断调用，需要在对话中显式提及技能名（如「用 html-diagram 生成一张架构图」）才会触发。
11. 注意事项
- OpenClaw、Hermes Agent 的兼容性尚未获得验证。
- 产物是纯前端静态 HTML/SVG 文件，仓库本身不提供校对或渲染检查工具，建议生成后在浏览器中打开确认效果。
- 三个子技能共享同一份风格参考资料，若只需要其中一种输出形态，可用
--skill参数单独安装以减少体积。