产品经理的 Claude Code 技能包实战四给原型自动加标注开发不再问交互这是《产品经理的 Claude Code 技能包实战》系列的第 4 篇。 上一篇讲了怎么用 mobile-prototype 做出「能演示」的原型。但原型交到开发手里还有一道坎——开发会不停地问「这个按钮点了跳哪」「这个字段从哪来」。这一篇讲怎么把交互说明直接「长」在原型上。一、痛点原型和交互说明是两张皮PM 交付原型给开发通常是这样原型是一堆 HTML交互说明写在 PRD 或单独的文档里开发看原型时得一边翻文档一边对照「这是哪个字段」对不上的地方就在群里 你「这个弹窗从哪进来的」「这个列表点进去是哪页」你把交互写进 PRD 也没用——说明和界面是分离的开发看界面时身边没有说明。于是同样的问题被不同的人反复问你一遍遍解释。理想的形态是标注直接显示在原型上开发把鼠标放上去、或点开侧边面板就能看到每个元素是干嘛的、点了会怎样。这就是annotation-generator干的事。二、这个技能包长什么样触发方式说「生成标注」「给这个原型加标注」「做标注」「annotation」「data-anno」就激活。核心机制三层作用域 >还有一个贴心的设计URL 加?edit-anno1进入编辑模式可以增删改标注并导出 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 是资产不是代码