你會得到
- 一個 HTML 檔,字型與圖片都已內嵌,不發出任何網路請求
- 附電子郵件訂閱的首屏、含即時圖表的產品預覽、方案選擇、定價、FAQ 與結尾的訂閱區
- 可運作的路由:附付費牆的範例電子報、可搜尋的檔案庫、附席次與禮物的加入頁、登入、法律條款與 404
- 檢查連結、路由、標籤、玻璃配方與殘留範例文字的驗證工具
- 可選:報價後由 PopNow 生成的底片、人像、首屏循環與社群卡片
適合
- 電子報與簡報的訂閱頁面
- 候補名單、封閉測試與上線活動
- 販售席位的會員、課程或活動
不適合
- 淺色、粉彩或彩色的品牌:此頁面只有黑與白
- 產品眾多的線上商店
- 需要長篇功能導覽的 SaaS 網站
怎麼用
在 Claude 或 ChatGPT 裡
用 PopNow 的技能「玻璃擬態網站範本」(glassmorphism-website-template)幫我做這件事:為 Tidewatch 做訂閱頁,這是給小船帆船手的週五電子郵件:一張預報圖表、三則港口通知與一篇長文。免費,另有每月 $5 的船員方案。
在程式 Agent 裡
/popnow-glassmorphism-website-template 為 Tidewatch 做訂閱頁,這是給小船帆船手的週五電子郵件:一張預報圖表、三則港口通知與一篇長文。免費,另有每月 $5 的船員方案。
接著試試
生成任何內容前,先報價一張夜間海水的首屏照片,以及用它做的 5 秒循環。
把頁面移植到我的 Astro 網站,做成元件與真正的路由。
需要準備
- 名稱、訂閱者能得到什麼,以及標題的那一個承諾
- 三到四個你能站得住腳的事實、方案與價格,以及四到六題 FAQ 的答案
- 如果品牌有的話,你的 DESIGN.md
- 可選:PopNow API 金鑰,或你自己的深色照片與影片素材
類似技能
查看全部 →3D 頭像製作器
+3在瀏覽器裡捏出可愛的絨毛玩偶風 3D 角色,存成透明背景 PNG 或 3D 網頁。
日曆熱力圖
+3把一整年的每日活動畫成深淺不一的日曆格,附連續天數、總計與鍵盤操作。
AI SaaS 登陸頁
+3溫暖的沙色紙張,細線軌道與斜線溝槽環繞一個可操作的看板,助手在上面規劃任務。
動態 Hero 主視覺區塊
+3登陸頁的首屏主視覺:標題裡有一個輕輕輪替的詞,搭配兩顆按鈕和寬幅圖片框。
Shader 首屏設計公司網站
+3首屏是即時的橘色熱流 Shader,底部固定一句宣言,搭配膠囊導覽列與錯落的個案研究格。
深色 SaaS 登陸頁
+3深色、動態豐富的軟體產品行銷網站,以單一獨立 HTML 檔交付。
設計師作品集網站
+3六張微傾的卡片圍繞著淡出的標題,灰底上一張紅色人像卡,搭配編輯風格的個案研究。
工程師作品集網站
+3給工程師的深色個人網站,含專案案例、文章、演講、履歷與聯絡表單。
編輯風 SaaS 網站
+3深藍的分割首屏,五行襯線標題旁是紀實照片,斜切色帶與一個鈷藍強調色。
硬體產品網站
+3超大的細線型號名稱落在銀色攝影棚照片上,搭配磨砂規格卡、等比例的產品陣容與硬體 bento 版面。
互動式系統架構圖
+3以經過檢查的 JSON 模型產生、可離線點擊的系統架構圖,每個方塊都附上依據。
互動網格首屏
+3近黑的細線網格,會朝游標彎曲,並在每次點擊時向外擴散一圈發光的環。
知識圖譜瀏覽器
+3把專案筆記變成可離線搜尋的圖譜,每一項說法都能連回原始出處那一行。
KPI 儀表板範本
+3暖紙底上的四個 KPI 方塊附變化標籤,搭配發光折線圖、拆解表格與目標進度條。
從 AI 樣稿做登陸頁
+3先看三套完整頁面的設計稿、挑一套,你的 Agent 就會把它做成乾淨、響應式的程式碼。
雜誌網站範本
+3印刷品質的雜誌網站,含文章、主題、小型商店與訂閱,全部在一個 HTML 檔裡。
粒子動畫首屏
+3暖紙色底上的文案,旁邊是一顆轉動的墨色與青綠色點狀球體,會依每個概念變形,並在捲動時散開。
個人品牌網站
+3一張羽化進溫暖紙面的人像,上方是細線框,兩側是輕與重的宣言。
電影感產品上線頁
+3電影打光的近黑頁面:襯線標題卡漂浮在流動的光中,搭配信箱式夜景與預約表單。
後台管理儀表板範本
+3可實際操作的後台主控台,含圖表、表格、看板與行事曆,以單一離線 HTML 檔打造。
SaaS 登陸頁範本
+3沉穩、明亮的軟體產品行銷網站,附可操作的產品主控台、定價與註冊。
手帳風作品集網站
+3由紙本物件構成的多頁線上履歷,附專案案例與可列印的履歷。
球鞋商店網站範本
+3完整的鞋類或服飾商店,含商品目錄、商品頁、購物車與示範結帳,全部在一個 HTML 檔裡。
工作流程自動化登陸頁
+3石墨色頁面,左側是小型的靠左標題,下方是即時的節點圖,會執行、重試並串流顯示日誌。
常見問題
怎麼讓玻璃質感看起來對,而不是一個模糊的方塊?
每個凸起的表面都使用同一個配方:內部只帶極淡的色調並有背景模糊,頂部有柔和的光澤,邊緣則以遮罩漸層環繪製,讓光線落在上下邊緣。驗證工具會對不遵循此配方的頁面報錯。
首屏可以動嗎?
可以。在你核可首屏照片後,PopNow 可以把它動畫化為 5 秒的短片,而內附的循環腳本會把它做成無縫、靜音的循環,並附上海報。減少動態效果的設定與隱藏的分頁會保留靜態圖。
只適合電子報嗎?
不是。範例是晚間的簡報,但調整指南會把同樣的區塊對應到應用程式候補名單、課程、活動與 Podcast:產品預覽變成應用程式畫面,檔案庫變成更新紀錄或場次清單。
需要 PopNow API 金鑰嗎?
不需要。頁面內附中性的底片,並為每個圖片插槽提供 CSS 替代方案。加上金鑰後可以生成新的底片、人像、循環與社群卡片,每項在執行前都會以點數報價。

