前言¶

給 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