html原型 PRD 标注

HTML 原型 PRD 标注工具 v1.1.1。在 HTML 原型页面的指定元素旁注入数字角标， 角标关联 AI 预写的需求说明（业务规则、数据来源、字段口径等）。 角标渲染在独立固定图层、每帧跟随，不受容器 overflow 裁剪。 读者（如研发）单击角标即可查看只读富文本说明，无任何编辑入口。 作者按快捷键唤出工具栏（Mac ⇧A / Windows Alt+A）：上一个/下一个、标注管理（拖拽排序、 按位置重排）、点击新建（点页面任意元素自动生成 CSS 锚点并打开富文本编辑）、 隐藏角标、保存并导出；或按住 Ctrl/⌘ 点击角标直接编辑（弹窗可拖动，支持 加粗/斜体/下划线/删除线/一二三级标题/引用块/列表/链接/高亮/撤销重做/纯文本粘贴， 保存后弹窗自动关闭，⌘Enter 等同保存、Esc 取消关闭）。 序号动态连续重排，且**每个页面各自从 1 开始编号**；工具栏计数与上一个/下一个、 管理抽屉列表默认都只作用当前页面（抽屉可切「全部页面」）。 多页面原型用 data-prd-page 标记页面，管理抽屉可导出「本页面 / 全文件」两种 Word PRD （一级标题=页面名，二级标题=序号.标注标题，正文=需求说明，保留加粗/列表/链接等富文本）。 UI 采用 pro 风格：暗色胶囊工具栏、右侧滑出管理抽屉、24px 白边红色圆角标（无动效）。 **标注会自动镜像到浏览器 localStorage（键 prd-annos::<路径编码>）， 因此 AI 可以不经用户导出、直接离线读浏览器 leveldb 拿回标注 JSON（见「从浏览器读回标注」）。** **注入 / 升级 / 回写一律优先用 `scripts/inject.js` 与 `scripts/writeback.js`** （防重复注入、防误删原型样式、防覆盖已预填内容、自动备份、写完自动复核）， 详见正文「命令行脚本（防呆层，优先使用）」。 本 skill 应在以下场景使用： - 用户要求在 HTML 原型上加标注、需求说明、PRD 注释、给研发的需求备注 - 用户发送截图标记某处要求在该位置打标记并写需求说明 - 用户说「我已经标注好了，你读回来 / 预填 PRD / 写回文件」——走「从浏览器读回标注」流程 - 用户要求修改/删除/重新排列已有的数字角标标注 不适用于：独立 PRD 文档撰写（非原型内嵌）、Word/在线文档形式的需求文档。

存档时间线

版本索引永久保留；内容副本只保留最近 2 版，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本