AI 生成工具
AI 生成應用 + 行銷頁：生成 UI、token 經濟、市集
Pro內容AI8 個區段
安裝
npx webberui@latest add "https://webberui.com/r/ai-generation-tool.json?t=<安裝 token>"整頁原始碼會落在 app/templates/ai-generation-tool/。也可以改用長效授權金鑰：在 components.json 的 registries 設定 Authorization: Bearer <key>，適合 CI 或多人共用的專案。使用範圍見授權條款。
包含的區段
同一套模板內的區段共用設計 token，所以抽換、重排之後配色、間距與動畫節奏仍然一致。可在區段組裝器裡挑選組合。
- 1
導覽列與主視覺
深色霓虹導覽列搭配打字提示框，即時展示 AI 生成四張變體的主視覺區。
hero - 2
對話式共創
以聊天泡泡逐字串流回覆，示範像跟創意總監對話一樣逐步修圖。
content - 3
能力網格
用不規則卡片網格陳列風格切換、圖層編輯、超解析放大等五項核心能力。
features - 4
運作流程三步驟
以連線動畫串起描述畫面、選風格比例、微調匯出的三個步驟。
timeline - 5
Token 經濟與風格市集
左側說明 token 消耗與餘額卡，下方陳列社群販售的風格配方卡片。
product - 6
定價方案
體驗、專業、工作室三種 token 訂閱方案，中間方案以霓虹邊框強調。
pricing - 7
最終行動呼籲
視差光暈背景中的品牌圖示與雙按鈕，邀請訪客免費開始生成。
cta - 8
頁尾
品牌簡介、社群連結與產品、資源、公司三欄連結的深色頁尾。
footer
一套 React AI 生成工具網站模板：行銷頁裡示範提示詞輸入、生成中狀態與四張結果圖，另有逐字串流回覆、流程說明、Token 經濟與風格市集區塊。以 Next.js App Router、Tailwind CSS 與 Motion 製作，所有生成過程都是前端動畫，沒有接任何 AI 模型。
適用情境
- AI 圖像或內容生成產品的官網
- 提示詞市集或風格素材平台的介紹頁
- AI 工具上線前的產品展示頁
- 需要說明點數或 Token 計費方式的產品頁
拿到後要改哪裡
- 示範用的提示詞在 page.tsx 的 `PROMPT_TEXT`，四張結果圖是 `RESULT_TILES` 裡的漸層色塊；要顯示真實生成結果，就在 `GenerationDemo` 接上你自己的生成 API。
- 「對話式共創」區塊的逐字回覆來自 `STREAM_WORDS` 字串，由計時器逐字顯示，不是真的串流。
- 功能、流程、市集商品與方案分別在 `FEATURES`、`STEPS`、`MARKET_ITEMS`、`PLANS` 陣列。
- 霓虹配色集中在檔案開頭的 `NEON` 物件，背景星空是 `StarfieldCanvas` 用 canvas 繪製。
你拿到的是原始碼
不是 npm 套件、不是 zip 檔。安裝之後整頁的 TypeScript 原始碼就在你的 repo 裡，可以任意修改、無執行期相依、沒有到期失效機制——我們的網站故障不會影響你已上線的網站。
瀏覽其他 103 套模板 →