Skillry 嚴選
Harbor SaaS 產品套組v1.0.2
使用這個 Skill：建置網頁。
5.033 次下載0 個喜歡1 次收藏
$4.99
購買這個 Skill 可以得到什麼？完整的 SaaS 產品原型，看起來就像一個真實、已完成的產品：行銷登陸頁、定價、登入、可操作的登入後工作區與管理後台，另有客戶案例、公開更新日誌與法律頁面。所有畫面共用一套瓷白與青綠的設計，以及同一個即時示範狀態，在某處消耗的點數或變更的方案，會同步反映到其他所有地方。產品視窗以程式碼繪製，整套產品提供深淺色主題。
更新於 2026年10月3日
效果預覽
相似的 Skills
查看所有 Skills
你將獲得
- 登陸頁、定價、登入、工作區與管理後台畫面，另有客戶案例、更新日誌、法律與 404 頁面，全部設有路由並共用同一個即時示範狀態
- 為你的核心物件打造的可操作工作區：撰寫、用點數讓 AI 起草、排程、管理訂閱者，並看到每個操作出現在後台動態中
- Instrument Sans 與 Geist Mono 字體、青綠色膠囊按鈕、柔和卡片、指令面板、深淺色主題與依角色配置的照片，全部收在單一離線檔案中
適合
- 在任何後端存在之前，就需要讓整個產品看起來真實的 SaaS 創業提案者
- 要帶利害關係人或投資人走過行銷、App 與後台的產品經理
- 想讓公開網站與登入後產品使用同一套設計系統的獨立開發者
不適合
- 具備真實驗證、付款或資料的正式上線 App；登入、結帳與點數都是前端模擬
- 單一登陸頁；如果你只需要行銷頁面，選擇登陸頁類的 Skill 會更合適
- 大膽鮮豔的消費品牌；harbor 是沉穩、以產品為主的風格，只有一個青綠色強調色
新品上市與 App 成長網頁設計與數位體驗建置網頁建置 Landing Page風格鎖定成果可編輯快速產出瓷器青綠膠囊介面柔和浮起卡片視窗外框樣機明暗 UI
關於此 Skill
描述你的 SaaS，一次拿到完整的產品介面：行銷網站、定價、登入、建立核心物件的工作區，以及掌握營運狀況的管理後台。所有畫面共用一套瓷白與青綠的設計與同一個即時示範狀態，在 App 中的操作會同步出現在後台。全部內容打包成單一檔案，任何瀏覽器都能離線開啟。
你會得到
- 登陸頁，包含產品視窗、運作方式分頁、功能 bento、客戶案例、引言、FAQ 與註冊橫幅
- 附計費週期切換、方案卡片、點數包與比較表的定價頁
- 登入後的工作區，具備撰寫、排程、訂閱者與設定功能，以及附營收圖表、區間切換與可排序表格的管理後台
- 客戶案例、公開更新日誌、法律與 404 頁面、指令面板，以及深淺色主題
- 字型與照片皆已嵌入，頁面不發出任何網路請求
使用方式
- 告訴 Skill 你的產品名稱、使用者在其中建立什麼、三到六項功能、定價架構，以及營運上關注的數字。
- 它會依你的核心物件重新命名工作區、面板與操作，草擬缺少的文案，並列出讓你確認。
- 開啟檔案、登入示範帳號、執行主要操作、查看管理後台，再用一般說法提出修改。
新照片來自 Agent 的圖像工具，可能有其自身的使用費用。
開始前需要準備什麼
- 你需要提供
- 產品名稱與其核心物件，也就是使用者建立或管理的東西 · 三到六項功能、定價架構，以及營運上關注的三或四個數字 · 一則客戶案例；若網站中出現真實人物，請提供真實照片
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本，用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線，以便下載一次字型並內嵌 · Agent 中的圖像工具，用於登入頁、客戶案例與人像照片；若你提供自己的照片則為選用
- 外部費用
- 你沒有提供的照片會由 Agent 自有的圖像工具生成，可能產生該工具的使用費用。產品視窗以程式碼繪製，成品檔案不發出任何網路請求。檢視範例不需任何費用。
- 最近實測
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…