HTML 原型标注组件

要解决的问题

静态 HTML 原型评审最常见的痛点是：反馈与页面本身脱节。截图丢进聊天框、一句“这里改一下”，等开发打开文件时，很难把评论重新对应到具体元素上。来回几轮之后，标注这件事本身就成了负担。这个技能针对的正是这一环——不离开浏览器，直接在原型上落点、留言、贴截图。

典型场景：

• 设计评审：在原型上落点并给团队留评论
• 客户反馈：让相关方直接圈点 UI 或标注截图
• UI 走查交付：针对具体元素写清“要改什么”
• 个人备忘：标出“下个要改这里”

工作方式

核心是一条内联流程。CSS 与 JS 全部内嵌在 SKILL.md 中：技能不会在磁盘上创建 annotation.css、annotation.js 这类外部文件，而是把样式放进 <style>、脚本放进 <script>，两者都紧贴 </body> 之前（没有 </body> 就放在 </html> 之前，两者都没有则追加到文件末尾），最终产物仍是一个自包含的 HTML。脚本在 DOMContentLoaded 之后自动初始化，不需要手动调用。

安装后页面会获得：

• 点击创建标注点，落点即点击位置
• 可编辑气泡，支持粘贴图片作为反馈内容
• 底部工具栏：上一个 / 下一个 / 管理 / 隐藏 / 主题切换
• 管理面板拖拽排序，方便整理多个标注点的次序
• 多页面支持，同一套原型的多个 HTML 都能装
• localStorage 持久化，刷新页面后标注不丢

边界与注意点

• 只面向静态原型文件：.html 的 demo、mockup 或落地页，不是生产环境用的组件。
• 严格单文件形态：不要写外部资源文件，也不要额外注入 link 或 script 标签；装完之后目标文件应当完全自包含。
• 未指定文件时先问：要装到哪个 HTML 必须确认，相对路径按工作区根目录解析。
• 持久化依赖浏览器本地存储：换浏览器、换设备或清理存储后标注会丢失；粘贴的图片也走同一条路径，内容多了要注意体积。
• 多页面指多个 HTML 文件：每个文件各自维护一份标注数据，而不是跨页面共享同一批标注。