你會得到

  • 以 props 驅動的 React Hero 元件,附使用範例
  • 同款 Hero 的單一 HTML 檔,不需要建置步驟
  • 淺色與深色主題變數、格線背景與動效規則
  • 繪製好的備用視覺,沒有圖片也像完成品
  • 可選:PopNow 生成的主視覺圖片,執行前先報價

適合

  • SaaS、App 與服務的登陸頁
  • 取代平淡、靜態的首屏
  • 只需要一個明確行動的候補名單與上市頁

不適合

  • 打造包含多個區塊的完整網站
  • 捲動敘事或大量動畫
  • 未重新調整主題、以飽和藍或紫為主的配色

怎麼用

在 Claude 或 ChatGPT 裡

用 PopNow 的技能「動態 Hero 主視覺區塊」(animated-hero-section)幫我做這件事:幫我的 Next.js 登陸頁加上 Hero:「讓旅行規劃變得 輕鬆 / 自在 / 好分享」,搭配「開始規劃」和「看範例」兩顆按鈕。

在程式 Agent 裡

/popnow-animated-hero-section 幫我的 Next.js 登陸頁加上 Hero:「讓旅行規劃變得 輕鬆 / 自在 / 好分享」,搭配「開始規劃」和「看範例」兩顆按鈕。

接著試試

為圖片框生成一張寬幅照片:陽光下擺著地圖和咖啡的桌面。先告訴我要多少點數。

也給我純 HTML 版本,用在我的靜態網站。

需要準備

  • 一句開頭句,以及 3-5 個輪替的短詞
  • 內文、按鈕文字與連結
  • 可選:你的截圖或產品照,或 PopNow API 金鑰

類似技能

查看全部 →

常見問題

一定要用 React 嗎?

不用。專案使用 React 和 Tailwind 時,技能會選 React 元件;沒有建置步驟時則用純 HTML 檔。其他框架會拿到相同結構與動效的移植版本。

動效符合無障礙需求嗎?

短詞以短暫的補間動畫滑入,分頁在背景時會暫停,訪客偏好減少動態效果時則完全停止。螢幕閱讀器只會完整唸出一次標題,不會一直讀到變動的詞。

如果我沒有主視覺圖片呢?

會用主題色繪製的底圖填滿圖片框,區塊看起來依然完整。之後你可以放上自己的截圖,或用 PopNow 生成圖片。

PopNow 會幫我的 App 生成截圖嗎?

不會。軟體產品的話,技能會請你提供真實截圖。PopNow 用於場景照片、搭配背景的產品照或抽象底圖。