可運作的 HTML，而不是模型圖
打開檔案、點一點、部署上線。中間不需要設計工具。
Landing Page 與產品網站 · 作品集與個人網站 · 網路商店與管理後台
給 AI Agent 用的網頁設計 Skills
Agent 會做成可運作 HTML 的前端設計範本：完整的登陸頁、作品集和 Dashboard，或單一的 Hero、價格或使用者評價區塊。
支援
先挑一個網頁 Skill
前端設計 Skills 能做什麼
這裡的每個 Skill，最後都會產出一個能在瀏覽器裡開啟的檔案。
完整網站或單一區塊
多頁網站，或單一的 Hero、使用者評價或圖表區塊，直接放進你現有的頁面。
預設就是響應式
版面在交付前都經過桌面和手機寬度的測試。
依角色尋找網頁 Skills
每個角色頁面都挑選了最適合那份工作的 Skills。
如何用 Skill 做網頁
在 Claude Code、Codex 或 Cursor 裡三個步驟完成，不需要設計軟體。
- 1
貼上安裝 Prompt
把安裝 Prompt 複製到你的 Agent 裡，或執行下面這行指令。Skill 會放進 Agent 的 skills 資料夾。
npx skillry-cli@latest install bs-beacon-saas-landing - 2
用斜線呼叫
輸入斜線和 Skill 名稱，再用白話說出你想要什麼。
/bs-beacon-saas-landing 根據這份需求、文案和品牌套件，做一個響應式登陸頁。 - 3
檢查後交付
打開它做好的檔案，在同一個對話裡要求修改，然後發布或交付。
index.html
為什麼要用網頁 Skill，而不是直接寫 Prompt？
Prompt 能生成一個頁面；Web Skill 會補上產品事實依據、響應式互動、驗證和可維護的交付。
| 比較項目 | 直接寫 Prompt | 用 Skill |
|---|---|---|
| 內容 | 用填充文字套進一個常見範本 | 依照真實受眾、產品資訊和證據來建構頁面 |
| 互動 | 畫出只是看起來像樣的按鈕和分頁 | 把真實的狀態、導覽和錯誤處理都串好 |
| 交接 | 回傳看起來已經完成的程式碼 | 沿用你的技術堆疊、列出相依套件，並檢查手機和鍵盤操作 |
用網頁設計 Skill 可以做出什麼
- 01新品上市或活動的 Landing Page把你的文案和圖片做成段落清楚、附報名或購買按鈕的頁面。
- 02可點擊的原型做出真實的畫面和按鈕，讓團隊在正式開發前就能試用產品。
- 03Dashboard把數字、表格和圖表排得在任何螢幕上都好讀。
- 04可重複使用的頁面元件按鈕、卡片和版面都是同一種風格，新頁面也會和現有頁面一致。
如何挑選網頁設計 Skill
- 1挑一個適合你產品的風格SaaS、作品集、商店或活動頁面：選一個符合你正在打造之物的風格。
- 2試試線上範例每個 Skill 頁面都有可以點擊瀏覽的範例網站，桌面和手機版都能看。
- 3下載下來試試看把它裝進你的 Agent，用你自己的內容做一個頁面。幾分鐘內就能知道合不合適。
所有 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 寫明會配合你的專案調整。否則它交付的是獨立頁面，整合要由你自己規劃。
我拿到的是可編輯的 HTML，還是只有預覽？
是可編輯的程式碼。Agent 會替你寫好 HTML 檔案，詳情頁的 You get 清單會列出確切的檔案、素材和執行步驟。
金流和數據分析都串接好了嗎？
沒有，除非詳情頁有寫。設計裡的結帳按鈕或圖表只是介面，要接上你自己的服務才會運作。
頁面上線前我該檢查什麼？
把每個控制項都點一遍，再分別用桌面和手機寬度、只用鍵盤、開啟「減少動態效果」時試用頁面。也要檢查長文字、錯誤狀態，以及 Skill 承諾的匯出或離線功能。