
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 一個完整的 SaaS 網站,以單一獨立 HTML 檔案交付,可在任何瀏覽器離線開啟:登陸頁,加上註冊、登入、洽詢業務、更新日誌、服務狀態、法律條款與 404 頁面
- 以你產品自身的用語重建的即時產品主控台,具備時間範圍切換、圖表提示、即時計數器與事件時間軸,取代靜態截圖
- Geist 字體、一道藍色光束、溫暖中性色版面、完整的淺色與深色主題,以及具驗證、載入與成功狀態的表單;在你自己的專案中,則以你的技術架構呈現相同設計
適合
- 這週就需要一個具備定價、註冊與更新日誌、看起來可信的 SaaS 行銷網站的創辦人與獨立開發者
- 希望以可運作的介面展示產品本身的開發者工具、監控、API 與基礎架構產品
- 想直接在接近完成的頁面上反覆調整定位文案的產品行銷人員
不適合
- 需要 CMS、部落格或真實帳號的網站:註冊與聯絡表單只在頁面上確認,串接後端需要你自行處理
- 必須遵循既有設計系統的品牌:溫暖中性色、單一藍色光束與漸層標題就是這套設計的核心
- 以攝影為主的消費或生活風格品牌:圖片僅限於客戶故事、使用者評價、一張編輯風格照片與一張團隊照
新品上市與 App 成長網頁設計與數位體驗建置 Landing Page風格鎖定成果可編輯快速產出極簡主義發光點綴漸層字體柔和中性色
關於此 Skill

描述你的產品,就能得到一個完整的 SaaS 行銷網站:溫暖的中性色版面、一道柔和的藍色光束、漸層標題,並以即時主控台而非截圖來展示你的產品。網站以單一獨立檔案交付,可在任何瀏覽器開啟、離線也能使用。
![]()
你會得到
- 登陸頁包含功能 Bento、即時產品主控台、分頁式導覽、設定步驟、客戶故事與使用者評價、附比較表的定價、資安、FAQ,以及收尾的 CTA
- 註冊、登入、洽詢業務、更新日誌、服務狀態、隱私權、服務條款與 404 頁面,全部相互連結且可運作
- 完整的淺色與深色主題、沉穩的捲動顯現效果,對偏好減少動態的訪客會自動關閉動畫
- 即時驗證並顯示載入與成功狀態的表單,以及更新日誌的篩選與搜尋
- 若在你自己的專案中使用,會以你的技術架構把相同設計建構成元件
![]()
使用方式
- 提供產品名稱、產品用途、方案,以及任何可使用的客戶或引言;粗略的筆記就足夠
- 讓它挑選區塊與頁面,或指定你想要的;你沒提供的內容會先草擬並列出清單供你確認
- 在瀏覽器中開啟完成的檔案,再用一般口語提出文案、區塊或定價的修改需求
![]()
照片由你的 Agent 內建的生圖工具產生,可能產生該工具的使用費用;若沒有生圖工具,頁面會改用姓名縮寫與產品卡片。字型與圖片皆已內嵌,因此完成的檔案不會發出任何網路請求。
開始前需要準備什麼
- 你需要提供
- 產品名稱、產品用途與目標對象、4 到 6 項功能,以及 2 到 4 個具真實限制的方案(粗略筆記即可) · 選填:可使用的客戶名稱、引言、數字與照片
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本,用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線,以便下載一次字型並內嵌 · 選用:Agent 內建的生圖工具,用於產生客戶、編輯風格、使用者評價與團隊照片
- 外部費用
- 照片由你的 Agent 內建的生圖工具產生,可能產生該工具的使用費用。沒有生圖工具網站依然能建置:使用者評價改用姓名縮寫,編輯風格照片改為產品卡片,團隊照則會移除。
- 最近實測
- v1.0.4 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…








