先画线框再做交互：Effective HTML六件套让Coding Agent按页面类型分步生成HTML

现在让 Codex 做网页已经很快了，给个需求几分钟就能生成一份 HTML。但用多了就会发现，代码出来得快不等于页面就做好了：你只是想先看看布局，它已经开始加渐变、阴影和动画；让它画架构图，又容易变成几个方框加箭头；做交互页面，正常状态有了，加载、报错、提交失败这些真正会用到的状态还得自己一条条提醒。

GitHub 上的 Effective HTML 正好管这些事，项目已接近 3000 Star。简单说，它就是一套给 Coding Agent 用的 HTML Skills，装进 Claude、Codex 这类工具后，做页面之前先判断该怎么做，完成之后还要自己检查一遍。

先不要急着写页面

它一共有六个 Skill。最外层的 html 用来做任务判断：你说"帮我设计一个设备管理后台"，它不会拿到这句话就直接堆 HTML 和 CSS。页面结构还没确定，就先用 html-wireframe；已有明确结构、要做可点击操作的页面，交给 html-prototype；要展示系统架构、业务流程或调用关系，用 html-diagram。另外还有 html-plan 负责计划，design-artifact 负责视觉。拆开以后，Agent 每一步要做到什么程度就很清楚了。

平时说一句"做后台"，最怕它把整个页面都做完，等发现左边菜单放错、信息层级不对，后面的样式交互全得跟着改。先拦住这一步，能省很多事。

页面没定，先画线框

html-wireframe 做的事就是先把骨架搭起来。比如设备管理后台，左边设备列表、右边运行状态、下面报警和实时数据，这时它不会急着做漂亮造型，主要就是灰度、边框和简单区块，品牌色、阴影、渐变先放一放。现在只看结构：设备列表放左边还是顶部，报警和实时数据谁更重要，主要按钮放哪顺手，手机上又该怎么排。结构不确定可以同时做几套方案放在一个 HTML 里比较。骨架定下来之后，换主题、调样式就容易多了。

接着把页面做活

线框没问题后进入 html-prototype，把静态页面变成可操作的原型。比如登录页，密码输错要给提示，提交要显示加载状态，成功失败都要有反馈；弹窗、键盘操作、手机端适配这些细节也会一并检查。平时用 Agent 做页面，第二轮修改往往都耗在这些地方，Effective HTML 把要求提前写进 Skill，就不用每次再提醒一遍。

画图也不能上来就堆方框

html-diagram 开始画之前，会先看这张图要讲什么：服务器、数据库、网关之间怎么连接，按拓扑关系画；一次请求先到哪再过哪个服务，适合时序图；业务一步一步往下走，用流程图；重点是状态流转，就用状态图。确定形式后再用 HTML、CSS、SVG 或 Canvas 实现。不需要画得复杂，把关系说明白就行。

AI 常见页面风格它也管

design-artifact 负责视觉部分，会告诉 Agent 不要用常见的 AI 风格：紫蓝渐变、满屏圆角卡片、黑底荧光色、各种不需要的动画。项目已有设计规范就沿用，没有就按页面用途定字体、颜色和布局，页面不追求惊艳，但要和项目本身匹配。

安装方法

一次装齐六个技能，直接运行：

npx skills add plannotator/effective-html

主要做交互页面的话，可以只装 html-prototype：

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

Codex 用户走插件安装：

codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html

装好之后就能让 Agent 按这些规则写页面了。Effective HTML 把做页面的流程提前定好，用 Agent 写页面能少走很多弯路，经常用 Codex 写页面的话值得装一下试试。

项目地址：https://github.com/plannotator/effective-html