跳至範本

Framewise — AI 產品登陸頁 HTML 範本

適用於 AI 影視工具的 HTML 著陸頁範本,包含攝影示例、功能介紹與搶先體驗區。可下載原始碼及配套提示詞;原始碼採用 Three.js 和 GSAP 效果,產品故事需依自身業務調整。

技術框架
html
配套提示詞
依項目及方案權益取得

這個設計適合什麼情境

適合視覺創作工具:先展示實際產出,再說明控制方式;用自己的證據替換示範結果。

適合哪些專案

適合 AI 影視或視覺創作工具,以成果示例、功能介紹和搶先體驗區說明產品。HTML 前端不包含 AI 生成功能或可用的帳戶服務。

依你的專案調整

使用有權發布的示例,說明產品真正支援的控制項,替換示範陳述,並將搶先體驗接到自己的服務。檢查 Three.js、GSAP 效果、手機載入及減少動態效果時的替代呈現。

下載包含什麼

原始碼 ZIP 包含 HTML 頁面、配套提示詞與隨附使用說明:

  • index.html
  • PROMPT.md
  • INTERNAL-USE.txt

如何執行與修改

解壓縮 ZIP 後,以本機靜態伺服器(例如 VS Code Live Server)開啟資料夾,再瀏覽 index.html,無需 npm 建置。可編輯 HTML、樣式與指令碼,也可將 PROMPT.md 用於程式開發工具。

原始碼相依項目

Tailwind CSS (CDN), Iconify, Three.js, GSAP / ScrollTrigger, Google Fonts

外部樣式、指令碼、字型與媒體需要連網載入。上線前檢查外部服務與追蹤指令碼,替換示範內容,並視需要串接自己的表單或後端。

使用前請閱讀 INTERNAL-USE.txt 與適用的第三方素材條款。下載不代表取得無限制商用或再散布授權。 服務條款

方案包含原始碼下載嗎?

無需登入即可瀏覽範本及體驗互動預覽。配套提示詞、原始專案原始碼及下載依帳號及方案權益取得。

範本標題、描述與預覽內容保留原始語言。

閱讀設計提示詞工作流程

可下載原始碼的網站範本

瀏覽適合作品集、機構官網和登陸頁的 HTML、React 網站範本。預覽免登入;原始碼 ZIP 與可用的配套提示詞依方案解鎖。

依專案選擇範本

作品集網站範本
依案例展示、圖片圖庫和聯絡需求,比較設計師與攝影作品集。
創意機構網站範本
設計工作室或創意機構可先查看 Astraform,在一個 HTML 頁面中呈現專案、服務、團隊與流程。
HTML 登陸頁範本
比較軟體、AI 工具與安全產品頁面,查看 HTML、CSS、JavaScript 原始碼,再接上自己的後端。

使用方式

  1. 01瀏覽在全螢幕互動預覽中探索完整網站。
  2. 02登入使用免費帳戶,將購買集中保存在一處。
  3. 03解鎖選擇提示詞包或會員,解鎖範本後下載原始碼 ZIP,並使用可用的配套提示詞。