Creem 2.0
AI 收款平台大改版,首頁用終端機情境劇秀「一鍵開店」拿下 PH 冠軍
- 1
首頁用終端機、結帳、通知三個畫面說一個自動開店的故事
開發者工具官網 - 2
功能區塊用擬真 UI 截圖示範操作,不用抽象插畫
SaaS 官網功能頁 - 3
定價卡加一句「賺了才付費」,淡化費率百分比的壓力感
訂閱制定價頁
更多細節
為什麼紅
Creem 是主打「AI 建站者專用」的收單平台(Merchant of Record),2026 年 9 月 17 日的 2.0 改版登上 Product Hunt 當日排行榜第一名。它的口碑很大一部分來自獨立開發者社群:官網直接引用 Marc Lou、Tibo、Florin Pop 等知名 indie hacker 在 X 上的真實推文當作見證,而不是自己寫的行銷詞,這種「同溫層背書」在 Product Hunt/Hacker News 的開發者受眾裡特別有說服力。產品本身也踩中話題:讓 AI agent 直接透過 CLI/MCP 建立商品、開結帳連結、處理退款,呼應了「AI 自動開店做生意」這波討論。
版面
整頁是單欄式的全寬區塊由上往下堆疊(無側邊欄),但 Hero 區不是傳統文字+大圖,而是三個懸浮卡片組成一齣小情境劇:左邊是終端機視窗(顯示打指令建立商品的過程)、中間是結帳視窗 UI(顯示產品與價格)、四個角落飄著 Slack 風格的通知氣泡,三者疊在一起說明「一個指令自動生完成開店到收到通知」的流程。往下依序是三欄功能卡片區、顧客 Logo 橫向陳列、Billing 功能用三個並排的迷你控制面板截圖(信用額度包、用量計費、自訂計量單位)呈現、全球收款用四欄圖示+文字說明、聯盟行銷區塊有真實數據儀表板截圖(分潤比例、短連結點擊數)、文末重複一次「終端機+結帳+通知」情境劇呼應開頭、雙欄手機截圖展示 iOS/Android App、單張定價卡、橫向排列的 X 推文見證卡、FAQ 問答列表,最後是大字 CTA 收尾。頂部導覽列固定不動,內容含 Pricing、Customers、Blog 與「Get started」按鈕。
主題與配色
走黑白極簡的金融科技風,背景為白色 #FFFFFF,主要文字、Logo 與線條圖示為黑色 #000000,全站沒有大面積的彩色裝飾色。所有示意畫面(終端機、結帳、儀表板)都做成深色卡片(接近 #0A0A0A 的深黑)浮在白底上,靠明暗對比而不是彩色來製造層次,圖示則統一用細單線條(line icon)風格,搭配大量留白與置中排版,整體給人「工程師系」的乾淨可信感,只有嵌入畫面中的假資料(如金額、圖表)偶爾帶一點色彩。
互動設計
- 首頁與文末各出現一次同一組「終端機下指令、結帳視窗、Slack 通知氣泡」的組合畫面,用重複敘事而非文字條列來說明產品怎麼運作
- Billing 區塊把「信用額度包」「用量計費」「自訂計量單位」三種收費模式各自做成一張迷你控制面板截圖並排陳列,方便一眼比較
- 定價區有「One-time payments / Subscriptions」的分頁切換,同一張定價卡依所選分頁顯示不同費率情境
- 顧客見證直接嵌入真實 X 貼文卡片(含頭像、帳號、原文連結),不是重新排版過的引言文字
- 聯盟行銷區塊用真實感的儀表板截圖(分潤比例圓餅、短連結點擊/結帳轉換數字)取代抽象說明圖
其他可以學的
- 推薦見證直接嵌入真實社群貼文卡片,附頭像與帳號連結任何產品口碑區
- FAQ 用一句話搶答「跟同類有何不同」等疑慮句產品官網 FAQ 區
