如果你用 Claude Code、Codex 这类 AI 编程助手，大概率见过它们输出的 HTML——元素挤成一团、没有样式、默认的白底黑字，和 2005 年的网页差不多。
这个问题不是不能解决，但每次都要手写 prompt（"加上暗色模式、居中排版、优雅的字体…"），烦得很。
effective-html 就是来解决这个的。一个开源的 AI 技能集，装上去之后，你的 AI 助手输出任何 HTML 页面都会自动带上精致样式。
effective-html 是什么
一个 SKILL.md 格式的技能合集，专门为 AI 编程助手设计。装到你的 AI 助手里，它输出 HTML 文件时就会自动参照一批精心设计过的页面范本，生成同样风格的作品。
项目地址：github.com/plannotator/effective-html。MIT 协议，2026 年 6 月发布，至今已有 1418 个 Star。
作者是 backnotprop（X/Twitter 同名），他也是 Plannotator（7379 Star，一个 AI 代码审查的可视化工具）的开发者。加上 effective-html，他在 AI 开发工具链上已经有两个不错的开源项目。
3 个技能，各有用处
effective-html 包含 3 个子技能：
1. html——通用 HTML 输出。不管你要什么——报告、解释页、对比图、演示文稿，它都会输出一份风格统一的 HTML 文件。暗色模式是标配，带主题切换按钮和 localStorage 持久化。
2. html-diagram——全屏架构图。专门用来画系统架构、技术栈关系图。核心是一幅高质量 SVG 图，支持拖拽平移、滚轮缩放、节点点击高亮、路径动画。可以说是纯浏览器端的架构图工具。
3. html-plan——计划页面。适合生成项目计划、路线图、技术方案评审页，用可视化方式展示。
3 个技能都基于 Thariq Shihipar 的 html-effectiveness 设计范例，风格统一：暗色背景、紧凑排版、圆角卡片、柔和配色。
怎么装
安装方式取决于你用哪个 AI 编程助手。
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
通用方式（npx skills）：
# 安装全部 3 个技能
npx skills add plannotator/effective-html
# 或者只装某个
npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan
如果你的 AI 助手支持 SKILL.md 格式（Hermes Agent、Claude Code、Codex、OpenCode 等都支持），通用方式就能用。
做了个对比
我自己试了一下。同样是让 Claude Code 画一个微服务架构图——
没用 effective-html：
<!DOCTYPE html>
<html>
<body>
<h1>Microservice Architecture</h1>
<p>API Gateway / Service A / Service B...</p>
</body>
</html>
用了 effective-html：自动生成全屏暗色模式页面，SVG 架构图带节点点击展开详情、拖拽平移、滚轮缩放、路径动画、主题切换按钮。
差距不是一个量级。
槽点也得说
只对 HTML 输出有效。 这是专门针对 HTML 文件的技能。如果你主要让 AI 写代码、改配置、写 Markdown，那这个技能帮不上忙。
依赖 AI 助手的理解能力。 技能的质量取决于 AI 能多好地理解参考范例。小模型或者本地模型的效果会比较差——最好的体验用 Claude 或 GPT-4 级别的模型。
设计风格固定。 暗色风格很好看，但不是所有人都喜欢。如果你想要明色主题、不同配色，需要自己改 SKILL.md 里的参考范例。目前没有一键换主题的功能。
Stable 但还很年轻。 项目才 7 周，Issues 只有 2 个，更新频率不算高。
跟 Plannotator 搭配用
effective-html 的官方配套工具 Plannotator（7379 Star）是一个可视化审查和标注平台。AI 生成的 HTML 页面可以通过 Plannotator 在线预览、在页面上直接画框标注、加评论，标注结果可以一键反馈给 AI 修改。
流程闭环：effective-html 生成漂亮页面 → Plannotator 审查标注 → 反馈 AI 修改。适合团队协作场景。
如果你是个体开发者，直接用 effective-html 就够了。如果是团队协作做 AI 生成内容，Plannotator 值得一试。
一句话总结
如果你用 AI 编程助手做 HTML 输出——架构图、演示页、报告、计划书——装上 effective-html，输出质量能从「能用」提升到「能直接发」。
安装只要一行命令，不亏。
GitHub：github.com/plannotator/effective-html
npm：@pde201/effective-html
标签：#effective-html #AI编程助手 #ClaudeCode #Codex #SKILLmd #HTML #AI技能 #Plannotator
关注我，每期分享一个帮你省事的 AI 工具 🛠️
你的 AI 编程助手也输出丑 HTML 吗？评论区聊聊 👇