前言¶

產品討論裏常見兩種做法：要麼在白板或文檔裏寫功能說明，界面長什麼樣要靠口頭補；要麼交給設計工具出靜態稿，改一版就要重新導出。兩邊來回對齊，成本高。prototype-html 是 SkillHub 上的一條社區 Skill（design-media 分類），面向「先要把界面和說明放在一起、還要能點一點看交互」的階段：你用自然語言寫清需求，Agent 調用該 Skill 後產出單文件 HTML，左側是界面、右側是說明，元素和文檔之間用交互連線關聯。

這是什麼¶

一句話定位：描述產品需求，生成可交互的單文件 HTML 產品原型頁面。

來源與維護：社區來源（community），發佈者爲 user_d5a027ad，座標 @user_d5a027ad/prototype-html，當前頁面標註版本 1.0.0。SkillHub 展示頁：https://www.skillhub.cn/skills/user_d5a027ad/prototype-html；Skill 資源地址：https://api.skillhub.cn/user_d5a027ad/prototype-html。標籤標明 requires_api_key=false，不依賴額外 API Key。

解決什麼問題：把「界面原型」和「原型說明」放在同一頁裏動態關聯，減少文檔與 Demo 脫節；輸出是單文件 HTML，便於本地打開、轉發或在評審裏演示。

核心功能¶

以下能力均來自官方簡介與用法說明，未超出已覈實範圍。

1. 單文件 HTML 原型：根據你給出的產品需求描述，生成可直接打開的可交互頁面。
2. 左右分欄佈局：一側展示 UI 界面，另一側展示與功能對應的說明文檔。
3. 交互式連線：界面元素與右側說明通過連線動態關聯，點擊或交互時可對照閱讀，實現一體化展示。
4. 與 Agent 工作流銜接：官方用法把「頭腦風暴寫需求 → 生成原型 → 對話迭代 → 再出 PRD」串成固定步驟，Skill 本身負責中間的 HTML 原型生成環節。

安裝與啓用¶

官方資料未給出 npx skills 一類的一行安裝命令，只說明需要把 Skill 目錄交給 Agent 安裝。可按下面步驟操作。

1. 從 SkillHub 對應條目獲取 Skill 包（頁面座標 @user_d5a027ad/prototype-html，資源根地址爲 https://api.skillhub.cn/user_d5a027ad/prototype-html）。
2. 將下載得到的 skill 目錄 放到你當前 Agent 支持的 Skills 安裝位置（具體路徑以你所用客戶端的 Skills 文檔爲準；本資料未區分 Cursor、Codex CLI、Claude Code 的差異命令）。
3. 確認 Skill 已被 Agent 識別後，在對話中按觸發場景調用（見下一節）。

無需配置 API Key（requires_api_key=false）。

典型用法¶

下面步驟摘自官方「用法」說明，可按順序復現。

1、安裝 Skill

把 skill 目錄下載下來，交給你的 Agent 去安裝。

2、生成需求

用 brainstorming（頭腦風暴）產出精確、完整的需求描述，避免原型階段反覆猜意圖。

3、生成原型

在對話中明確調用 Skill，並附上需求正文。官方示例句式如下：

使用 prototype-html 技能幫我生成以下需求的原型：<這裏粘貼完整需求描述>

4、調整原型

與 Agent 持續對話，修改佈局、交互和文案，直到界面符合預期；同步調整頁面右側的原型說明，保證連線關聯的文檔與界面一致。

5、生成 PRD

在原型定稿後，可讓 Agent 根據當前原型輸出 PRD 文檔（這一步屬於工作流延伸，具體 prompt 以你團隊規範爲準）。

6、收尾

手動修訂 PRD 後結束流程。

觸發場景（官方簡介）：當需要創建產品原型、UI 界面原型、可交互的 HTML 演示頁、產品功能展示頁，或對話中出現「原型」「prototype」「產品界面」「UI 原型」「交互原型」「演示頁面」等表述時，適合啓用本 Skill。

適用場景與注意¶

適合誰

• 產品經理、業務方：在評審前快速做出可點擊的 HTML Demo，並自帶說明側欄。
• 研發或全棧同學：需要把需求可視化給非技術同事，又不想先搭完整前端工程時。

限制與注意

• 產出是 單文件 HTML 原型，不是生產級前端工程；複雜業務狀態、後端聯調、設計系統一致性需自行評估。
• 質量高度依賴 需求描述是否完整；官方明確建議先用 brainstorming 寫清需求再生成。
• SkillHub 頁面統計（以抓取時爲準）：評分 100000，下載 885，安裝 0——安裝數爲 0 可能表示統計口徑或上報方式與「本地下載目錄安裝」不一致，以你本地 Agent 是否成功加載 Skill 爲準。
• 迭代靠 多輪對話；右側說明需與左側界面一起改，否則連線關聯的內容會失真。

結尾¶

prototype-html 把「可交互界面」和「結構化說明」壓進一個 HTML 文件，適合需求澄清、評審演示和向 PRD 過渡。若你要在 Agent 裏做產品向的原型而不是靜態截圖，可從 SkillHub 條目入手安裝並在對話中按官方句式調用。

• SkillHub 展示頁：https://www.skillhub.cn/skills/user_d5a027ad/prototype-html
• Skill 資源：https://api.skillhub.cn/user_d5a027ad/prototype-html