Effective HTML：给 Coding Agent 用的 HTML 页面工作流
现在让 Codex、Claude Code 这类 Agent 生成网页已经很快：给个需求，几分钟就能产出一份 HTML。但用得多了会发现，"代码出来得快"和"页面做好了"是两回事。
让它做布局，它可能直接堆上渐变、阴影和动画；让它画架构图，容易变成几个方框加箭头；做交互页面，正常状态有了，加载、报错、提交失败这些真实场景的状态，往往还得自己一条条提醒。
Effective HTML 就是为这类问题设计的：一套给 Coding Agent 用的 HTML Skills 集合，装进 Claude、Codex 等工具后，Agent 做页面之前先判断该怎么做，做完之后还会自己检查一遍。项目由 plannotator 开发，MIT 协议开源，GitHub 上已接近 3000 Star。
项目地址：https://github.com/plannotator/effective-html
一、六个 Skill 怎么分工
Effective HTML 一共包含六个 Skill，各管一段：
| Skill | 用途 |
|---|---|
html | 最外层入口：处理宽泛的 HTML 请求（报告、说明页、落地页、工具等），并路由到对应的专业 Skill |
html-wireframe | 低保真线框：先定内容、层级、导航、流程和响应式结构，不上视觉 |
html-prototype | 可操作原型：实现真实状态（加载/报错/成功）、交互、键盘支持、移动端适配 |
html-diagram | 图表与示意图：架构、时序、流程、状态、层级、时间线、系统关系图 |
html-plan | 计划与路线图：roadmap、上线安排、实施序列 |
design-artifact | 视觉方向：针对具体页面给出创作方向，但不强加可复用的"模板风格" |
二、工作流怎么跑
页面结构未定 → 先画线框。 你说"帮我设计一个设备管理后台"，html 不会直接开写 HTML/CSS，而是先走 html-wireframe：左边设备列表、右边运行状态、下面报警和实时数据，全部用灰度、边框和简单区块表达，暂不碰品牌色和阴影。只看结构：菜单放哪、报警和实时数据谁优先、主按钮位置、移动端怎么排。结构不确定时，还可以在一个 HTML 里放几套方案对比。
结构确认 → 再做原型。 html-prototype 把静态页面变成可操作的原型：密码输错给提示、提交时显示加载状态、成功和失败都有反馈，弹窗、键盘操作、手机端适配一起检查。平时用 Agent 做页面，第二轮修改大部分耗在这些细节上——把要求提前写进 Skill，就不用每次都提醒一遍。
画图 → 先选表达形式。 html-diagram 动手前先判断要表达什么关系：服务器、数据库、网关的连接适合拓扑图；一次请求的走向适合时序图；业务流转适合流程图；设备从运行到报警再到恢复适合状态图。确定形式后再用 HTML、CSS、SVG 或 Canvas 实现，避免"框多线多、看完不知道先看哪里"。
视觉 → 有方向但不套模板。 design-artifact 负责创作方向：避免常见的 AI 页面风格（紫蓝渐变、满屏圆角卡片、黑底荧光色、无意义的动画）；项目已有设计规范就沿用，没有就按页面用途决定字体、颜色与布局。目标是"页面和项目相匹配"，而不是换个项目还是同一套模板。
三、安装方法
一次安装全部六个 Skill：
npx skills add plannotator/effective-html
只装某个 Skill（先 --list 查看，再 --skill 指定）：
npx skills add plannotator/effective-html --list
npx skills add plannotator/effective-html --skill html-wireframe
npx skills add plannotator/effective-html --skill html-prototype
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
四、设计理念
项目 README 把思路说得很清楚：把创意自由和可靠性分开。
- 视觉方向来自对话、项目、受众和主题本身，
design-artifact提供的是可复用的设计流程，而不是可复用的外观 - 线框刻意"不完工"，让评审聚焦结构
- 原型只实现一条可信的主流程及其相关状态
- 每个产出物要求响应式、可访问、自包含，并且要在浏览器里实际验证
这套项目也受到 Thariq Shihipar 的 "The unreasonable effectiveness of HTML" 一文的启发——HTML 能把几乎任何东西可视化，而且常常比一大段文字更清楚。
五、适合谁
- 经常用 Codex / Claude Code 生成页面，但反复被"第一版快、后续不停改"困扰的开发者
- 需要给 Agent 产出流程图、架构图、原型，且要求质量稳定的团队
- 想让 AI 产出页面脱离"AI 味"、与项目风格匹配的开发者
如果你已经在用 Agent 写页面，把 Effective HTML 装上试试，它把"做页面的流程"提前定好了，能少走不少弯路。
项目地址：https://github.com/plannotator/effective-html