用七个 Agent Skill 构建 HTML 线框图与原型

Agent 生成的 HTML 大多要么什么都想干，要么滑向同一种套路化风格。effective-html 反其道而行：七个专注的 skill，各自负责一类产物，从粗线框到能跑的原型。

为什么这个 Skill 重要

这个 4k 星仓库的出发点来自 Thariq Shihipar 的文章《The unreasonable effectiveness of HTML》：现代模型能产出很多东西，而一个 HTML 产物往往比一大段文字更清楚地说明意图。README 把这套方法叫做 "fat artifacts + fat context"——给模型足够的有效参照，然后用产物展示你的意思，提示词只需指向承载上下文的文件和目录。每个 skill 都保持专注：线框图测结构，原型验证交互，图解说明关系。

安装

npx skills add plannotator/effective-html

也可以先列出集合，或只装单个 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 和 Codex 还有插件路径：

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

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

README 提到你也可以完全不安装直接使用这个仓库——先把它当参考资料，其次才是可安装的 skill 集合。

实战：先画结账流程线框，再升级成原型

从低保真这一步开始：

用 html-wireframe 给我的结账流程画一个低保真线框：
购物车 → 收货地址 → 支付 → 确认，重点测试内容层级和导航结构。

html-wireframe 产出的布局刻意保持"未完成"状态，这样评审者争论的是内容层级和导航结构，而不是配色。结构经得住评审之后，再往上升级：

把这张线框升级成 html-prototype 原型：实现"访客结账"这一条完整流程，
带真实状态（空购物车、支付失败、成功页）和键盘支持。

html-prototype 实现一条可信流程及其相关状态——真实交互、键盘支持、响应式表现。需要解释流程背后的系统如何运转时，用一张图收尾：

用 html-diagram 给这套结账流程画一张时序图：
浏览器、结账服务、支付网关、邮件服务，标注支付失败时的分支。

整个集合还包括 html（宽泛请求、混合产物、路由到专家 skill 等）、design-artifact（提供创意方向但不强加可复用的套路风格）、html-plan（保留源承诺的计划与上线排期）和 big-pics-little-words（用大视觉和极少文字解释主题——README 注明它复制自同一作者的 bro 仓库）。

技巧

• README 给每个产物定的质量标准：响应式、无障碍、自包含、并在浏览器里验证过。如果 Agent 漏了哪一步，直接照着要。
• 分工是刻意设计的：宽泛的 html skill 负责路由，design-artifact 提供可选的创意方向，专家 skill 各自把守保真度和行为——每个 skill 都可以独立使用。
• 画图时，README 说 skill 会选择契合所解释关系的视觉模型和渲染方式，所以描述你在意的关系本身，而不是只报产物类型。
• design-artifact 提供的是可复用的设计过程，而不是可复用的外观——视觉方向来自你的对话、项目、受众和主题本身。
• README 链接了一篇实用指南：《HTML Wireframes and Prototypes for Coding Agents》，在 docs.plannotator.ai 上。
• 配套工具 Plannotator 可以渲染并批注本地 HTML，tot 工具能为 HTML 文件生成分享链接——需要评审闭环时可以从 README 里的链接找到它们。

何时不用这个 Skill

这些 skill 产出的是自包含的 HTML 产物，不是框架应用——能跑的原型不是你可以部署的代码库。而且线框图刻意保持未完成状态，别把它当视觉设计稿拿给干系人看；那是后面用你自己的设计系统做的另一步。

查看 排行榜 了解更多 skill。