ThreeUI 3D 頁面
將 ThreeUI 視為精心策劃的視覺來源，而非盲目貼上的提示集合。目標是建立一個連貫、可投入生產的介面，其中的英雄效果、排版、間距、動態與內容彼此強化，共同支撐一致的藝術方向。
工作流程
-
根據使用者需求建立設計簡報：產品、目標受眾、期望氛圍、主要內容，以及任何必要的品牌限制。不要憑空捏造產品聲明，也不要用展示用文字取代使用者提供的內容。
-
搜尋捆綁的目錄：
node scripts/threeui.mjs search "液態金屬啟動按鈕" node scripts/threeui.mjs search "奢侈品香水 落地頁 煙霧" -
挑選兩到三個相容的候選項目，然後檢視最強的那個：
node scripts/threeui.mjs show <item-id> node scripts/threeui.mjs guide <item-id> -
選擇一個錨點效果。最多添加一個輔助的 ThreeUI 元素，且僅在該元素能服務明確的層級結構或互動角色時才這麼做。不要為了讓頁面看起來更豐富而堆疊無關的著色器。
-
在修改應用程式程式碼之前，請閱讀 references/integration.md。該文件包含了來源、資源、組合、效能與驗證規則。
決策規則
- 讓效果與內容相匹配。一個平靜的產品頁面不應自動獲得高能量的粒子場，而一個儀表板也不應使用電影級的全頁面著色器作為其主要表面。
- 當任務是建立一個全新網站時，優先選用「落地頁」和「英雄」類別中的全頁或英雄效果。當現有 UI 需要更多層次感時，優先使用背景元件；當需求範圍較小時，優先使用按鈕或 UI 元件。
- 使用目錄中的
runtime、interaction、asset和variants元數據來排除與目標技術棧或效能範圍衝突的候選項。 - 將影像與動畫效果視為設計中的一個圖層。周圍的版面、字體比例、留白、對比度與行動呼籲仍然是決定最終成品是否完整的關鍵。
- 如果目錄中沒有合適的社群元件，請清楚說明，並從專案現有的技術棧中建置最接近的合適解決方案。不要聲稱使用了 Pro 或無可取用的 ThreeUI 資源。
來源規則
- 社群來源採用 MIT 授權。保留出處與捆綁的授權聲明；請參閱 references/THIRD_PARTY_NOTICES.md。不要重新散佈遠端的 ThreeUI 縮圖或預覽圖。
- 優先使用 npm 套件
@designcodeio/threeui及其文件中定義的匯入名稱。不要將整個範本目錄複製到目標專案中。 - 如果存在實作指南，請在自行修改前先遵循該指南。指南會標明權威的原始碼檔案、資源、執行時期版本與行為。
- 當確切的來源可用時，絕不要用粗略的視覺近似來取代自訂的著色器、幾何體或資源。
- 僅在使用者擁有自己的授權存取權限時，才能使用 Pro MCP 或 CLI。絕不要在生成的專案中請求、儲存或嵌入憑證。
完成檢查清單
在完成之前，執行目標專案中存在的建置、測試與 lint 指令。檢查桌面版與行動版渲染、瀏覽器控制台輸出、減少動畫行為，以及適用的 WebGL 備援路徑。報告已執行的確切檢查項目，以及任何無法完成的驗證內容。