網站預設範本
Draftly 可從 50 多個可直接用於生產環境的範本開始，包含 SaaS、代理商、作品集、發佈、工作室、編輯、案例研究、奢華電商、產品、故事、購物車、宣言、工作與聯絡等版型。使用者可以直接點擊編輯文案與媒體，而不必從零重做頁面。
Draftly
認領Draftly 是一款 3D 網站建置工具，可透過提示詞或預設範本建立電影感、隨捲動呈現的網站。可產生動態頁面，並輸出可部署至自訂網域或主機平台的程式碼。
總覽
Draftly 是一款 3D 網站建置工具，可透過提示詞或預設範本建立電影感、隨捲動呈現的網站。首頁將其定位為可在幾分鐘內建立正式可用 HTML 的方式，而功能頁則補充使用者也能從 50 多個範本開始，並直接在原地編輯。
這項產品結合 AI 生成、以畫格為基礎的動態播放與程式碼匯出。其工作流程會從簡述或預設範本出發，產生視覺內容與與捲動連動的動畫序列，最後輸出可下載的網站，能部署到自訂網域，或託管於 Vercel、Netlify 等平台。
功能
以提示詞為基礎的生成
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 或自架伺服器。這種流程適合想要擁有程式碼並掌控託管方式的團隊。
可重複使用的創意流程
在上線第一個網站之後，進入節點工作室串接模型步驟，例如圖片生成、影片生成、放大解析度與背景移除。這種設定是為了可重複的創意流程，而不是一次性的頁面。
Pros and Cons
Pros
- 同時支援先提示詞與先範本的工作流程。
- 輸出乾淨的語意化 HTML、Tailwind CSS 與 JavaScript，方便自有與自訂部署。
- 使用原生瀏覽器捲動播放，而非 WebGL 或 Three.js。
- 會依不同裝置與頻寬狀況自動調整畫格品質與解析度。
- 提供多種範本與可編輯預設，讓起步更快速。
Cons
- 某些進階流程，例如以節點為基礎的管線，被描述為需要學習曲線。
- 定價頁顯示 ZIP 匯出綁定 Pro 方案，因此最低階方案不包含所有匯出選項。
- 在提供的來源中，文件與 API 參考頁面不可用，因此除網站本身的匯出與部署目標外，整合細節有限。
FAQ
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。功能頁也提到，對於較低頻寬的訪客，畫格品質與解析度會自動調整。
Quick Facts
- 類別
- 3D 網站建置工具
- 主要流程
- 提示詞或範本 → 隨捲動呈現的網站
- 輸出
- 語意化 HTML、Tailwind CSS、JavaScript 與畫格序列
- 託管
- 支援自訂網域，以及 Vercel、Netlify、Cloudflare Pages 等部署目標
- 來源網域
- draftly.space
- 定價
- 2 天免費試用，之後為付費方案