# Draftly 用提示詞或預設建立電影感滾動網站的 3D 建站工具 - Findings24: - 網站: - 價格: Freemium - 分類: AI網站架設 ## 什麼是 Draftly？ Draftly 是一款 3D 網站建置工具，可透過提示詞或預設範本建立電影感、隨捲動呈現的網站。首頁將其定位為可在幾分鐘內建立正式可用 HTML 的方式，而功能頁則補充使用者也能從 50 多個範本開始，並直接在原地編輯。 這項產品結合 AI 生成、以畫格為基礎的動態播放與程式碼匯出。其工作流程會從簡述或預設範本出發，產生視覺內容與與捲動連動的動畫序列，最後輸出可下載的網站，能部署到自訂網域，或託管於 Vercel、Netlify 等平台。 ## Draftly 能做什麼？ ### 網站預設範本 Draftly 可從 50 多個可直接用於生產環境的範本開始，包含 SaaS、代理商、作品集、發佈、工作室、編輯、案例研究、奢華電商、產品、故事、購物車、宣言、工作與聯絡等版型。使用者可以直接點擊編輯文案與媒體，而不必從零重做頁面。 ### 以提示詞為基礎的生成 AI 生成流程會將自然語言簡述轉換為電影感的隨捲動體驗，輸出包含圖片、影片與版面配置。網站說明此系統以 10,000+ 份專業設計訓練而成，並支援 noir、golden hour、brutalist、pastel dream 與 neon dystopia 等風格方向。 ### 捲動鎖定動態引擎 Draftly 的動態引擎會將靜態概念轉換成 8 秒影片，然後切分成可隨捲動播放的畫格。網站明確表示此體驗使用原生瀏覽器捲動，而非 WebGL 或 Three.js。 ### 正式環境匯出 匯出流程會產生語意化 HTML、Tailwind CSS 與 JavaScript，功能頁也說明這些程式碼可部署到任何地方。它同時提到可選的 Express API 起始範本，以及 Vercel、Netlify 與 Cloudflare Pages 等一鍵部署目標。 ### 以節點為基礎的流程 節點工作室可讓使用者連接 AI 模型，並串接文字轉圖片、圖片轉影片、放大解析度、背景移除與畫格生成等步驟。Draftly 將這裡描述為首次專案上線後，用來建立可重複使用流程的地方。 ### 自適應播放與響應式交付 Draftly 會根據訪客裝置與連線狀況，調整畫格數量、畫格解析度與播放行為。網站說明手機會使用較低解析度畫格，桌機會使用較高解析度畫格，而序列會採用延遲載入以加快載入時間。 ## 使用情境 ### 以範本為基礎的行銷頁面 先為 SaaS、代理商、作品集、發佈或編輯頁面選擇範本，再點擊編輯文字與媒體後發佈。這適合想要一個精緻起點、但不想從零開始寫提示詞的團隊。 ### 以提示詞驅動的概念建置 為品牌著陸頁撰寫自然語言簡述，讓 Draftly 產生版面、視覺與動態序列。此產品適合想要電影感首頁或英雄區塊、但不想使用 WebGL 的使用者。 ### 電影感敘事頁面 為產品故事、奢華品牌頁面或案例研究建立隨捲動的體驗，讓動態成為展示的一部分。動態引擎以逐格播放為核心，並跟隨瀏覽器捲動位置。 ### 自架部署 將完成的網站匯出為 HTML、Tailwind CSS 與 JavaScript，然後部署到 Vercel、Netlify、Cloudflare Pages 或自架伺服器。這種流程適合想要擁有程式碼並掌控託管方式的團隊。 ### 可重複使用的創意流程 在上線第一個網站之後，進入節點工作室串接模型步驟，例如圖片生成、影片生成、放大解析度與背景移除。這種設定是為了可重複的創意流程，而不是一次性的頁面。 ## 常見問題 ### Draftly 是用來做什麼的？ Draftly 是一款網站建置工具，可用提示詞或預設範本建立電影感、隨捲動呈現的 3D 網站與登陸頁。來源描述的流程是從提示詞或範本開始，接著進行 AI 生成、捲動播放，最後輸出可供正式部署的成品。 ### Draftly 有提供免費試用或付費方案嗎？ 定價頁顯示提供 2 天免費試用，且需要信用卡／簽帳卡；之後則為付費方案。頁面也顯示不同方案層級包含 AI 點數、生成次數限制，以及較高方案才有的自訂網域與 ZIP 匯出等功能。 ### 我可以自行匯出並託管 Draftly 網站嗎？ 功能頁指出 Draftly 可匯出乾淨、語意化的 HTML、Tailwind CSS 與 JavaScript，且網站說明 ZIP 匯出可在 Pro 方案使用。匯出目標包括 Vercel、Netlify、Cloudflare Pages，或你自己的伺服器。 ### 要如何在 Draftly 中開始專案？ Draftly 支援從網站預設範本或提示詞開始。功能頁描述的預設範本包含 SaaS、代理商、作品集、發佈、工作室、編輯、案例研究、奢華電商、產品、故事、購物車、宣言、工作與聯絡等頁面樣式。 ### Draftly 需要 WebGL 或特殊瀏覽器支援嗎？ 來源說明 Draftly 使用原生瀏覽器捲動播放，不需要 WebGL 或 Three.js。功能頁也提到，對於較低頻寬的訪客，畫格品質與解析度會自動調整。 ## 快速資訊 - **類別**: 3D 網站建置工具 - **主要流程**: 提示詞或範本 → 隨捲動呈現的網站 - **輸出**: 語意化 HTML、Tailwind CSS、JavaScript 與畫格序列 - **託管**: 支援自訂網域，以及 Vercel、Netlify、Cloudflare Pages 等部署目標 - **來源網域**: draftly.space - **定價**: 2 天免費試用，之後為付費方案