前言¶

给 AI 生成的 HTML 原型做标注，常见的做法是另开一份 Word 或飞书文档，把「这个字段从哪来」「点击之后发生什么」「这里为什么要留空」一条条抄过去。两份东西同步不起来：原型改了一版，文档没跟上；反过来文档补充了说明，打开原型还是看不懂。另一种做法是在 HTML 里随手加 <!-- 注释 --> 或者 title 属性，写的时候省事，回头看的时候没人读，也没法按上下文筛选。

下面介绍的 Skill 走第三条路：不改原型本身的结构，在它上面叠加一层可切换的标注层，编号角标对应到具体元素，点击弹出注释卡片，另有一个半透明总开关可以一键收掉整层标注。

这是什么¶

html原型标注 是一个社区 Skill，坐标 @user_3efa5da3/html-annotation，发布者 user_3efa5da3，版本 1.0.0，分类 dev-programming，来源 community，标签 requires_api_key=false（不需要 API Key）。

它解决的问题是：AI 通读一份 HTML 原型后，自动挑选元素并补充原型本身看不出来的说明，生成一个带标注层的新 HTML 文件。原始原型不动，标注层叠加在上面，可以随时整体收起或展开。

核心功能¶

1、编号角标。AI 挑选原型中的关键元素，按编号标记，作为注释卡片的入口。

2、注释卡片。点击角标弹出卡片，写明该元素的说明。说明分为四类，对应原型从外部看不出来的四个维度：

• 数据规范：字段含义、来源、格式、取值范围。
• 交互表现：点击、悬停、输入时的界面反馈。
• 处理逻辑：触发了什么校验、跳转、请求或状态变更。
• 备注说明：设计意图、待确认问题、临时决策。

3、总开关。一个可拖动的半透明 ON/OFF 开关，用来一键收起或展开整层标注。

4、上下文感知。切换页签或弹窗时，只显示当前上下文内的标注，避免其他区块的注释干扰当前视图。

5、标注内容管理。标注支持编辑、添加、删除；编辑结果自动持久化到 localStorage，刷新页面不会丢失。

6、导出。提供「保存HTML」按钮，点击后导出一个包含全部标注内容的完整 HTML 文件，可以直接交付。

安装与启用¶

抓取到的资料里没有给出官方的安装命令、目录约定或配置文件字段，也没有说明在 Cursor、Codex CLI、Claude Code 等不同环境里的安装方式差异。这里不补写推测的命令，实际启用方式以 SkillHub 页面的说明为准：

https://www.skillhub.cn/skills/user_3efa5da3/html-annotation

需要说明的是，官方地址 https://api.skillhub.cn/user_3efa5da3/html-annotation 和上面这个页面，在本次写作时均无法直接抓取正文，上面的功能描述来自预先抓取到的 SkillHub 元数据，与 Skill 自身简介一致。

关于评分和下载量：预先抓取的资料给出的是评分 100000、下载 964、安装 0；而本次写作的 Skill 线索给出的是评分 99170、下载 916。两组数字对不上，可能是页面在不同时间被抓取。这里不据此下结论，如需引用请回到页面自行核对。

典型用法¶

触发条件是用户给了一个 HTML 原型，并希望自动加上产品注释、字段说明或标注。典型的输入和结果如下。

输入：

帮我把这份原型加上标注：订单详情页
https://example.com/order-detail.html

Skill 的处理顺序是：先通读原型，识别页面结构（页签、弹窗、表单区块），再挑选需要说明的元素，按四类说明补全内容，最后注入角标、注释卡片、总开关和保存按钮，输出一个新的 HTML 文件。

输出的是一个独立 HTML 文件，可以直接在浏览器打开：

order-detail.annotated.html

打开后能看到原型本身，以及叠加在上面的标注层。拖动半透明开关可以整体收起标注，点击编号角标可以展开该元素的注释卡片。

适用场景与注意¶

适合的场景：

• AI 生成的原型需要快速补齐产品说明，来不及逐条找人解释。
• 交付前需要一份「看得懂的原型」，让评审的人不用来回问字段含义。
• 需要把字段来源、校验规则、交互反馈这类信息和界面放在一起沉淀。

限制和坑：

• 标注内容依赖 AI 对原型的理解，字段含义、数据来源这类信息如果原型里本身没有，生成的说明是推测，交付前应当人工复核。
• 注释持久化在 localStorage，只在当前浏览器生效；换浏览器或换设备不会带过去。这也是为什么要有「保存HTML」按钮——需要跨环境分发时必须走导出。
• 上下文感知按页签/弹窗切换过滤标注，如果原型里存在动态插入、没有明确上下文归属的元素，标注可能落在错误的上下文里。
• 资料中没有提到对多文件项目或跨页面一致性的支持，用法看起来是针对单个 HTML 文件。
• 该 Skill 标记为 requires_api_key=false，不需要额外配置密钥，但资料中没有说明它是否会调用外部模型来完成标注生成。

小结¶

html原型标注 的价值不在于自动生成多少条注释，而在于把标注和原型合并到同一个文件里：标注层可以整体收起，注释按上下文过滤，编辑结果不会丢，需要分发时导出成完整 HTML。对于拿到 AI 原型、又要在短时间内把产品说明补到位的场景，它省掉了两份文档来回同步的麻烦。

官方地址：https://api.skillhub.cn/user_3efa5da3/html-annotation

SkillHub 页面：https://www.skillhub.cn/skills/user_3efa5da3/html-annotation