前言¶

電商、品牌站或 B2B 落地頁裏，產品詳情往往要同時呈現主圖、場景圖和賣點文案，還要兼顧版式與動效。手寫單頁 HTML 或套模板，改一版文案就要動多處結構；純文案 Skill 又不負責頁面呈現。下面介紹 SkillHub 社區 Skill product-detail-tech-web：用圖片與賣點輸入，生成內聯 CSS/JS 的單文件詳情頁，並附帶可視化微調與多格式導出。

這是什麼¶

product-detail-tech-web（座標 @user_5b12983f/prduct-detail-tech-web，當前版本 1.0.1）歸類爲 design-media，來源爲 community，由發佈者 user_5b12983f（SkillHub 頁面標註作者 dragon928）維護。標籤 requires_api_key=false，不依賴額外 API Key。

它根據產品圖片、產品應用場景圖和賣點文案，自動生成 HTML 產品詳情介紹頁；輸出爲單文件 HTML（內聯 CSS/JS），可在瀏覽器直接打開或部署到靜態託管。

官方入口：

• API：https://api.skillhub.cn/user_5b12983f/prduct-detail-tech-web
• SkillHub 頁面：https://www.skillhub.cn/skills/user_5b12983f/prduct-detail-tech-web

核心功能¶

以下能力均來自官方簡介，按模塊歸納。

頁面生成與交付形態¶

• 輸入：產品圖、場景應用圖、賣點文案。
• 輸出：單文件 HTML，樣式與腳本內聯，便於本地預覽或上線。

多產品與輪播¶

• 支持多產品展示：頂部標籤切換。
• 提供三種過渡動畫，用於產品之間的切換。

右側浮動設計控制台¶

生成頁內置控制台，可在不改源碼的前提下調整：

• 動效微調
• 色彩主題
• 背景控制
• 圖片替換
• 圖標自定義
• 文字替換（在線改文案）

設計風格預設¶

內置多種風格方向，官方列舉：簡約商務、科技質感、溫馨家居、時尚潮流、自然健康。

導出¶

支持導出 PDF、JPG、PSD，便於歸檔、印刷流程或交給設計工具繼續處理。

安裝與啓用¶

SkillHub 提供通用安裝說明（https://skillhub.cn/install/skillhub.md）。頁面上的推薦做法是：讓 Agent 按該文檔安裝座標 @user_5b12983f/prduct-detail-tech-web。

1、安裝 SkillHub CLI（若尚未安裝）¶

先檢查是否已有 CLI：

command -v skillhub && skillhub --version

未安裝時，可用官方腳本（完整安裝含默認 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 到當前 Agent 的 skills 目錄¶

安裝時必須用 --dir 指向當前客戶端識別的 skills 目錄，否則默認落在 ./skills/ 且 Agent 可能讀不到。官方文檔給出的常見路徑示例：

在 Cursor 中可執行：

skillhub install @user_5b12983f/prduct-detail-tech-web --dir ~/.cursor/skills/

也可用搜索再安裝（包名以 SkillHub 檢索結果爲準）：

skillhub search product-detail-tech-web
skillhub install <檢索到的包名> --dir ~/.cursor/skills/

安裝後按你所用客戶端要求重啓或刷新 Agent，使 Skill 被加載。

典型用法¶

本 Skill 通過自然語言觸發；官方在簡介中給出了 Use when 與觸發詞，可按下面步驟復現工作流。

1、準備素材¶

• 產品主圖或多角度圖
• 應用場景圖（若有）
• 賣點文案（標題、參數、賣點段落等）

2、在 Agent 中發起任務¶

在對話中說明要生成產品詳情頁，並附上素材與文案。可使用官方列出的觸發表述，例如：產品詳情、產品介紹、商品詳情、詳情頁、多產品展示、產品輪播、導出 PDF、文字替換、product detail 等。

示例提示（結構示意，素材路徑按你本地實際填寫）：

使用 product-detail-tech-web，根據以下素材生成產品詳情 HTML：
- 產品圖：./assets/product-main.jpg
- 場景圖：./assets/scene.jpg
- 賣點文案：（粘貼文案）
風格傾向：科技質感；若有多 SKU，需要頂部標籤切換。

3、預覽與微調¶

用瀏覽器打開生成的單文件 HTML。通過頁面右側浮動設計控制台調整主題、背景、圖片、圖標與文字；多產品時試用頂部標籤與過渡動畫。

4、導出¶

在頁面提供的導出能力中選擇 PDF、JPG 或 PSD，按交付場景選用。

適用場景與注意¶

適合誰¶

• 需要商品詳情頁、產品介紹頁、宣傳頁、產品手冊式單頁的運營、設計協作或獨立開發者。
• 需要多產品對比或輪播展示、且希望輸出可部署 HTML 的場景。
• 需要在成稿後導出 PDF/JPG/PSD 或在線改文案，而不從零寫前端。

明確不適用（官方 NOT for）¶

• 簡單產品圖片編輯（非詳情頁編排）。
• 海報類需求（官方建議用 poster-generator）。
• 純文案寫作且不含圖片輸入。
• 產品詳情頁的代碼工程開發（本 Skill 面向成頁生成與可視化編輯，而非替你搭建電商後端或組件庫）。

使用注意¶

• 座標路徑中爲 prduct（官方 URL 拼寫），安裝與引用時請與 SkillHub 頁面一致，避免裝錯包。
• 社區來源（community），升級前可用 skillhub 查看版本（當前頁面顯示 v1.0.1）。
• SkillHub 頁面統計（截至抓取）：評分 100000，下載 6443，安裝 90；以 SkillHub 實時數據爲準。

結尾¶

product-detail-tech-web 把「圖 + 場景 + 賣點」收斂爲可編輯、可導出的單文件詳情頁，並覆蓋多產品輪播與控制台微調，適合快速出稿與迭代文案。安裝與說明以 SkillHub 爲準：

https://www.skillhub.cn/skills/user_5b12983f/prduct-detail-tech-web