前言¶
活動頁、品牌落地頁往往從 Photoshop 出稿。手工切圖、寫佈局、再補入場和點擊動效，週期長，也容易和源文件對不齊。常見做法是前端按圖層自己量尺寸，或用通用切圖工具只產出靜態資源，動效和交互仍要另做一套。
下面介紹 SkillHub 上的社區 Skill psdtoh5-new（座標 @user_5b12983f/psdtoh5-new，版本 1.0.0）。它在 Agent 對話裏提供「PSD → 可交互 H5」的工作流指引，面向需要較快還原設計稿、並帶上基礎動效的場景。
這是什麼¶
psdtoh5-new 是 SkillHub 分類 dev-programming 下的社區來源 Skill，由發佈者 user_5b12983f 維護。官方簡介概括爲：將 PSD 源文件精確還原爲帶動畫的 H5 頁面，並支持 入場動畫、呼吸效果、點擊交互。
該 Skill 標註 requires_api_key=false，安裝後不需要額外配置 API Key。在 SkillHub 頁面上，當前統計爲評分 100000、下載 2452、安裝 81（以頁面展示爲準）。
核心功能¶
以下能力均來自官方 Skill 頁與 API 元數據，未在資料中出現的細節不作延伸。
- 設計稿還原：以 PSD 爲輸入，目標是把視覺結構落到 H5 頁面，而不是隻導出零散圖片。
- 動效：支持入場動畫、呼吸類循環效果，適合 Banner、按鈕等常見營銷組件。
- 交互：支持點擊交互，便於做簡單跳轉或狀態反饋。
- 觸發詞：在對話中可用官方列出的關鍵詞喚起 Skill 相關能力，例如「PSD轉H5」「PSD轉網頁」「Photoshop轉HTML」「psd to h5」「psd轉移動端」「透底圖導出」「設計稿還原」「設計師H5」「PSD動效」等。
安裝與啓用¶
Skill 基於通用 SKILL.md 格式，通過 SkillHub CLI 安裝到當前 Agent 的 skills 目錄；裝錯目錄時 Agent 不會加載，需要按環境選對路徑。
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、安裝 psdtoh5-new¶
官方頁面給出的安裝說明是：依據 SkillHub 安裝文檔，安裝座標 @user_5b12983f/psdtoh5-new。對應 CLI 操作爲（--dir 必須指向當前 Agent 的 skills 目錄）：
skillhub install @user_5b12983f/psdtoh5-new --dir <skills 目錄>
常用客戶端的 skills 路徑示例（來自 SkillHub 安裝文檔）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
安裝完成後，按你所用客戶端的要求重啓或刷新 Agent，使新 Skill 被識別。
3、在 Cursor 等環境中用自然語言安裝¶
若你更習慣讓 AI 代爲安裝，可將官方提示詞發給 Agent：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_5b12983f/psdtoh5-new`。
Agent 應按文檔檢查 CLI、選擇正確的 --dir 並完成安裝。
典型用法¶
資料未提供單獨的命令行子工具示例，典型路徑是：安裝 Skill → 在對話中說明需求並附上 PSD（或說明文件位置）→ 用觸發詞或自然語言描述動效與交互。
可復現的對話起點示例（需你本地已有 PSD 與可寫出的項目目錄）：
- 確認
@user_5b12983f/psdtoh5-new已出現在當前 Agent 的 skills 列表中。 - 發送類似請求：「使用 PSD轉H5，把這個活動頁 PSD 還原成移動端 H5，按鈕要有呼吸效果，主圖入場淡入，點擊 CTA 跳轉鏈接。」
- 按 Agent 在 Skill 指引下的輸出，在本地預覽 HTML/CSS/JS（或 Skill 建議的目錄結構），對照 PSD 檢查圖層與透底資源是否一致。
「透底圖導出」「設計稿還原」等觸發詞可用於強調切圖與視覺對齊；具體導出步驟與目錄約定以 Skill 內 SKILL.md 爲準，本文不臆造腳本名或配置字段。
適用場景與注意¶
適合誰
- 需要把營銷類 PSD 快速落成可演示 H5 的前端或全棧開發者。
- 設計師與開發協作時，希望減少反覆標註尺寸、重複描述動效口徑的情況。
使用上注意
- 社區 Skill，行爲依賴發佈者在 SKILL.md 中寫的流程；複雜業務邏輯、後端接口、數據統計仍需你自己接入。
- 「精確還原」以 Skill 描述爲目標表述，實際效果仍取決於 PSD 規範程度（命名圖層、是否使用智能對象、字體是否可替換等）。
- 安裝統計與評分會隨 SkillHub 頁面更新變化，引用數據時以官網爲準。
結尾¶
psdtoh5-new 把「PSD 靜態稿 → 帶入場、呼吸與點擊的 H5」收攏到 Agent Skill 工作流裏，適合作爲設計稿落地的前幾步加速器。需要安裝或查看詳情時，可訪問 SkillHub 頁面：
- 技能頁：https://www.skillhub.cn/skills/user_5b12983f/psdtoh5-new
- API 元數據：https://api.skillhub.cn/user_5b12983f/psdtoh5-new
