
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 一套完整的互動式範例網站,以虛構 AI 產品為例,包含產品、定價、資源、活動與更新日誌五個彼此串連的頁面。
- 可重複使用的範本與風格指南,鎖定石墨底色、單一薄荷綠強調色、標題斜體襯線字、柔和光暈與程式碼繪製的 App 視窗。
- 頁面庫、圖示規範、框架適配指南與本機驗證腳本,方便你打造並檢查自己的版本。
適合
- 正在推出或改版產品官網的軟體與 AI 團隊。
- 希望定價、說明中心、活動與更新日誌維持一致視覺的創辦人。
- 希望設計直接落地到自己框架、而非停留在靜態稿的開發者。
不適合
- 淺色、繽紛或俏皮風格的品牌——這套視覺仰賴深色底與單一強調色。
- 需要真實金流、登入、搜尋索引或活動報名後端的專案。
- 擁有數百篇文章的內容型部落格或文件網站。
新品上市與 App 成長網頁設計與數位體驗建置 Landing Page建置產品網站風格鎖定成果可編輯轉換導向Bento 網格柔和光暈Dark ModeItalic Serif AccentMint Accent
關於此 Skill

薄荷暗夜軟體產品官網
為軟體或 AI 產品打造一套深色行銷網站:近黑石墨底面、柔和的米白文字、細線邊框與唯一的薄荷綠強調色,每個標題中有一個字詞使用大號斜體襯線字。範例使用虛構產品 Corvel——一支為網路賣家服務的 AI 業務團隊;你替換其中的內容,同時保留讓這套風格一眼可辨的版面構成。
你會得到什麼
五個彼此串連的頁面共用一個固定頂部的導覽列與一個頁尾:
- 產品頁——公告膠囊、兩行漸層標題、下載與瀏覽器 CTA、頭像信任列,以及一個用程式碼繪製的大型 App 視窗,內含 KPI 卡片、營收圖表與關鍵發現提示。下方依序是整合列、三張功能卡片、Bento 網格、附成效數據的襯線體客戶推薦,以及帶光暈的收尾 CTA。
- 定價頁——月繳/年繳切換會重新計算所有價格,三個方案中間一檔以光暈突顯,另有比較表與帳單 FAQ。
- 資源頁——邊輸入邊篩選的說明中心搜尋、六張分類卡片、熱門文章、分級教學與支援卡片。
- 活動頁——附即時倒數與議程的精選線上工作坊、可篩選的近期場次、重播卡片與電子報訂閱表單。
- 更新日誌頁——作用中節點隨捲動移動的版本時間軸、內容豐富的版本卡片,以及「載入較早版本」控制項。
套件中也附有範本、風格指南、頁面庫、圖示規範、框架適配指南與本機驗證腳本。
改成你自己的
先提供產品名稱、一句話品類定位與 Hero 標題句,再挑出要變成薄荷綠襯線體的那個字詞。加入產品實際支援的整合、三項功能、一則數據可信的客戶案例,以及你的方案。如果還沒有說明文章、活動或更新內容,助理可以先草擬明確標示為虛構的內容供你審閱。
告訴助理你使用的框架,或讓它讀取你的專案。沒有偏好時,它會產出 Next.js App Router + TypeScript 專案,把每個頁面變成真實路由、每個重複區塊變成元件。
照片只用於人物:小尺寸圓形頭像,以及 Agent 身分卡上的一張肖像。可以使用自己的團隊照片,也可以在純深色背景、柔和暖光下生成一組風格一致的頭像。
檢查成果
在桌面與手機寬度下逐頁開啟。切換帳單週期、搜尋說明中心、篩選活動、報名一個場次、核准 Bento 中的操作,並載入較早的版本。單一檔案建置請執行內附的驗證腳本,框架建置則執行專案自身的檢查。範例不會傳送任何資料;只在正式網站真正需要的地方串接實際服務。
開始前需要準備什麼
- 你需要提供
- 產品名稱、一句話品類定位,以及 Hero 標題與其中要改為襯線體的一個字詞 · 實際支援的整合、核心功能,以及一則附成效數據的客戶案例 · 各方案的月繳與年繳價格及包含項目 · 選填:說明文章、近期活動與版本更新內容
- 相依項目
- 用於預覽與視覺檢查的新式瀏覽器 · 用於執行內附靜態驗證腳本的 Node.js · 產出網站所用框架的相關工具鏈 · 宿主內建的生圖工具或自有照片,用於團隊與客戶頭像
- 外部費用
- 生成新的人物頭像可能會產生圖片服務商的額外費用。檢視內附範例不需要任何生成。
- 最近實測
- v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…









