你是否曾为画一张清晰的系统架构图、项目执行计划或技术方案示意图而反复打开绘图软件、调整配色、导出 SVG，最后还担心兼容性？effective-html 是一个专为 AI 代理（Agent）设计的「可视化技能包」，它不依赖复杂框架，仅用纯 HTML + 内联 SVG 就能一键生成自包含、高颜值、开箱即用的网页级图表与计划页——无需服务器、不联网渲染、复制粘贴就能分享。
核心功能
- 智能 HTML 计划页生成：输入文字描述（如“Q4 产品上线三阶段：需求评审→开发联调→灰度发布”），自动输出结构清晰、响应式排版、带时间轴与状态标记的 HTML 计划页
- 全屏交互式架构图：支持生成系统拓扑、技术栈分层、微服务通信等场景的 SVG 图表，支持悬停标注、颜色语义化（如红色=关键路径，蓝色=外部依赖）
- 零依赖自包含交付物：所有资源（样式、脚本、图标）全部内联在单个 .html 文件中，双击即可在任意浏览器打开，适合邮件附件、文档嵌入或快速演示
- 轻量模型友好设计：专为中小规模语言模型（如 Claude-3.5-Sonnet、Qwen2.5）优化，提示词简洁、输出结构稳定，避免大模型“自由发挥”导致渲染失败
- 模块化按需安装：支持单独安装
html-diagram（专注图表）、html-plan（专注计划）、html（通用模板）等子技能，不冗余加载 - 与 Plannotator 深度协同：可搭配同作者的 Plannotator 工具，在生成的 HTML 上叠加手写批注、箭头标注与高亮圈选，实现“AI 制图 + 人工精修”闭环
适合哪些人用
这款工具特别适合技术型知识工作者：一线工程师需要快速向产品/客户展示系统设计时；技术经理做项目复盘或OKR拆解时；开源作者撰写 README 中的架构说明时；甚至教师制作编程课教学图解时——只要你需要“把脑子里的结构，30 秒变成别人一眼看懂的网页图”，它就是你的轻量级可视化加速器。它不替代 Figma 或 Mermaid，而是填补了「从想法到第一个可分享视觉稿」之间最耗时的空白。
快速上手
无需本地开发环境，两条命令即刻启用：
✅ 先查看可用技能：npx skills add plannotator/effective-html --list
✅ 安装你最常用的技能（例如只装架构图）：npx skills add plannotator/effective-html --skill html-diagram
✅ 在支持插件的 AI 编程环境（如 Claude Code）中，直接搜索 “effective-html” 插件并一键安装，之后在对话中说“帮我画一个三层微服务架构图”，即可获得可运行 HTML 文件。
💡 小技巧：生成的 HTML 文件右键 → “另存为” 即可永久保存；用 VS Code 打开后还能手动微调文字或颜色——它天生就是为你二次编辑而生的。
项目信息
Agent skill for elegant and simple html plans, architecture diagrams, or whatever else you can think of.
718
Stars
45
Forks
HTML
MIT
编程语言：HTML（纯前端，无构建依赖）｜Star 数：718｜开源协议：MIT｜GitHub 项目地址
这是一款真正把“少即是多”刻进基因的开源工具：没有 npm install、没有 webpack、没有 CSS-in-JS——只有优雅的语义化标签、精准的 SVG 路径和让人会心一笑的留白设计。
