前言¶
產品討論裏常見兩種落差：口頭描述和最終界面不一致，靜態線框又說不清點擊後的狀態。正式開工後改佈局、改交互，成本會疊在前後端和測試上。若能在開發前拿出一版可點開、可操作的頁面，和干係人把路徑和狀態先對齊，後面的實現會更穩。
下面介紹 SkillHub 上的社區 Skill「軟件開發-原型生成器（html）」：它面向「正式開發前」這一階段，目標是生成可交互的高保真 HTML 原型，而不是直接替代生產代碼。
這是什麼¶
一句話定位：由 Agent 按需求生成可交互的高保真 HTML 原型頁面，用於開發前與用戶對齊需求。
- 座標：
@user_97585ae3/prototype-html-skill - 版本：1.0.0
- 分類：
dev-programming - 來源：community（社區）
- 發佈者：
user_97585ae3（SkillHub 頁面展示作者爲「寧天下人負我」） - 標籤：
requires_api_key=false（按 SkillHub 標註，不依賴額外 API Key）
Skill 本體遵循通用的 SKILL.md 格式，安裝後由支持 Skills 的 AI 客戶端在對話中加載並執行其中的指引。
官方入口：
- SkillHub 頁面：https://www.skillhub.cn/skills/user_97585ae3/prototype-html-skill
- API 地址：https://api.skillhub.cn/user_97585ae3/prototype-html-skill
核心功能¶
以下能力均來自 SkillHub 公開簡介，未在資料中出現的細節不作延伸：
- 高保真 HTML 原型：輸出爲 HTML 頁面形態，便於在瀏覽器中直接查看。
- 可交互：強調「可交互」，適合表達按鈕、跳轉、簡單狀態切換等，而不只是靜態截圖式示意。
- 需求對齊用途：定位在「正式開發前」，用於與產品、業務或客戶確認界面與流程，再進入實現階段。
安裝與啓用¶
SkillHub 推薦通過 SkillHub 安裝說明 使用 skillhub CLI，並把技能安裝到當前 Agent 實際讀取的 skills 目錄；裝到錯誤目錄時，客戶端可能無法識別，需自行覈對路徑。
1、檢查 CLI¶
command -v skillhub && skillhub --version
若未安裝，可按官方文檔執行完整安裝或僅安裝 CLI（節選）：
# 完整安裝（CLI + 默認 Skill，推薦）
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
# 僅安裝 CLI
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安裝本 Skill¶
將 @user_97585ae3/prototype-html-skill 安裝到當前環境的 skills 目錄，例如：
skillhub install user_97585ae3/prototype-html-skill --dir <skills 目錄>
常用客戶端的 skills 路徑（摘自 SkillHub 安裝文檔）：
| 客戶端 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
不同客戶端目錄不同，以你當前使用的 Agent 爲準；部分環境安裝後可能需要重啓客戶端才能加載新 Skill。
3、讓 AI 代爲安裝（官方提示詞）¶
SkillHub 頁面提供的安裝提示詞如下，可複製給支持聯網與終端的 Agent：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_97585ae3/prototype-html-skill`。
典型用法¶
安裝：按上一節完成 skillhub install，或把官方提示詞發給 AI，讓其按 skillhub.md 完成安裝並指向正確的 --dir。
使用：安裝並啓用後，在對話中說明要做的頁面或流程（模塊、主要界面、關鍵交互），由 Agent 依據 Skill 內 SKILL.md 的指引生成 HTML 原型文件；具體產出文件名、目錄結構以安裝包內 Skill 說明爲準。生成後在瀏覽器打開 HTML，與干係人走查並記錄修改點，再進入正式開發。
公開資料未提供單獨的「示例 prompt」全文；可復現的官方示例即上述安裝提示詞與 skillhub install 命令。
適用場景與注意¶
更適合：
- 需要在編碼前快速驗證信息架構、主流程和關鍵交互的團隊。
- 希望用瀏覽器可點的原型替代純文檔描述，減少「理解不一致」的場景。
- 已使用 Cursor、Claude Code、Codex 等支持 Skills 的工具鏈。
需要注意：
- 這是原型 Skill，產出用於對齊需求，不應默認等同於可上線的生產前端（安全、性能、可維護性、與設計系統綁定等需另行處理）。
- 社區來源（
community），維護節奏與 Skill 內規範以發佈者爲準；升級時可使用skillhub的更新能力並再次確認SKILL.md。 - SkillHub 頁面數據（截至查閱）：評分 100000，下載 3427；
requires_api_key=false表示按平臺標註無需額外 Key，仍取決於你本地 Agent 與模型的配置。
結尾¶
「軟件開發-原型生成器（html）」把「可交互的高保真 HTML」和「開發前對齊需求」綁在一起：先在同一套可點擊頁面上達成一致，再寫業務代碼，通常比事後大改界面更省事。若你要從 SkillHub 安裝或查看說明，可從官方頁面入手：https://www.skillhub.cn/skills/user_97585ae3/prototype-html-skill 。
