effective-html：6 个技能让 agent 生成的 HTML 能用、能看、能交付

npx skills add plannotator/effective-html

让 agent 画一个页面，常见两种结果：要么是一张死的单文件截图，改一行就得重跑一次；要么是它自作主张地堆渐变和圆角，页面看着热闹，线框、原型、图表之间的差异却全丢了。公众号「GitHub科技」10 月 14 日重点介绍的 plannotator/effective-html（MIT，截至 2026-10-15 约 3.7k star）把这件事拆成了 6 个可选技能：每个技能对应一种制品形态，从低保真线框到可交互原型，全部输出自包含 HTML，浏览器里直接打开就能看。

它让智能体按什么规则做事

仓库把「审美」与「可靠」拆开：视觉方向来自对话、项目和受众，由 design-artifact 提供可复用的设计流程而不预设统一样式；结构则由专门技能把守。6 个技能各管一段：html 做总路由，接住宽泛请求再分派给专科；html-wireframe 只出低保真版式，专注内容、层级、导航和流，甚至刻意保留「未完成感」让评审只看结构；html-prototype 负责一个可信流程及其实际状态，含键盘支持和响应式行为；html-plan 出计划与 roadmap，要求保留来源里的既定承诺；html-diagram 按被解释的关系选择图模型（架构、时序、状态、层级、时间线）。所有制品上线前都要在浏览器里验证一遍。

具体约束（每个技能自己写）：

• 自包含输出：每个制品都是单文件 HTML；不装东西也能当参考读物用，README 第一段就把这件事声明给读者。
• 线框故意不完成：低保真产物不允许加真实图形，避免评审被视觉细节带偏。
• 原型只讲一个可信流程：聚焦单流程及其实际状态，而不是一个什么都点的演示壳。
• 浏览器里验证：每个 artifacts 的响应式和可访问性都要真实跑过，大多数半吊子 agent 输出都缺这步。
• 总路由先行：宽泛请求先经 html 技能分派，再落到专科技能，而不是拿着锤子看什么都是钉子。

适合谁

想用 agent 交付「能交付」页面的前端、产品和写手：线框评审的原材料、原型的验收件、图表和 roadmap 的演示页，都是 agent 出一件 HTML 就够的场景。两条安装路径都在页面里可复制：npx skills add plannotator/effective-html 一键加入全部 6 个技能，或 --skill html-wireframe 单选；也可以在 Claude Code 的 plugin marketplace 里按仓库安装。诚实提醒：对已有 house style 的团队，design-artifact 的「不预设样式」可能与你的设计系统相斥，装之前想清楚要不要让 KV 和审稿争权。整件事的思路来自 Thariq Shihipar 的名篇《The unreasonable effectiveness of HTML》，仓库的姊妹产品 Plannotator（9.4k star）承接「渲染出来的 HTML 怎么标注、编辑和回灌」这一段。站点此前的 frontend-design 技能 管的是给自己一份设计 taste，effective-html 进一步按制品类型分工——两者可以叠着用。