大多數 3D 網站 prompt 資料庫不是對 prompt 文字本身收費，就是只給你看示範影片，卻把文字藏起來。這裡有六個完整的 prompts：可以直接原樣貼到 Claude，或將其中一行改寫後用於 Lovable、Bolt 和 Cursor。這六個都經過了即時模型測試；其中五個成功產出可運作的 Three.js 頁面，而下方每張截圖都是那些渲染結果之一，不是示意圖。
你現在就可以複製的 6 個 3D 網站提示詞
每個提示都要求一個從 CDN 載入 Three.js 的單一檔案 HTML 頁面。這個限制很重要：單一檔案可以在任何瀏覽器中本機開啟，也很容易交給開發人員或貼到自訂程式碼區塊，而且它會迫使模型讓場景保持自包含，而不是把 imports 分散到整個專案中。
1. 粒子星系英雄
建立一個單一檔案的 HTML 頁面，內含使用 Three.js 的互動式 3D 粒子銀河 Hero
區塊（從 CDN 載入）。需求：大約 50,000
個粒子形成一個緩慢旋轉的螺旋銀河；粒子顏色從核心的暖琥珀色逐漸變化到外緣的紫羅蘭色；加入 OrbitControls，讓訪客可以拖曳旋轉與縮放；疊加一個置中的 Hero 標題，內容為 "Build Beyond Flat"，並附上一行簡短副標與一個 CTA 按鈕；在覆蓋層容器上設定 pointer-events: none，並在 CTA 按鈕上設定 pointer-events: auto，讓銀河在文字後方仍可被拖曳；深色背景 #0a0616；處理視窗大小變更。只輸出完整的 HTML
檔案，並放在單一程式碼區塊中。
在 27 秒內生成，輸出 3,692 個 token。星系會旋轉，拖曳即可繞行，且按鈕在覆蓋層下仍可點擊。唯一真正的缺陷是：副標文字落在明亮的銀河核心上，難以閱讀。修正方法在下方的測試註記中。
2. 捲動驅動的產品展示
建立一個單一檔案的 HTML 頁面：使用從 CDN 載入的 Three.js，打造一個由捲動驅動的 3D 產品展示。需求：在固定的全螢幕 canvas 中置中顯示一個漂浮的 chrome torus-knot；頁面有 4 個全螢幕捲動區段，當使用者捲動時，攝影機會繞著物件完整旋轉 360 度，同時物件材質顏色會依區段平滑過渡（銀色、深藍色、祖母綠、銅色）；每個區段都會在 canvas 上方左側釘住顯示一個標題與一行文案；在捲動時使用平滑插值（lerp）讓動作感覺有阻尼；深色攝影棚風格，搭配兩個有色聚光燈與柔和的地面陰影；處理視窗大小變更。請只輸出完整的 HTML 檔案，且放在單一程式碼區塊中。
這是五個工作生成中最耗時的一個（63 秒，7,023 個輸出 token），也是最令人印象深刻的結果。捲動會驅動攝影機繞著物體移動，而材質也會依要求在每個區段精確重新著色：
衰減 lerp 插值也得到了尊重；這種動作帶有沉重、昂貴的質感，更像是代理商網站，而不是被滾動劫持的幻燈片秀。
3. GLSL 流體漸層背景
建立一個單一檔案的 HTML 頁面，使用透過 CDN 載入的 Three.js 與自訂 GLSL 片段著色器，製作全螢幕動畫 WebGL 流體
漸層背景。需求：緩慢移動的有機色塊融合深藍、
紫色與珊瑚色，由片段著色器中的時間 uniform 與 simplex 風格雜訊驅動；在著色器中加入細微的膠片顆粒；疊加一個置中的玻璃卡片（backdrop blur），內含白色標題 "Ship Immersive Sites"、一
行副標，以及兩個按鈕；動畫在筆電上必須保持流暢（單一
quad、無後處理 passes）；處理視窗大小調整。僅輸出完整的 HTML 檔案，並放在單一程式碼區塊中。
31 秒、3,830 tokens、首次即通過。這句「single quad, no postprocessing passes」是效能的安全界線：如果沒有它，模型往往會直接使用 EffectComposer 和 bloom passes，這會讓內建 GPU 的幀率大幅下降。
4. 3D 作品集飛越展示（那個曾經反抗的）
建立一個單一檔案的 HTML 頁面：使用 Three.js（從 CDN 載入）的 3D 作品集。
六張浮動的專案卡片（帶圓角的平面，使用佔位用漸層
紋理，並將專案標題渲染到卡片紋理上）沿著 3D 空間中的
柔和曲線排列。當使用者捲動時，攝影機沿著曲線向前飛行，
一次將每張卡片帶入焦點；攝影機
必須將目前聚焦的卡片完整保留在畫面中並留有舒適邊距，且絕不能
穿過任何卡片；聚焦的卡片會稍微放大。
相鄰卡片會部分可見以增加深度感。加入細微的霧效、深色背景、帶阻尼的
捲動插值。點擊聚焦的卡片會開啟連結。處理視窗大小調整。
保持程式碼精簡：重用一個建立卡片的函式，不要註解。
只輸出完整的 HTML 檔案，並置於單一程式碼區塊中。
這個版本跑了三次，仍然無法交付，而上方的截圖也說明了為什麼我們還是把它發佈出來：卡片有渲染出來，但相機停在它後面，所以標題看起來是鏡像的。第一次執行在檔案中途就超過了我們 16,000 token 的輸出上限。第二次執行（加上了「保持程式碼精簡」那一行，所以提示裡才會有那一行）有渲染卡片，但相機直接穿了過去。第三次修正了裁切問題，卻失去了相機與捲動的連動。相機路徑編排加上每張卡片的紋理，對模型來說確實比上面的場景更難；請預留一次除錯時段，或者簡化成帶有懸停狀態的靜態弧形格線。
5. 互動式產品檢視器
建立一個單檔 HTML 頁面：使用
來自 CDN 的 Three.js 製作互動式 3D 產品檢視器。將一個風格化、無線框的幾何產品
替代物（倒角立方體或膠囊體）置中放在基座上。右側面板提供
三個色票和一個金屬／霧面切換，會即時更新材質；
OrbitControls 僅限制為水平旋轉；柔和的三點式工作室
打光與接觸陰影。讓面板維持為覆蓋在
畫布上的純 HTML/CSS。處理視窗大小變更。只輸出完整的 HTML 檔案，且置於單一程式碼區塊中。
首次嘗試即通過，66 秒，7,719 個 token。色票和金屬/霧面切換會即時更新材質，而模型還額外加入了一個未經提示的貼心說明：註腳解釋旋轉鎖定在水平軸，以保持產品構圖在畫面中。
6. 單頁式 3D 商業網站
建立一個單一檔案的 HTML 頁面：一個為設計工作室製作的單頁網站，使用來自 CDN 的 Three.js。區段：hero、services、work、contact。只有一個低多邊形的抽象形狀漂浮在 hero 的右上角並緩慢旋轉；當使用者捲動進入每個區段時，該形狀會變形其縮放與顏色以符合該區段的強調色。除此之外，各區段僅使用乾淨的 HTML/CSS（每個區段不使用大量 3D），以保持頁面快速。平滑捲動、適合行動裝置、處理視窗大小變更。僅輸出完整的 HTML 檔案，並放在單一程式碼區塊中。
62 秒，7,419 個 tokens。該模型編造了一個工作室名稱，建立了四個區塊，並且正好在要求的位置浮現了一個低多邊形二十面體。我們第一次嘗試這個提示時碰到了 8,000-token 的輸出上限，結果被截斷了——如果你透過 API 呼叫模型，請將輸出限制設為 16,000 tokens 或更多，以便完整處理整頁提示。
當我們執行它們時發生了什麼
每個提示在單一模型上跑三次只是一則軼事，不是基準測試；請將其視為對 2026 年中 prompt-to-3D 生成現況的一次抽查。方法說明：於 2026 年 7 月 17 日透過其 API 使用 claude-sonnet-5，採用預設設定、未提供 system prompt，結果在 Apple-silicon MacBook 上的桌面版 Chrome 以 1280×720 呈現；在成功的執行中，模型自行從公開 CDN 選擇了 Three.js r128 UMD build。
| 提示詞 | 輸出 tokens | 時間 | 結果 |
|---|---|---|---|
| 粒子星系主視覺 | 3,692 | 27.4s | 第一次就成功；副標對比度太低 |
| 捲動驅動展示 | 7,023 | 63.4s | 第一次就成功，4 個色彩階段都正確 |
| GLSL 流體漸層 | 3,830 | 31.6s | 第一次就成功，測試用 MacBook 上看不到掉幀 |
| 作品集飛越瀏覽 | 3 runs | 84–163s | 無法正式上線：token overflow，接著是鏡頭裁切問題，然後是標題鏡像 |
| 產品檢視器 | 7,719 | 65.8s | 第一次就成功，即時材質切換 |
| 單頁商業網站 | 7,419 | 62.4s | 在提高輸出 token 上限後重跑一次就成功 |
五個可運作頁面中的唯一視覺缺陷是：提示 1 的副標位於星系最亮的區域上，幾乎難以辨讀。一條後續指令修正了它 — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. 這就是這些執行中的模式：3D 場景本身往往能做得正確，而反覆調整的預算則花在排版、覆層對比，以及（在作品集案例中）攝影機運鏡上。
在這個規模下，成本根本不是問題。整個測試執行——包含投資組合重試在內的九代，約 46,000 個輸出 tokens——花費遠低於一美元；我們是透過 AIReiter 跑的，它以官方每個 token 價格的五分之一轉售 Claude API 存取權，所以即使是頑固的迭代過程，成本也只停留在零錢等級。
如何撰寫你自己的 3D 網站提示詞
通過的提示詞共有五個部分。保留這五個部分，你首次通過的機率就會大幅提高。
1. 單一場景主體。 一個星系、一個環面結、一個梯度場。在我們的執行結果以及大多數共享的社群範例中，當提示要求在同一頁面中加入多個彼此無關的 3D 特徵時，模型就開始漏掉需求。2. 一個運動驅動器。 要不是時間（slowly rotates、driven by a time uniform），就是捲動（as the user scrolls, the camera orbits）。請明確說出是哪一種；只寫「animated」會讓模型自己挑個無聊的方式。來自作品集失敗案例的提醒：以捲動驅動 物件 是可靠的，以捲動驅動 沿著物件之間路徑移動的相機 才是容易出問題的地方。3. 互動。 我們測試中每一次成功的執行，使用 OrbitControls 來支援拖曳旋轉都能正常運作。如果你在 canvas 上疊加文字，請要求覆蓋容器使用 pointer-events: none，而按鈕使用 pointer-events: auto——否則文字層會吃掉原本要給場景的拖曳與點擊。4. 覆蓋內容。 請用引號提供精確的標題文字。模型會用通用口號去填補未指定的文案，而那通常都得你之後再替換。5. 效能與大小的保護界線。 粒子數量、single quad, no postprocessing，或 low-poly 能讓頁面保持快速；keep the code compact 則能讓輸出維持在 API token 限制內——我們九次執行中有兩次甚至在出現任何程式碼品質問題之前，就因輸出上限而失敗。
能將模型推向真正 3D、而非平面 CSS 仿作的詞彙：Three.js、particle system、GLSL fragment shader、OrbitControls、scroll-driven camera、torus-knot、lerp、fog、point lights。這些詞很重要，因為它們對應到真實的 API 名稱，因此模型會依據訓練時見過的函式庫來撰寫，而不是即興發揮。
貼上程式碼的快捷鍵
對於超出你能描述的效果，還有第二種技巧。到 CodePen 找一個完成的 Three.js 效果，把原始碼貼進你的 AI 工具，然後只提示 Add this 3D animation to the hero.。模型會把這段程式碼轉換成你的技術棧——React 元件、你的建置設定、你的區塊結構——而這通常正是最繁瑣的部分。Builder.io 在 他們的教學 中記錄了這個技巧，使用一個 50,000 粒子的行星動畫，並包含相同的 pointer-events: none 疊層修正。
當你想要獲得得獎網站般的精緻感時，這是最高槓桿的做法：shader math 來自一位經過調校的人類，而 AI 只負責整合。
哪些工具會接受這些提示
上面的六個提示與工具無關；任何能撰寫並預覽 HTML/JS 的工具都可以執行它們。工具之間的差異在於輸出形式與程式碼所有權（已於 2026 年 7 月 17 日核實）：
| 工具 | 免費路徑 | 你將獲得 | 程式碼所有權 |
|---|---|---|---|
| Claude（聊天或 Claude Code） | 免費方案 | 原始單一檔案 HTML 或完整 repo | 屬於你，完整原始碼 |
| Lovable | 免費方案 | 託管的 React app | 可匯出 |
| Bolt | 免費方案 | 託管的全端 app | 可匯出 |
| Cursor | 免費方案 | 你自己 repo 中的程式碼 | 屬於你，完整原始碼 |
| VULK | 無 — 3 天入門方案自 €3.99 起，方案自 €19.99/月 起 | 生成的 React Three Fiber 網站，PostgreSQL 後端 | 完整匯出至 GitHub |
| Spline Omma | 候補名單／限量 | 加到既有網站上的 3D 圖層 | 平台託管 |
其中有兩項值得一提。VULK 的主打特色是它會產生真正的 React Three Fiber 程式碼——互動式 WebGL 場景，而不是循環播放的影片頁首——而且它的展示網站也證實了這一點。在為任何「AI 3D 網站建構工具」付費之前，真正的程式碼輸出與影片頁首之間的差異，正是你需要先確認的地方。若你比較想瀏覽提示詞而不是自己撰寫，MotionSites 提供了一個按類別整理的資料庫，對象包括 Lovable、Bolt、Cursor 和 Claude。其中一部分可免費複製，其餘則需訂閱才能使用：
提示詞遇到瓶頸的地方
在 r/lovable 和 r/web_design 討論串中，一個反覆出現的問題是：合適的提示詞是否能重現像 mont-fort.com 或 Noomo Agency labs 頁面這樣的網站。老實說：光靠提示詞不行。那些網站是建立在自訂的 GLTF 模型、經過藝術指導的光照，以及客製化 shader 工作之上——這些資產是文字提示無法憑空生成的。提示詞能帶給你的是這些網站的 *mechanics*（機制）：由捲動驅動的攝影機、shader 背景、阻尼動作，以及使用佔位幾何體。換入真正的模型檔案可以縮小其中一部分差距，但光照、材質，以及為行動裝置準備的備援方案，仍然是實打實的設計工作。我們上面作品集飛行穿越失敗的例子也是同樣道理，只是縮小版：提示詞越接近編排過的多物件場景，就越需要人為反覆調整。
三種失敗模式涵蓋了大多數生成結果失敗的情況，每種都有一行修正方法：
- 黑畫面，沒有可見錯誤。 通常是 ES module/CDN 匯入不匹配。修正提示：
Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps.（r128 是我們的測試執行未經提示時選定的版本，而且它仍然可用；較新的 Three.js 版本已移除了 UMD 路徑，因此鎖定版本可避免不匹配。） - 桌面上很順，但手機上卡頓。 在筆電上沒問題的粒子數量。修正提示：
Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2. - 3D 場景正常運作，但頁面上沒有任何東西可點擊。 canvas 或某個覆蓋層正在吞掉事件。修正提示：
Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.
以及我們自己執行測試中的一個例子：3D 卡片上的文字會鏡像顯示。 相機正看著平面的背面。修正提示：Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.
常見問題
有免費的 3D 網站提示詞嗎？
是的。這篇文章中的六個都已完整提供且可免費複製，DocsBot 和 MotionSites 的免費方案也提供更多。付費資料庫主要是讓你獲得更多數量與經過預先測試的多樣性，而不是不同類型的 prompt。
這些提示詞可以在 Lovable 或 Bolt 中使用嗎？
是的，但要做一項調整：刪除「單一檔案 HTML」的要求，因為那些平台會建立 React 專案。其餘部分保持不變——場景主題、動作驅動、互動，以及效能護欄都可以直接沿用。
使用 3D 網站提示詞需要先了解 Three.js 嗎？
不要用於生成，要用於少量迭代。上面的提示詞已嵌入必要的 Three.js 詞彙。了解 OrbitControls 或片段著色器是什麼，有助於你提出精確的修改，而不是盲目地重新生成。
製作 3D 網站最好的 AI 工具是什麼？
對於單檔效果或 hero 區塊，直接使用 Claude：你保留原始碼並按 token 付費。對於有後端的代管網站，可使用 Lovable 或 Bolt 的免費方案，或者如果你特別想要匯出的 React Three Fiber 程式碼，則可使用 VULK。
3D 英雄區塊會影響效能或 SEO 嗎？
只有在你允許的情況下才會如此。將 3D 限制在單一場景內，加入上方的行動裝置防護措施，並將你的標題與內文維持為畫布上方真正的 HTML，就像所有六個提示詞所做的那樣。爬蟲會讀取文字層，而 Core Web Vitals 主要取決於頁面還載入了什麼其他內容。