前言¶
在 Agent 裏寫業務代碼和寫「能給人看的頁面」往往是兩件事：前者要可維護、可測試，後者還要版式、動效和演示節奏。自己從零搭 HTML/CSS/JS 原型或 Deck，常常卡在審美和結構細節上；讓模型隨便吐一段 HTML，又容易像文檔頁而不是設計稿。
下面介紹 SkillHub 社區技能 claude風格的html和deck設計skill（座標 @user_c4891115/jacobk-claude-design-html）。它把任務收窄到「用 HTML+CSS+JS 做高質量視覺產物」，並在說明裏明確不承接純文檔或一般性代碼開發。
這是什麼¶
一句話定位：面向 HTML 視覺交付的設計向 Skill，覆蓋原型、幻燈片、動效、營銷頁、設計系統、儀表盤等場景。
- 維護方：SkillHub 發佈者
user_c4891115，來源標註爲 community（社區）。 - 分類：
design-media。 - 當前版本：
1.0.0（以 SkillHub 頁面爲準）。 - 依賴：標籤
requires_api_key=false，不強制額外 API Key。
官方入口：
- API/資源地址：
https://api.skillhub.cn/user_c4891115/jacobk-claude-design-html - SkillHub 展示頁：
https://www.skillhub.cn/skills/user_c4891115/jacobk-claude-design-html
核心功能¶
以下能力均來自 SkillHub 簡介原文，未在頁面單獨展開實現細節的部分不展開臆測。
- 交互式原型 / App Mockup：用 HTML 表達界面結構與交互示意。
- 幻燈片 / PPT / Deck：以網頁形式組織演示頁，而非 Office 文件本身。
- 動畫 / Motion Design：在 HTML 場景中處理動效需求。
- Landing Page / 營銷頁：面向對外展示的落地頁視覺。
- 設計系統 / UI Kit：組件與樣式層面的 HTML 化表達。
- 數據可視化儀表盤：圖表與看板類 HTML 頁面。
- 泛化場景：任何需要用 HTML+CSS+JS 完成的精美視覺作品。
觸發關鍵詞（官方列出）：原型、mockup、prototype、幻燈片、deck、slides、landing page、設計、design、UI、動畫、animation。
明確不適用：純文檔編寫，或一般意義上的代碼開發任務。
安裝與啓用¶
Skill 基於通用 SKILL.md 格式分發。安裝方式以 SkillHub 官方說明爲準。
方式一：讓當前 Agent 按文檔安裝¶
將下面意圖發給支持 Skill 的 Agent（SkillHub 頁面提供的標準話術）：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_c4891115/jacobk-claude-design-html`。
Agent 會按 SkillHub 安裝與優先源配置 檢查 CLI、選擇 skills 目錄並執行安裝。
方式二：本機使用 skillhub CLI¶
先確認是否已安裝 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
安裝技能時必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認落在 ./skills/ 可能不會被識別。官方文檔給出的常見路徑示例：
| 環境 | skills 目錄（示例） |
|---|---|
| Claude Code | ~/.claude/skills/ |
| Cursor | ~/.cursor/skills/ |
| Codex | ~/.codex/skills/ 或項目下 .agents/skills/ |
安裝命令形式（將 <skills 目錄> 換成你當前環境的路徑）：
skillhub install user_c4891115/jacobk-claude-design-html --dir <skills 目錄>
也可先搜索再安裝：
skillhub search jacobk-claude-design-html
skillhub install user_c4891115/jacobk-claude-design-html --dir <skills 目錄>
裝到正確目錄後，按你所用 Agent 的說明刷新或重啓，使 Skill 被加載。
典型用法¶
官方頁面未附帶獨立代碼倉庫示例；可復現的用法是：在對話中用自然語言描述視覺目標，並帶上簡介中的觸發詞，讓 Agent 在加載該 Skill 後生成單文件或多文件 HTML 產物。
示例話術（可按場景改寫）：
- Deck：「用 HTML 做一份 8 頁的 product deck，風格剋制、適合投屏，關鍵詞：deck、slides。」
- Mockup：「做一個移動端 App mockup 的單頁 HTML prototype，包含主導航和列表頁狀態。」
- Landing Page：「寫一版 SaaS landing page，強調主標題、三列特性、底部 CTA，輸出完整 HTML+CSS。」
- 動效：「在現有頁面結構上加 section 進入動畫，animation 要輕量、不依賴重型框架。」
經過上面的步驟，產物通常是可直接在瀏覽器打開的 HTML；若你使用 Cursor 等 IDE，可讓 Agent 寫入項目內指定路徑再本地預覽。
適用場景與注意¶
適合誰
- 需要快速出 可演示、可截圖、可投屏 的 HTML 視覺稿，而不是先上 Figma 再手寫靜態頁的團隊或個人。
- 產品、設計、前端協作時，用 Agent 統一「Claude 系」審美與結構習慣（技能名稱即指向該風格取向，具體規則以 Skill 內 SKILL.md 爲準）。
限制與注意
- 任務邊界寫在簡介裏：不要指望它寫長篇技術文檔或替代後端/業務邏輯開發。
- SkillHub 統計（頁面展示）：評分約 100000，下載 1402，安裝 14；數據隨平臺更新，引用時以頁面爲準。
- 安裝路徑錯誤是常見坑：務必
--dir到當前 Agent 的 skills 目錄，見上文第三節。
結尾¶
claude風格的html和deck設計skill 把 Agent 能力聚焦在 HTML 視覺交付上，從 mockup、deck 到 landing page 和儀表盤，用統一 Skill 約束輸出形態。若你的工作是「先要看得見的稿」，可以在 SkillHub 查看詳情並安裝：
https://www.skillhub.cn/skills/user_c4891115/jacobk-claude-design-html
