

你會得到
- 一個可離線運作、也能放入 iframe 的獨立定價區塊
- 兩到四張方案卡片,附標章、功能清單、推薦方案緞帶與各方案按鈕
- 月付與年付切換,附省錢提示與年付計費說明
- 亮色與深色主題,以及針對完成檔案的靜態檢查工具
- 可選:報價後由 PopNow 製作並去背的貼紙插圖
適合
- 獨立應用程式、創作者工具與小型 SaaS 產品
- 會員制、課程或電子報的方案
- 希望語氣親切、不拘泥的發表頁
不適合
- 功能比較表很長的企業價目表
- 語氣正式或極簡嚴謹的品牌
怎麼用
在 Claude 或 ChatGPT 裡
用 PopNow 的技能「手繪風定價區塊」(pricing-page-section)幫我做這件事:為 Brewlog(一款咖啡品飲日誌)做定價:免費版、Barista 每月 4 美元或每年 40 美元,給咖啡館的 Roastery 每月 12 美元或每年 120 美元。推薦 Barista。
在程式 Agent 裡
/popnow-pricing-page-section 為 Brewlog(一款咖啡品飲日誌)做定價:免費版、Barista 每月 4 美元或每年 40 美元,給咖啡館的 Roastery 每月 12 美元或每年 120 美元。推薦 Barista。
接著試試
報價一張用我們強調色繪製的手沖壺貼紙,並將它去背。
改成 Svelte 元件,並讓網站本身的主題切換控制深色模式。
需要準備
- 方案名稱、月付與年付價格、限制與功能
- 你推薦哪個方案,以及每個按鈕要連到哪裡
- 關於試用、退款或取消的一句誠實說明
- 可選:貼紙插圖用的 PopNow API 金鑰
類似技能
查看全部 →- 網頁
3D 頭像製作器
+25在瀏覽器裡捏出可愛的絨毛玩偶風 3D 角色,存成透明背景 PNG 或 3D 網頁。
- 網頁
日曆熱力圖
+25把一整年的每日活動畫成深淺不一的日曆格,附連續天數、總計與鍵盤操作。
- 網頁
AI SaaS 登陸頁
+25溫暖的沙色紙張,細線軌道與斜線溝槽環繞一個可操作的看板,助手在上面規劃任務。
- 網頁
動態 Hero 主視覺區塊
+25登陸頁的首屏主視覺:標題裡有一個輕輕輪替的詞,搭配兩顆按鈕和寬幅圖片框。
- 網頁
飲料品牌網站範本
+25明亮的飲品或零食品牌網站,單一檔案內含商店、組合箱、經銷點地圖與示範結帳。
- 網頁
Shader 首屏設計公司網站
+25首屏是即時的橘色熱流 Shader,底部固定一句宣言,搭配膠囊導覽列與錯落的個案研究格。
- 網頁
深色 SaaS 登陸頁
+25深色、動態豐富的軟體產品行銷網站,以單一獨立 HTML 檔交付。
- 網頁
設計師作品集網站
+25六張微傾的卡片圍繞著淡出的標題,灰底上一張紅色人像卡,搭配編輯風格的個案研究。
- 網頁
工程師作品集網站
+25給工程師的深色個人網站,含專案案例、文章、演講、履歷與聯絡表單。
- 網頁
編輯風 SaaS 網站
+25深藍的分割首屏,五行襯線標題旁是紀實照片,斜切色帶與一個鈷藍強調色。
- 網頁
自由接案設計師網站
+25大膽的一人工作室網站,販售固定報價的方案,含方案頁、案例研究與需求表單。
- 網頁
玻璃擬態網站範本
+25近黑底片上的磨砂玻璃膠囊,巨大的襯線標題中有一個斜體字,外加電子郵件訂閱。
- 網頁
硬體產品網站
+25超大的細線型號名稱落在銀色攝影棚照片上,搭配磨砂規格卡、等比例的產品陣容與硬體 bento 版面。
- 網頁
互動式系統架構圖
+25以經過檢查的 JSON 模型產生、可離線點擊的系統架構圖,每個方塊都附上依據。
- 網頁
互動網格首屏
+25近黑的細線網格,會朝游標彎曲,並在每次點擊時向外擴散一圈發光的環。
- 網頁
知識圖譜瀏覽器
+25把專案筆記變成可離線搜尋的圖譜,每一項說法都能連回原始出處那一行。
- 網頁
KPI 儀表板範本
+25暖紙底上的四個 KPI 方塊附變化標籤,搭配發光折線圖、拆解表格與目標進度條。
- 網頁
從 AI 樣稿做登陸頁
+25先看三套完整頁面的設計稿、挑一套,你的 Agent 就會把它做成乾淨、響應式的程式碼。
- 網頁
雜誌網站範本
+25印刷品質的雜誌網站,含文章、主題、小型商店與訂閱,全部在一個 HTML 檔裡。
- 網頁
粒子動畫首屏
+25暖紙色底上的文案,旁邊是一顆轉動的墨色與青綠色點狀球體,會依每個概念變形,並在捲動時散開。
- 網頁
個人品牌網站
+25一張羽化進溫暖紙面的人像,上方是細線框,兩側是輕與重的宣言。
- 網頁
寵物用品網站範本
+25可運作的寵物用品店,單一 HTML 檔案內含商品目錄、規格選項、購物袋、補貨規劃與示範結帳。
- 網頁
Podcast 網站範本
+25可播放的 Podcast 網站:可播放的首屏、單集檔案庫、來賓頁,以及切換頁面時仍會持續播放的播放器。
- 網頁
電影感產品上線頁
+25電影打光的近黑頁面:襯線標題卡漂浮在流動的光中,搭配信箱式夜景與預約表單。
- 網頁
研究論文網站
+25論文的專案頁,含可互動的圖一、結果、研究限制與一鍵引用。
- 網頁
後台管理儀表板範本
+25可實際操作的後台主控台,含圖表、表格、看板與行事曆,以單一離線 HTML 檔打造。
- 網頁
SaaS 登陸頁範本
+25沉穩、明亮的軟體產品行銷網站,附可操作的產品主控台、定價與註冊。
- 網頁
手帳風作品集網站
+25由紙本物件構成的多頁線上履歷,附專案案例與可列印的履歷。
- 網頁
球鞋商店網站範本
+25完整的鞋類或服飾商店,含商品目錄、商品頁、購物車與示範結帳,全部在一個 HTML 檔裡。
- 網頁
運動俱樂部網站範本
+25俱樂部、健身房或工作室網站,單一檔案內含課表、教練頁、會員方案、場地圖與預約。
- 網頁
客戶見證牆區塊
+25由客戶評語組成的瀑布式或緩慢飄移的見證牆,只放已取得當事人同意的評語。
- 網頁
旅行社網站範本
+25以照片為主的網站,適合行程、導遊或住宿,附行程搜尋、預約申請與找行程測驗。
- 網頁
工作流程自動化登陸頁
+25石墨色頁面,左側是小型的靠左標題,下方是即時的節點圖,會執行、重試並串流顯示日誌。
常見問題
年付切換不靠框架也能運作嗎?
可以。每個價格都以資料屬性帶著月付與年付的數值,幾行純 JavaScript 就能切換;若你只販售一種計費週期,直接刪掉切換即可。
手寫字型在每台裝置上都載得到嗎?
它使用系統上已安裝的手寫字型,並有備用字型,因此不需下載任何東西,區塊也能離線運作。確切字形在 macOS、Windows 與 Android 之間會略有不同。
PopNow 在這裡會加上什麼?
頁邊的選用貼紙插圖:以墨水與平塗色彩風格畫一張圖,再用 PopNow 的背景移除工具乾淨地去背。每次執行前都會先報價,並且只有在你同意後才開始。
可以放進既有網站裡使用嗎?
可以。所有樣式都限定在 .skp- 類別名稱之下,技能會把區塊重建為 React、Vue、Svelte 或 Astro 的元件,主題則由宿主頁面決定。
能當 SaaS 定價範本嗎?
可以。方案、月付與年付價格、功能列與「最熱門」標章都來自同一組資料,就像大多數 SaaS 定價頁的做法。可以整頁當作定價頁範本,也可以把定價表範本放進既有頁面。

