你會得到
- 一份可離線開啟的 HTML 檔案,字型與照片已內嵌,或 Next.js、React、Vue、Astro 版本
- 宣傳首頁,含飄動的文字帶、商品陳列、拼貼、故事時間軸與電子報
- 商品頁、系列頁、混搭組合箱、購物袋與示範結帳
- 經銷點搜尋(附地圖投影腳本)、配送範圍檢查、部落格、常見問題、聯絡與條款頁
- 可選:PopNow 商品照清理與生成靜物照,每次執行前先報價
適合
- 果汁、冰沙、汽水與康普茶品牌
- 直接銷售的咖啡烘焙、茶與零食品牌
- 提供自取或在地外送的烘焙坊與咖啡館
不適合
- 需要年齡驗證的酒類品牌
- 需要電商後端支撐的大型型錄
- 深色、極簡或企業風格的品牌
怎麼用
在 Claude 或 ChatGPT 裡
用 PopNow 的技能「飲料品牌網站範本」(beverage-brand-website)幫我做這件事:幫 Sunfold 做一個網站,這是一個氣泡茶品牌,有五種口味、330 ml 罐裝,以歐元在德國全境配送,提供 12 罐混搭箱,經銷點在柏林與漢堡。
在程式 Agent 裡
/popnow-beverage-brand-website 幫 Sunfold 做一個網站,這是一個氣泡茶品牌,有五種口味、330 ml 罐裝,以歐元在德國全境配送,提供 12 罐混搭箱,經銷點在柏林與漢堡。
接著試試
把我的五張罐裝照去背,並配合它們的光線;先給我看價格。
把瓶身押金的文案換成罐子回收,並拿掉在地配送區。
需要準備
- 商品、價格、包裝規格,以及口味或調配
- 客人如何購買:運送方式、在地配送區、經銷點或商店
- 你的品牌故事與真實的顧客評語
- 商品照或手機照,或一支 PopNow API 金鑰
類似技能
查看全部 →- 網頁
3D 頭像製作器
+25在瀏覽器裡捏出可愛的絨毛玩偶風 3D 角色,存成透明背景 PNG 或 3D 網頁。
- 網頁
日曆熱力圖
+25把一整年的每日活動畫成深淺不一的日曆格,附連續天數、總計與鍵盤操作。
- 網頁
AI SaaS 登陸頁
+25溫暖的沙色紙張,細線軌道與斜線溝槽環繞一個可操作的看板,助手在上面規劃任務。
- 網頁
動態 Hero 主視覺區塊
+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論文的專案頁,含可互動的圖一、結果、研究限制與一鍵引用。
- 網頁
後台管理儀表板範本
+25可實際操作的後台主控台,含圖表、表格、看板與行事曆,以單一離線 HTML 檔打造。
- 網頁
SaaS 登陸頁範本
+25沉穩、明亮的軟體產品行銷網站,附可操作的產品主控台、定價與註冊。
- 網頁
手帳風作品集網站
+25由紙本物件構成的多頁線上履歷,附專案案例與可列印的履歷。
- 網頁
球鞋商店網站範本
+25完整的鞋類或服飾商店,含商品目錄、商品頁、購物車與示範結帳,全部在一個 HTML 檔裡。
- 網頁
運動俱樂部網站範本
+25俱樂部、健身房或工作室網站,單一檔案內含課表、教練頁、會員方案、場地圖與預約。
- 網頁
客戶見證牆區塊
+25由客戶評語組成的瀑布式或緩慢飄移的見證牆,只放已取得當事人同意的評語。
- 網頁
旅行社網站範本
+25以照片為主的網站,適合行程、導遊或住宿,附行程搜尋、預約申請與找行程測驗。
- 網頁
工作流程自動化登陸頁
+25石墨色頁面,左側是小型的靠左標題,下方是即時的節點圖,會執行、重試並串流顯示日誌。
常見問題
我們的商品是罐裝,不是瓶裝,也能用嗎?
可以。與包裝相關的部分(押金列、組合箱計數圖、圖示、404 圖與尺寸文字)都列在改編指南中,可換成罐、罐子、袋裝或盒裝。
能用我們真正的商品照嗎?
可以。在你確認報價後,PopNow 會替每個包裝去背、去除反光與桌面陰影、統一光線,再放進口味方塊或保留你真實標籤的靜物照中。
商店能接受真正的訂單嗎?
目前還不行。購物袋、組合箱與結帳都能運作並顯示確認畫面,但在接上付款服務與訂單後端之前,不會收費也不會寄出任何訂單。
經銷點要怎麼放上地圖?
以經緯度列出經銷點,執行附的投影腳本,再把它印出的 x 與 y 值貼進經銷點資料中。
適合果汁、汽水或咖啡飲料品牌的網站嗎?
適合。商店依口味販售罐裝、瓶裝或袋裝,組合箱可把不同口味裝進同一盒,經銷點地圖則列出販售你商品的咖啡館與商店。只要在一處換掉明亮的配色,就能改成你的飲料品牌色。

