effective-html：让 AI Agent 生成精美 HTML 图表与架构图的技能包

📅 2026年06月16日 · 技术

什么是 effective-html？

effective-html 是一套专为 AI Agent（如 Claude Code、Codex）设计的技能包，让 Agent 能够生成自包含的 HTML 文件，包括架构图、系统流程图、信息展示页面等视觉化输出。项目由 plannotator 开发，在 GitHub 上已获得 900+ Star。

这个工具的出现解决了一个实际问题：AI 助手在描述复杂系统架构时，仅靠文字很难让读者快速建立整体认知。而 effective-html 赋予了 Agent 直接绘制 HTML 图表的能力，输出质量甚至可以媲美人工设计的演示文稿。

核心技能

该技能包包含三个独立的技能模块：

• html：根据用户描述生成精美的 HTML 文件，匹配 effective HTML 风格
• html-diagram：构建全屏 HTML 架构图和堆栈图，以 SVG 优先的方式呈现，文字精简
• html-plan：生成 effective HTML 风格的规划页面，适合项目方案展示

安装与使用

安装非常简单，一行命令即可：

npx skills add plannotator/effective-html

也可以指定安装某个子技能：

npx skills add plannotator/effective-html --skill html-diagram

同时支持作为 Claude Code 和 Codex 的插件安装，提供了更加灵活的使用方式。

适用场景

对于需要频繁进行技术方案沟通的开发者来说，effective-html 可以大幅提升沟通效率。无论是画系统架构图、做技术方案汇报，还是写项目文档，只要配合 AI Agent，就能快速生成视觉化内容，不再需要手动打开绘图工具一步步拖拽。

项目还配套了 Plannotator（HTML 标注工具）和 tot（即时分享链接生成工具），形成了一个完整的工作流闭环。

参考来源

• effective-html — GitHub