技能介绍

它解决什么问题

原型交付里最烦的一件事是：标注写在文档里，代码在 HTML 里，两者对不上。开发打开原型看到的是一堆没有说明的按钮；改一句说明要重新导出、重新发链接；评审时还在争论某个箭头指向哪个元素。AnnoProto 的做法是把标注引擎内联进原型本身——输出一个自包含单文件 login-prototype.html，标注随文件走，双击文字就能改。

工作方式

核心思路是把标注从文档搬进 DOM，靠约定而不是手写标注节点：

挂载约定：可交互元素加 data-annotate（主标题）、data-annotate-type（类型）、data-annotate-detail（详情），区块容器加 data-annotate-section，多页原型加 data-page。引擎扫描这些属性后自动渲染右侧抽屉与元素右上角的序号圆点。
抽屉交互：标注按页面区块分组、全页连续编号；点圆点定位卡片，点卡片空白区定位并高亮元素；双击抽屉文本或页面任意文字即可就地编辑，失焦或 Enter 回写 data-*，Esc 取消。
增删标注：抽屉底部「添加标注」进入拾取模式，点元素填表单写回属性；卡片右上角的 × 删除后序号自动重排。
保存与校验：底部「保存」回写全部修改并下载 -annotated 后缀的单文件；交付前跑 scripts/validate_prototype.py 做静态校验，任一项不过就回到生成或注入阶段修复。

执行分五阶段：需求解析 → 生成原型 HTML → 注入标注引擎 → 校验 → 交付，禁止跳过校验步骤。

适用边界

这个 skill 只管标注，页面底色、排版、线框风或高保真风格需要另外搭配设计规范 skill（如 element-html-prototype），或按需求文档与通用线框风兜底。
不触发的场景：纯静态切图、无标注需求的页面、只导出设计稿图片。
序号按抽屉显示顺序重排，与 DOM 顺序无关；切换页面后重新从 1 开始。
保存会固化当前所在页面：多页原型在第 2 页保存后，重新打开就停在第 2 页。
表格或列表容器用 data-annotate-table，其内部标注会在抽屉里聚合成带表头的真实表格，字段名由主标题承载。