产品经理的 Claude Code 技能包实战（四）：给原型自动加标注，开发不再问交互
这是《产品经理的 Claude Code 技能包实战》系列的第 4 篇。 上一篇讲了怎么用 mobile-prototype 做出「能演示」的原型。但原型交到开发手里，还有一道坎——开发会不停地问「这个按钮点了跳哪」「这个字段从哪来」。这一篇讲怎么把交互说明直接「长」在原型上。
一、痛点：原型和交互说明，是两张皮
PM 交付原型给开发，通常是这样：
- 原型是一堆 HTML，交互说明写在 PRD 或单独的文档里
- 开发看原型时，得一边翻文档一边对照「这是哪个字段」
- 对不上的地方，就在群里 @ 你：「这个弹窗从哪进来的？」「这个列表点进去是哪页？」
你把交互写进 PRD 也没用——说明和界面是分离的，开发看界面时身边没有说明。于是同样的问题被不同的人反复问，你一遍遍解释。
理想的形态是：标注直接显示在原型上，开发把鼠标放上去、或点开侧边面板，就能看到每个元素是干嘛的、点了会怎样。这就是annotation-generator干的事。
二、这个技能包长什么样
触发方式
说「生成标注」「给这个原型加标注」「做标注」「annotation」「data-anno」就激活。
核心机制：三层作用域 +>![]()
还有一个贴心的设计：URL 加?edit-anno=1进入编辑模式，可以增删改标注并导出 JSON。标注内容可以边看边补，不用改代码。
三、实战流程
- 定目标—— 优先用你指定的 HTML，其次当前 IDE 打开的，再次
prototypes/下最近改的 - 识别作用域—— 扫出 page / 各 screen / 各 modal
- 打锚点—— 给关键元素加
data-anno - 生成 JSON—— 每个锚点一条标注，字段齐全
- 注入脚本—— 引用
annotation-layer.js（已有就刷新缓存版本号） - 校验交付—— 检查 HTML 可解析、JSON 合法、脚本语法正确，汇报标注数量和分布
一句话，一份「开口说话」的原型就出来了。
四、踩坑与设计取舍
1. 为什么用>
下一篇（五）：原型和标注都做好了，但它们还在你本地——《原型一键部署上线》。聊聊怎么把 prototypes 目录自动扫描、分类、增量部署到云服务器，发个链接别人就能看。
系列目录
- （一）用技能包写 PRD：为什么小而精胜过大而全 —— prd-writer
- （二）把 PRD 一键变成禅道任务 —— pm-zentao-task
- （三）移动端原型：左预览右介绍的演示套装 —— mobile-prototype
- （四）给原型自动加标注，开发不再问交互 —— annotation-generator（本篇）
- （五）原型一键部署上线 —— deploy-prototypes
- （六）UI 设计：67 风格 161 配色实测 —— ui-ux-pro-max
- （七）搭设计系统：三层 Token 实战 —— design-system
- （八）幻灯片与 Banner —— slides / banner-design
- （九）给 AI 装上眼睛和手 —— agent-reach / kimi-webbridge
- （十）把真人思维做成 AI 顾问 —— zhangxuefeng-skill
- （十一）让 AI 自己写测试、自己调试 —— superpowers
- （十二·终篇）我沉淀技能包的方法论：skill 是资产不是代码
