你會得到
- 兩到三張風格不同的完整頁面樣稿,取自十種風格的圖庫
- 選定的設計,做成靜態頁面或你專案中的元件,附真實文案
- 重新繪製、尺寸正確的首屏與區塊圖片,匯出為響應式 WebP
- 桌機與手機截圖、與樣稿的並排對照,以及品質報告
- 針對機器生成習慣的檢查報告,並已套用修正
適合
- 新創、應用程式與產品的登陸頁
- 需要獨特外觀的上線頁與候補名單頁
- 重新設計一個看起來像通用範本的頁面
不適合
- 依既有設計檔做到像素級精確的建置
- 有應用程式邏輯或 CMS 的多頁網站
- 電子郵件範本
怎麼用
在 Claude 或 ChatGPT 裡
用 PopNow 的技能「從 AI 樣稿做登陸頁」(landing-page-from-mockup)幫我做這件事:為 Lumen Notes 做登陸頁,這是一款純文字筆記應用,打字時會推薦相關筆記。單一裝置免費,Pro 每月 $6。目前還沒有推薦語。
在程式 Agent 裡
/popnow-landing-page-from-mockup 為 Lumen Notes 做登陸頁,這是一款純文字筆記應用,打字時會推薦相關筆記。單一裝置免費,Pro 每月 $6。目前還沒有推薦語。
接著試試
首屏取樣稿 B 的,定價表取樣稿 A 的。
在我們 Astro 專案的 site/ 底下建置,並再跑一次審查。
需要準備
- 產品名稱、受眾與標題承諾
- 三到四項功能,每項一個具體細節,以及方案與價格
- 你能站得住腳的證明(真實的評語、數字或事實)
- PopNow API 金鑰;若品牌已有定義,再加上你的 DESIGN.md
類似技能
查看全部 →3D 頭像製作器
+3在瀏覽器裡捏出可愛的絨毛玩偶風 3D 角色,存成透明背景 PNG 或 3D 網頁。
日曆熱力圖
+3把一整年的每日活動畫成深淺不一的日曆格,附連續天數、總計與鍵盤操作。
AI SaaS 登陸頁
+3溫暖的沙色紙張,細線軌道與斜線溝槽環繞一個可操作的看板,助手在上面規劃任務。
動態 Hero 主視覺區塊
+3登陸頁的首屏主視覺:標題裡有一個輕輕輪替的詞,搭配兩顆按鈕和寬幅圖片框。
Shader 首屏設計公司網站
+3首屏是即時的橘色熱流 Shader,底部固定一句宣言,搭配膠囊導覽列與錯落的個案研究格。
深色 SaaS 登陸頁
+3深色、動態豐富的軟體產品行銷網站,以單一獨立 HTML 檔交付。
設計師作品集網站
+3六張微傾的卡片圍繞著淡出的標題,灰底上一張紅色人像卡,搭配編輯風格的個案研究。
工程師作品集網站
+3給工程師的深色個人網站,含專案案例、文章、演講、履歷與聯絡表單。
編輯風 SaaS 網站
+3深藍的分割首屏,五行襯線標題旁是紀實照片,斜切色帶與一個鈷藍強調色。
玻璃擬態網站範本
+3近黑底片上的磨砂玻璃膠囊,巨大的襯線標題中有一個斜體字,外加電子郵件訂閱。
硬體產品網站
+3超大的細線型號名稱落在銀色攝影棚照片上,搭配磨砂規格卡、等比例的產品陣容與硬體 bento 版面。
互動式系統架構圖
+3以經過檢查的 JSON 模型產生、可離線點擊的系統架構圖,每個方塊都附上依據。
互動網格首屏
+3近黑的細線網格,會朝游標彎曲,並在每次點擊時向外擴散一圈發光的環。
知識圖譜瀏覽器
+3把專案筆記變成可離線搜尋的圖譜,每一項說法都能連回原始出處那一行。
KPI 儀表板範本
+3暖紙底上的四個 KPI 方塊附變化標籤,搭配發光折線圖、拆解表格與目標進度條。
雜誌網站範本
+3印刷品質的雜誌網站,含文章、主題、小型商店與訂閱,全部在一個 HTML 檔裡。
粒子動畫首屏
+3暖紙色底上的文案,旁邊是一顆轉動的墨色與青綠色點狀球體,會依每個概念變形,並在捲動時散開。
個人品牌網站
+3一張羽化進溫暖紙面的人像,上方是細線框,兩側是輕與重的宣言。
電影感產品上線頁
+3電影打光的近黑頁面:襯線標題卡漂浮在流動的光中,搭配信箱式夜景與預約表單。
後台管理儀表板範本
+3可實際操作的後台主控台,含圖表、表格、看板與行事曆,以單一離線 HTML 檔打造。
SaaS 登陸頁範本
+3沉穩、明亮的軟體產品行銷網站,附可操作的產品主控台、定價與註冊。
手帳風作品集網站
+3由紙本物件構成的多頁線上履歷,附專案案例與可列印的履歷。
球鞋商店網站範本
+3完整的鞋類或服飾商店,含商品目錄、商品頁、購物車與示範結帳,全部在一個 HTML 檔裡。
工作流程自動化登陸頁
+3石墨色頁面,左側是小型的靠左標題,下方是即時的節點圖,會執行、重試並串流顯示日誌。
常見問題
為什麼要先做樣稿再寫程式?
在看起來已經完成的頁面之間做選擇,比用文字描述風格更快、也更誠實。它還能給建置一個具體的目標,讓截圖比對可以精確指出程式哪裡偏離了。
PopNow 會生成什麼?要花多少?
樣稿(每張約 30 到 35 點),以及你若需要的話,乾淨的首屏與區塊圖片(每張約 35 到 75 點)。一次完整執行約 275 點;只做一張樣稿的輕量模式約 35 點。每次生成都會先報價,你同意後才會執行。
需要安裝什麼?
Node 與 Python 3,外加本機的 Chrome、Chromium 或 Edge 用於截圖。若你的專案已有 Playwright,就會使用它。沒有其他相依套件。
頁面會包含樣稿圖片中的文字嗎?
不會。樣稿是圖片,其小字可能會被弄亂。標題、功能、價格與 FAQ 都來自你的需求;任何 Agent 必須自行撰寫的內容,都會列出來請你確認。

