一句 Prompt 做出 Landing Page
描述你的產品就好。Skill 裡已經有 Hero、功能網格、價格和 FAQ，Agent 只要把你的文案寫進行得通的版面。
登陸頁或完整網站 · 給現有網站加一個區塊 · 作品集或履歷
給 AI Agent 用的網頁模板 Skills
每個 Skill 都是一套驗證過的網站設計。安裝後描述你的產品，Claude Code、Codex 或 Cursor 就會把登陸頁、作品集或完整網站做成可運作的 HTML。
支援
先挑一個網頁設計 Skill
網頁設計 Skill 能為 Agent 帶來什麼
這裡每個 Claude 設計 Skill 都是一個資料夾，裝著說明、版面參考和檢查項目。你要 Agent 做頁面時它就會載入，設計上的決定都已經做好了。
保持一致的模板
作品集、SaaS 網站和線上商店，每新增一頁，字體、間距和動態都保持一致。
以程式碼交付的網頁設計
每次執行都會產出一個可以開啟、編輯和部署的 HTML 檔案。Claude Code、Codex 和 Cursor 讀的都是同一份 SKILL.md。
依角色尋找網頁設計 Skills
每個角色頁面都挑選了最適合那份工作的 Skills。
如何用 Skill 做網站
在 Claude Code、Codex 或 Cursor 裡三個步驟完成，不需要設計軟體。
- 1
貼上安裝 Prompt
把安裝 Prompt 複製到你的 Agent 裡，或執行下面這行指令。Skill 會放進 Agent 的 skills 資料夾。
npx skillry-cli@latest install bs-data-visualization-activity-calendar - 2
用斜線呼叫
輸入斜線和 Skill 名稱，再用白話說出你想要什麼。
/bs-data-visualization-activity-calendar 根據這份需求、文案和品牌套件，做一個響應式登陸頁。 - 3
檢查後交付
打開它做好的檔案，在同一個對話裡要求修改，然後發布或交付。
index.html
為什麼要用網頁設計 Skill，而不是直接寫 Prompt？
| 比較項目 | 直接寫 Prompt | 用 Skill |
|---|---|---|
| 版面 | 每次執行都重新發明 | 驗證過的 Hero、網格和頁尾 |
| 字體排印 | 預設系統字體 | 選定的字級層級與字體搭配 |
| 一致性 | 每一頁看起來都不一樣 | 每一頁都遵循同一套系統 |
| 產出 | 模型寫什麼就是什麼 | 檢查過、打開就能用的 HTML 檔案 |
所有 Skills，一個方案
本頁所有 Skill 都能安裝，之後新增的也包含在內。隨時可以取消。
隨時取消
月繳
US$9.99 / 月
完整 Premium 存取權，按月計費。
- 存取所有 Premium Skills
- 從網頁或 CLI 安裝
- 安全的瀏覽器授權 CLI 存取
- 持續的 Skill 更新
- 包含新推出的 Premium Skills
- 需要時可隨時取消
每年省下 34%
最受歡迎年繳
US$79 / 年
以更划算的年費取得完整 Premium 存取權。
- 存取所有 Premium Skills
- 從網頁或 CLI 安裝
- 安全的瀏覽器授權 CLI 存取
- 持續的 Skill 更新
- 包含新推出的 Premium Skills
- 需要時可隨時取消
一次付清 · 創始價格
創始優惠創始終身版
US$169 一次付清
創始價格——將隨 Skill 庫擴充逐步調漲。
- 存取所有 Premium Skills
- 從網頁或 CLI 安裝
- 安全的瀏覽器授權 CLI 存取
- 持續的 Skill 更新
- 包含新推出的 Premium Skills
- 沒有訂閱或續訂帳單
可隨時取消。已付款項 恕不退款.
網頁設計 Skills 常見問題
什麼是網頁設計 Skill？
一個資料夾，裡面有 SKILL.md、版面參考和檢查項目，教 AI Agent 掌握一種成熟的網站設計。你要它做頁面時，它就會載入。
Claude Code 能用 Skill 做網站嗎？
可以。把 Skill 裝進 Claude Code，描述你要的網站，它就會依照 Skill 的版面寫出 HTML。Codex 和 Cursor 也是一樣的方式。
我拿到的是 HTML、React 還是 Figma 檔案？
大多數網頁設計 Skill 都交付可運作的 HTML 檔案。有些會在詳情頁註明 Next.js 或元件輸出；沒有任何一個提供 Figma 檔。
這些網站範本免費嗎？
有一部分是。免費的 Skills 會標示 Free；其餘包含在 Pro 方案中，也可以單獨購買。