前言¶
活動頁、品牌落地頁往往同時有參考截圖、PPT 或 Word 裏的文案，以及帶標註的切圖。手寫 HTML/CSS 再補淡入、呼吸類動效，耗時長，且 PC 與移動端兩套佈局容易走樣。下面介紹 SkillHub 社區技能 design-to-h5（@user_5b12983f/design-to-h5）：在對話裏把多源素材交給 Agent，按 Skill 約定生成可部署的響應式 H5 頁面。
這是什麼¶
design-to-h5 是 SkillHub 上由社區用戶 user_5b12983f 發佈的編程類 Skill（分類 dev-programming，版本 1.0.0，來源 community）。它面向「設計/文案素材 → 可瀏覽網頁」這一鏈路：參考頁面佈局截圖、文案文檔（PPT / txt / doc / pdf）、標註了文案的圖片素材，生成帶基礎動畫的響應式 H5。頁面元數據標明 requires_api_key=false，不依賴額外 API Key 即可按 Skill 流程使用。
官方入口：SkillHub 技能頁；API 座標頁：https://api.skillhub.cn/user_5b12983f/design-to-h5。
核心功能¶
以下能力均來自 SkillHub 公開簡介，未在資料中出現的細節不寫。
- 多源輸入：頁面佈局參考圖、辦公文檔文案、帶文案標註的圖片，可作爲生成依據。
- 輸出形態：響應式 H5 網頁；支持 PC 端 UI 界面與移動端頁面兩類場景描述。
- 動效：資料中明確提到圖片淡入淡出、文字呼吸效果等頁面動畫。
- 對話觸發：可用自然語言或下列觸發詞喚起流程——設計轉 H5、截圖轉網頁、文檔生成 H5、圖片標註轉 H5、參考圖生成網頁、多源素材 H5、設計稿還原、平面設計 H5。
安裝與啓用¶
安裝方式以 SkillHub 官方說明爲準：先具備 skillhub CLI，再把技能裝進當前 Agent 能識別的 skills 目錄。
1、檢查或安裝 SkillHub CLI¶
command -v skillhub && skillhub --version
若未安裝，可使用官方安裝腳本（完整安裝含 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、安裝 design-to-h5¶
SkillHub 頁面給出的安裝指引爲：依據 skillhub 安裝文檔，安裝座標 @user_5b12983f/design-to-h5。命令行示例（--dir 須指向當前客戶端的 skills 目錄，否則默認落在 ./skills/ 可能不會被識別）：
skillhub install user_5b12983f/design-to-h5 --dir <你的 skills 目錄>
常用客戶端 skills 路徑（摘自官方安裝文檔，按你實際環境選擇其一）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
安裝完成後，按所用客戶端要求刷新或重啓 Agent，使新 Skill 被加載。
3、在 Cursor 等環境中啓用¶
將技能安裝到對應目錄後，在對話中提及上述觸發詞或說明「根據截圖/文檔生成 H5」，Agent 會按 Skill 包內的 SKILL.md 流程執行。本技能不要求配置 API Key。
典型用法¶
資料未提供逐步截圖教程，可按下述可復現路徑操作。
- 準備素材：一張頁面佈局參考截圖；文案可來自 txt/doc/pdf/PPT 之一；若有帶標註的文案圖片，一併提供。
- 發起任務：在已啓用該 Skill 的對話中發送需求，例如：
使用 design-to-h5：參考我上傳的頁面截圖和這份 doc 文案，生成移動端 H5，圖片淡入淡出，標題文字做呼吸效果。
或使用官方列出的觸發詞，如「設計稿還原」「多源素材 H5」。
3. 迭代：根據生成結果在對話中補充版式、斷點或動效強度；Skill 側會按多輪反饋調整頁面結構。
適用場景與注意¶
適合誰：需要快速把平面參考與文檔文案落成可分享 H5 的前端、運營、獨立開發者；已有設計截圖但不想從零搭腳手架的場景。
限制與注意：
- 能力邊界以 Skill 簡介爲準，複雜交互、後端接口、數據統計等未在資料中承諾，需自行擴展或另選方案。
- 文檔格式支持 PPT / txt / doc / pdf，實際解析質量取決於 Agent 與上傳文件內容，複雜版式建議在對話裏說明優先級（例如以截圖佈局爲準、以 doc 正文爲準）。
- 社區來源（
community），升級與維護節奏跟隨發佈者；安裝前可在 SkillHub 頁查看版本 v1.0.0 與下載、安裝統計（頁面數據會變動，以官網爲準）。 - 安裝時務必使用
--dir指向正確 skills 目錄，避免裝到項目根下未被客戶端掃描的路徑。
結尾¶
design-to-h5 把「參考圖 + 文檔 + 標註圖」收斂成一條 Agent 工作流，輸出帶基礎動效的響應式 H5，且無需 API Key。若你經常在 Cursor 或 Claude Code 裏做落地頁原型，可先按上文安裝 @user_5b12983f/design-to-h5，用觸發詞試一輪素材轉頁。
官方地址：https://www.skillhub.cn/skills/user_5b12983f/design-to-h5
