前言¶
設計階段產出的往往是結構化描述（JSON、YAML），而評審和演示更需要能在瀏覽器裏直接打開的頁面。手工從 DSL 或規格說明寫 HTML，容易漏佈局、漏樣式，和上游設計稿也對不齊。
下面介紹 SkillHub 上的「生成頁面」（@user_ad708a9f/unified-html-generator）。它面向 phase-design 鏈路：把上游輸出的 DSL JSON 或 SPEC YAML 轉成可運行的單文件 HTML 原型，減少從設計到可點擊原型之間的重複勞動。
這是什麼¶
「生成頁面」是社區來源（community）的 Agent Skill，當前版本爲 1.0.0，發佈者爲 user_ad708a9f，分類爲 dev-programming。SkillHub 標註 requires_api_key=false，安裝後不需要額外 API Key。
官方簡介概括爲：將上游設計方案（phase-design 輸出的 DSL JSON / SPEC YAML）轉換爲可直接運行的單文件 HTML 原型，實現 100% 設計還原。這裏的「100%」來自 SkillHub 頁面表述，實際效果仍取決於上游設計稿的完整度與 Agent 執行質量。
核心功能¶
根據 SkillHub 已公開信息，可以確認的能力邊界如下：
- 輸入形態：接受 phase-design 階段的 DSL JSON，或 SPEC YAML。
- 輸出形態：生成單文件 HTML，強調「可直接運行」——通常意味着樣式與結構打包在一個文件裏，便於本地用瀏覽器打開或發給同事預覽。
- 定位：處於設計流水線下游，與 phase-design 配套使用，而不是從零用自然語言隨意畫頁面。
頁面未單獨列出更多子命令或腳本；具體生成規則寫在 Skill 包內的 SKILL.md 中，安裝後由 Agent 按技能說明執行。
安裝與啓用¶
SkillHub 推薦兩種方式：用 CLI 安裝，或把安裝提示詞發給 AI 讓其按官方文檔操作。
1、安裝 SkillHub CLI（若尚未安裝）¶
先檢查是否已有 CLI：
command -v skillhub && skillhub --version
未安裝時，可按 SkillHub 安裝文檔執行完整安裝（含 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、安裝「生成頁面」到當前 Agent 的 skills 目錄¶
安裝技能時必須用 --dir 指向當前 Agent 識別的 skills 目錄；否則默認會裝到 ./skills/，Agent 可能讀不到。
skillhub install @user_ad708a9f/unified-html-generator --dir <你的 skills 目錄>
常用路徑（以 SkillHub 安裝文檔爲準）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
也可在對話中讓 AI 按下面說明安裝（與 SkillHub 頁面一致）：
請根據 https://skillhub.cn/install/skillhub.md，安裝 @user_ad708a9f/unified-html-generator。
安裝完成後，按你所用客戶端的要求重啓或刷新 Agent，使新 Skill 生效。
典型用法¶
公開頁面未附帶逐步截圖或固定示例倉庫，典型流程可按上下游關係復現：
- 在 phase-design（或等價設計階段）得到 DSL JSON 或 SPEC YAML。
- 在已啓用「生成頁面」的 Agent 對話中，說明要按該 Skill 將設計稿轉爲單文件 HTML 原型，並附上 JSON/YAML 內容或文件路徑。
- 讓 Agent 生成 HTML 後，在本地用瀏覽器打開該文件，對照設計稿檢查佈局與樣式。
對話側可以收斂爲類似意圖（措辭可按項目習慣調整）：
使用「生成頁面」技能，將附件中的 phase-design SPEC YAML 轉成單文件 HTML 原型，要求可直接在瀏覽器打開。
若你的流水線裏 phase-design 與 HTML 生成由不同 Skill 串聯，應先完成設計輸出，再調用本 Skill，避免在缺少結構化設計稿時強行生成頁面。
適用場景與注意¶
適合誰
- 已經在用或計劃用 phase-design 產出 DSL JSON / SPEC YAML 的團隊。
- 需要快速得到可點擊 HTML 原型、又不想手寫整頁 markup 的開發者或設計協作角色。
限制與注意
- 依賴上游設計稿質量；YAML/JSON 缺字段時，生成結果無法憑空補全設計意圖。
- 輸出爲單文件 HTML，複雜應用的多頁路由、後端接口不會由本 Skill 自動補齊。
- SkillHub 統計（以抓取資料爲準）：評分 100000，下載 2720，安裝 26；社區 Skill，升級與維護節奏以發佈者爲準。
- 與線索中的舊數據（如另一套下載量）不一致時，以 SkillHub 頁面與最新抓取爲準。
結尾¶
「生成頁面」把 phase-design 的結構化設計稿接到可運行的 HTML 原型上，適合放在設計到演示的短鏈路上。安裝時記住座標 @user_ad708a9f/unified-html-generator 與 --dir 指向正確的 skills 目錄。
官方 SkillHub 頁面：https://www.skillhub.cn/skills/user_ad708a9f/unified-html-generator
API 座標入口：https://api.skillhub.cn/user_ad708a9f/unified-html-generator
