一个专门服务于 HTML Demo 和前端项目的 Prototype Notes Skill。
这段时间，我越来越习惯让 AI 直接生成原型页面和前端代码。
页面做出来很快，但新的问题也跟着出现了：
“这个按钮点击后需要二次确认。”
“这里的图不好看，换一种表现形式。”
“表格切换分类时，还要同步过滤下面的数据。”
这些话到底写在哪里？
发截图、画红框、写文档、在群里补一句，研发再对着页面找半天。页面一改，旧截图又失效；意见一多，群聊里的上下文也很容易丢。
所以我做了一个 Skill：Prototype Notes（原型批注）。它可以给 HTML 原型或前端开发环境加上一层独立的批注工具，让需求和修改意见直接留在页面现场。
它到底是做什么的？
简单说，它像是给网页装了一层“现场便签”。
开启批注模式后，在页面任意位置右键，就能选择添加两类内容：
需求说明：面向产品经理，用来描述新增需求或需求变更，可设置优先级、状态，并添加多条说明。
修改意见：面向审核者，用来提出评审建议，需要填写署名，但不需要设置优先级和状态。
>开启批注模式后，右键选择需要添加的批注类型
提交以后，说明会收缩成页面上的小图标。研发点击图标就能查看上下文，不需要再猜“截图里说的是哪个位置”。
主要功能
01 需求说明和审核意见分开
产品需求与审核建议本来就是两套信息。Skill 没有把它们硬塞进同一个表单，而是从右键入口开始就明确区分。
>需求说明：多条内容、优先级、新增或变更状态、保存时间
>修改意见：填写审核人署名，直接记录评审建议
02 一个标记可以承载多条说明
同一位置的相关需求不必铺满一排图标。一个需求标记可以继续添加多条需求说明，一个修改意见标记也可以添加多条意见，并通过角标显示数量。
03 标记和浮窗都能移动
标记位置不准确时，可以直接拖动重新定位；浮窗也可以拖走，不挡住正在查看的页面内容。标记会记录相对位置，页面滚动和尺寸变化时仍尽量贴着目标元素。
04 说明里可以直接粘贴图片
光靠文字说不清楚时，把截图复制后直接粘贴到当前说明里即可。图片会自动压缩并随批注数据保存，还能单独删除。
05 非批注模式严格只读
日常查看时，不允许误改内容，也不会拦截正常右键。只有主动开启批注模式后，才能新增、编辑、移动、导入或删除标注。
>普通查看模式：能看说明，但没有编辑和删除操作
06 自动保存到 Git 仓库里的 JSON
批注数据保存在项目根目录的：
.prototype-notes/annotations.json
保存、移动、导入或删除后，开发环境会自动回写这个文件。团队成员提交 Git 后，批注就能跟随项目一起流转、审查和保留历史。手工导入与导出仍然保留，作为故障恢复方案。
07 正式构建不带入批注代码
这不是一个靠“点击隐藏”假装安全的工具。Vite 项目只在开发模式加载运行时，保存接口也只挂在开发服务器上；静态 HTML 项目上线前可以执行移除操作。发布检查的目标是：生产产物中根本没有批注运行时和批注内容。
我比较喜欢的几个小巧思
蓝色文档图标和橙色意见图标。 不打开浮窗，也能看出这是产品需求还是审核意见。
只在批注模式接管右键。 平时不打扰网页自身操作，需要记录时再开启。
每条说明都有最新保存时间。 研发能判断自己看到的是不是刚更新的版本。
本地缓存作为兜底。 自动写入失败时，浏览器里的草稿不会立刻丢失，工具栏也会提示“同步失败”。
自带来源标识。 当前版本显示“泥嚎的AI实验室”，并在运行时、开发工具和导出的 JSON 中保留统一的可核验标记。
它解决了什么问题？
第一，减少需求上下文丢失。需求不再脱离页面单独漂在聊天记录或文档里。
第二，减少产品和研发的定位成本。标注挂在具体控件上，打开页面就知道改哪里。
第三，把产品需求与评审反馈分开。谁提出的、是什么性质，一眼就能分辨。
第四，让 AI 原型真正进入迭代流程。AI 负责快速生成，批注层负责把后续反馈重新喂给 AI 或研发。
第五，不牺牲上线安全。批注只属于开发评审环境，不成为正式产品功能。
不同场景怎么用？
场景一：AI 生成的单页 HTML Demo
让 AI 使用 Prototype Notes Skill 安装批注层，启动配套的本地开发服务。产品在页面上右键写需求，保存后自动进入项目 JSON。确认完成后移除运行时，再发布静态页面。
场景二：Vue / React + Vite 前端项目
Skill 会把运行时放进开发工具目录，并安装仅在开发服务器运行的保存插件。正常执行项目的开发命令即可使用；正式构建时不会加载批注运行时。
场景三：产品经理与研发在同一个 Git 仓库协作
产品保存标注后提交 annotations.json，研发拉取代码即可在原页面查看；完成修改后继续提交。Git 负责版本、合并与历史，批注工具负责页面现场表达。
场景四：设计或业务审核
审核者选择“添加修改意见”，署名后记录建议。产品需求不会被审核意见混淆，研发也能知道意见来自谁。
场景五：只有展示权限的评审会
关闭批注模式后，参与者仍能点击图标查看，但无法编辑；也可以一键隐藏所有标记，让页面恢复纯净展示。
如何安装和调用 Skill？
这个 Skill 目前暂未开源。如果你想体验：
关注“泥嚎的AI实验室”
私信发送关键词：原型批注
我会把 Skill 压缩包和使用说明发给你。
拿到压缩包后，解压到个人 Codex Skill 目录：
C:\Users\你的用户名\.codex\skills\prototype-notes
重新打开 Codex 任务后，就可以这样调用：
使用 $prototype-notes 给当前 HTML 原型添加批注功能。
也可以直接说自然语言，例如：
“给这个 Vue/Vite 项目安装原型批注，数据自动保存到 Git JSON，生产构建不要带入批注代码。”
“给这个单页 HTML Demo 加上需求说明和署名修改意见，并帮我启动本地预览。”
使用中常见的问题
1. 页面能打开，但保存后 JSON 没变化
多数情况是用了普通静态服务器。浏览器不能直接写 Git 文件，需要用 Skill 安装的 HTML 开发服务，或者在 Vite 中启用配套开发插件。工具栏显示“同步失败”时，本地缓存仍会保留草稿。
2. 换一台电脑后看不到批注
确认 .prototype-notes/annotations.json 已提交到 Git，并且对方已经拉取最新代码。localStorage 只是本机兜底，不是团队共享介质。
3. 右键没有出现批注菜单
先点击右下角“批注”按钮进入批注模式。普通模式会保留浏览器原生右键，避免干扰日常操作。
4. 页面改版后，标记位置偏了
在批注模式下把图标拖到新位置。对于经常调整结构的重要区域，可以让 AI 添加稳定的 data-prototype-anchor，避免依赖易变化的 DOM 层级。
5. Git 合并 annotations.json 发生冲突
它适合异步协作，不是实时多人编辑。开始批注前先拉取最新分支；多人同时修改时，按标记 ID 和更新时间检查冲突。需要真正的实时多人同步，再考虑接数据库服务。
6. 担心把内部需求或截图传出去
批注内容、审核人署名、页面路由和粘贴图片都可能包含敏感信息。项目应使用私有仓库；不要把本地开发服务暴露到不可信网络，也不要把 .prototype-notes 目录发布到线上。
7. 图片太多，浏览器存不下
运行时会压缩图片并限制单条说明的图片数量，但截图仍会增大 JSON。建议只保留与问题直接相关的画面，大图先裁剪后再粘贴。
最后
AI 已经让“做出页面”变得越来越快，但从页面到可交付产品，中间仍然需要清晰的需求、评审和协作。
我做这个 Skill，不是为了再造一个庞大的项目管理系统，而是想补上一个很小、很具体的缺口：
让意见留在它真正发生的地方。