
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 一個自足的網站檔案,任何瀏覽器都能開啟並離線使用,字型與圖片皆已內建;若你有框架專案,則以你自己的技術堆疊建置。
- Hero 中可實際操作的產品視窗,加上完整首頁:搭配墨染作品的理念宣言、運作方式、功能 Bento、附來源的數據、推薦、具席次增減的定價與 FAQ。
- 具表單驗證的附屬頁面:註冊、登入、聯絡業務、可篩選的更新日誌、資安、徵才、隱私權、服務條款與找不到頁面,支援淺色與深色模式。
適合
- 想要一個經過深思熟慮的發表網站、而不是浮誇漸層範本的 SaaS 創辦人與產品團隊。
- 能把產品視窗改成總覽、日誌與查詢分頁的開發者工具。
- 能在視窗中展示客戶入口或預約畫面、並把更新日誌改成專欄的服務型企業。
不適合
- 真正的註冊、付款或訊息寄送;表單只會誠實顯示示範用的確認畫面。
- 想要繽紛、大量插畫或紫色調的品牌;這個風格只保留一個墨藍強調色。
- 打造產品本身;這個 Skill 製作的是行銷網站,不是 App 或其管理後台。
新品上市與 App 成長網頁設計與數位體驗建置網頁建置 Landing Page風格鎖定成果可編輯快速產出編輯風襯線細線邊框暖色紙張繪畫感天空水墨
關於此 Skill

雜誌墨韻登陸頁為軟體產品打造沉穩、以字體為主角的發表網站:暖色紙感上的襯線標題、Hero 背後的淡彩繪天空,以及就在標題下方、可實際操作的產品視窗。範例是 Petrichor,一款為創辦人設計的虛構會議記憶 App,包含完整首頁,以及註冊、登入、聯絡、更新日誌、資安、徵才與法律頁面。

你會得到
- 一個自足的網站檔案,任何瀏覽器都能開啟並離線使用,字型與圖片皆已內建。如果你已有框架專案,設計會改為以你自己的技術堆疊建置。
- 以產品本身用語繪製、訪客可實際使用的產品視窗:在 Recap、Transcript 與 Ask 之間切換、勾選待辦追蹤、跳到逐字稿中的某個時刻、提問並取得附出處的回答。
- 首頁包含搭配墨染習作的理念宣言、運作方式說明、細線 Bento 功能區、附來源的數據、可切換的推薦、具計費週期切換與席次增減的定價、FAQ,以及黃昏天空的結尾 CTA。
- 實際可用的附屬頁面:具驗證的註冊與登入、聯絡業務、可篩選與搜尋的更新日誌、資安、徵才、隱私權、服務條款與找不到頁面。
- 淺色與深色主題都經過完整設計,動態效果只播放一次且低調,並會尊重減少動態效果的設定。

使用方式
- 提供產品名稱、它的功能與目標使用者、你的觀點、三到六項功能、具實際限制的方案、FAQ 答案,以及可使用的數據或客戶引言。缺少的文案會以品牌語氣撰寫,並列出清單讓你確認。
- 讓 Agent 用它的圖像工具,以同一套雨後洗滌般的色調生成天空、墨染習作、故事照片與人像,或寄來你自己的照片。沒有圖像工具時,頁面會改用柔和的彩繪風背景,並以姓名縮寫取代照片。
- 在桌機與手機上以淺色與深色模式開啟每一頁,試試產品視窗、定價與表單,再提出修改。

字體採用 Newsreader、Geist 與 Geist Mono,皆內嵌於檔案中。圖像生成使用你的 Agent 本身的圖像工具,可能產生其使用費用。
開始前需要準備什麼
- 你需要提供
- 產品名稱、它的功能與目標使用者,以及你的觀點 · 三到六項功能、具實際限制的方案與 FAQ 答案 · 可使用的數據與客戶引言,或同意先撰寫暫代內容供你確認
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本,用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線,以便下載一次字型並內嵌 · Agent 需具備圖像工具,用於生成天空、墨染習作與人像(選用;頁面有無照片的備用方案)
- 外部費用
- 天空、墨染習作、故事照片與人像會用你的 Agent 本身的圖像工具生成,該工具可能依用量收費。沒有圖像工具時,頁面會改用柔和的彩繪風背景,並以姓名縮寫取代照片。瀏覽範例完全免費。
- 最近實測
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…









