Effective HTML终极组合Plannotator批注tot分享链接的完整工作流【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-htmlEffective HTML 是一个面向 AI 编程代理的开源技能集合帮助开发者用自然语言生成线框图、原型、计划和图表等自包含 HTML 工件。再配合 Plannotator 本地渲染批注与 tot 分享链接就能搭建「生成 → 批注 → 共享 → 迭代」的完整评审工作流。本文带你从零跑通这条链路。为什么是 HTML让 AI 的输出看得见传统工作流里AI 返回的是一段文字你需要反复用语言描述布局不对按钮放错位置。Effective HTML 的核心思路是给足上下文fat context产出厚重的视觉工件fat artifacts——用 HTML 把空间、层级、交互直接画出来提示词只需指向承载上下文的文件和文件夹。整个集合包含 6 个可按需调用的技能覆盖从低保真到高保真的完整保真度光谱技能适用场景html总路由报告、解释页、落地页等综合请求html-wireframe低保真线框图验证结构、层级与流程html-prototype可交互原型与高保真 mockuphtml-plan计划、路线图、发布序列html-diagram架构、时序、流程与状态图design-artifact不绑定house style的创作方向快速安装一条命令接入你的 AI 代理在工作目录中执行npx skills add plannotator/effective-html也可以只装需要的单个技能npx skills add plannotator/effective-html --skill html-wireframeClaude Code 和 Codex 也提供了对应的插件市场安装方式具体说明见根目录 README.md。 其实不安装也能用把仓库当作参考手册让 AI 阅读skills/下的 SKILL.md 说明即可开始工作。第一步生成可评审的 HTML 工件以仓库内置的发布评审示例为例。一句话需求Atlas Mobile 4.8 能不能发版会被 html-wireframe 转化为三个并排的结构方向Decision first / Evidence ledger / Guided gate评审者在一个文件内用切换器对比而不必开多个页面结构定下来后再交给 html-prototype 补全最小可交互闭环——加载、错误、空态、移动端重排等状态都会实现并且产出的.html文件自包含、无需构建、双击即可打开完整源码可对照阅读wireframe.html 与 prototype.html评审记录见 validation.md。第二步用 Plannotator 渲染 HTML 并批注工件生成后评审痛点从看不见变成怎么把意见传回去。Plannotator 负责这件事它直接渲染本地 HTML 文件让你在真实页面上画框、打点、写批注右侧批注栏自动分类统计Open / Selected / Blocking最后点 Send feedback 把整组意见送回当前 AI 会话——AI 据此修改工件形成闭环这套画布优先的批注界面本身也是用 Effective HTML 技能设计出来的参考 product-design 示例说明。第三步用 tot 分享链接把 HTML 发给团队批注解决的是你和 AI之间的反馈tot解决的是你和人之间的协作。它为任意本地 HTML 文件生成一个可分享的链接同事点开即可看到与本地一致的渲染效果——没有部署、没有服务器、没有构建步骤。典型团队工作流AI 按 html 生成自包含 HTML 工件你用 Plannotator 批注把问题回给 AI 修订定稿后用 tot 生成分享链接发进评审会会上对链接直接讨论或再次用 Plannotator 标记修改点把这套组合放进你的日常三个环节各司其职且全部围绕一个自包含 HTML 文件生成6 个技能按保真度分工工件响应式、可键盘操作、浏览器内自证批注Plannotator 把意见锚定在像素级位置而非含糊的文字描述共享tot 让文件脱离你的本地环境进入团队评审更多成品案例可逛 product-studies 示例目录Linear 议题工作区、Notion 项目空间等 1440×900 实拍照或在官方指南站按主题检索。现在就可以从一句话需求开始试试让 AI 画出第一个能对话的 HTML 工件 ✍️【免费下载链接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.项目地址: https://gitcode.com/gh_mirrors/ef/effective-html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考