3D Studio 是做什麼的？
將一組 3D 網頁技能作為單一工作流程執行。請求內容在 $ARGUMENTS 中。如果您的代理未填入該佔位符，則請求內容就是使用者在此技能旁輸入的內容。
1. 選擇技能
以下每個都是獨立技能。請依照您的代理載入技能的方式載入它們，並完全使用所示的名稱：在 Claude Code 中使用 Skill 工具，或在 Codex 和 Antigravity 中讀取其 SKILL.md。載入後，其指示將與此工作流程一同套用。第 4 節列出了各技能資料夾的查找位置。
務必載入這三個：taste-skill（藝術指導；可能以 design-taste-frontend 名稱安裝）、apple-design（流暢的物理運動、材質與深度）、threejs-fundamentals（場景、相機、渲染器、循環）。
當請求需要時，請加入對應的列：
| 請求涉及 | 載入技能 |
|---|---|
| 任何會動的東西 | animate、threejs-animation |
| 用程式碼建立的形狀、實例化、大量物體 | threejs-geometry |
| 表面、木頭、金屬、光澤 | threejs-materials、threejs-textures |
| 燈光、陰影、反射 | threejs-lighting |
| 點擊、拖曳、環繞、選取零件 | threejs-interaction |
| 自訂視覺效果 | threejs-shaders、threejs-postprocessing |
| 載入或壓縮 3D 模型檔案 | threejs-loaders、threejs-asset-pipeline |
| 從 Blender 建模或匯出 | blender-mcp（先確認 Blender 已安裝） |
| React 專案 | threejs-react-three-fiber、r3f-fundamentals |
| 效能緩慢、停頓、空白畫布、記憶體問題 | threejs-performance、threejs-debug-profiler |
| 等角圖、圖解或說明某事物運作原理的說明圖、或 A4 海報 | anatomy |
| 渲染成的影片或影片 | Remotion，參閱第 3 節 |
這些技能合計有數千行程式碼，全部載入會耗費建置所需的工作記憶體。這就是為何預設使用表格形式的原因。
- 加上
--all，無論請求為何，載入表格中的所有技能。 - 加上
--plan，列出您將要載入的技能及其原因，不要載入任何其他東西，然後停止。
用一句話說明您正在載入哪些技能。如果某個技能無法載入，請指出其名稱並繼續處理其他技能，不要因此停止。
在工作流程需要時才載入每個技能。如果某個技能以設定步驟開頭，或要求可能會中斷工作的問候語，請跳過該部分。
2. 依此順序工作
- 決定想法。 遵循
taste-skill進行藝術指導：閱讀簡報，擬定方向，撰寫文案。想法應源自主題。 - 將邏輯與 3D 分開。 任何涉及真實規則（算術、模擬、定價）的內容都應放在不包含 Three.js 的純模組中，並由測試覆蓋，這樣無需渲染任何東西即可確保其可信度。
- 將 3D 作為狀態的函數來建構。 幾何程式碼根據姿勢放置零件，且完全不了解規則。運動應是其進度的純函數，這樣它可以反向執行、在半途中斷、或為了減少運動而直接跳到結尾。
- 按需渲染。 僅在物體移動時才繪製，且在螢幕外完全不繪製，這樣閒置頁面就不會消耗資源，手機也能保持低溫。
- 使其完全可用。 需要具備畫布旁的實際按鈕、鍵盤操作、減少運動、沒有 WebGL 時的備用方案，以及在手機寬度下也能正常運作的版面配置。
3. Remotion
此技能組中不包含 Remotion 技能，因此請直接在專案中使用 remotion 套件。
- 透過匯入網站使用的相同場景建構程式碼來進行渲染，這樣影片和網站就不會產生差異。
- 每個影格都必須是影格編號的純函數。不要使用依賴前序影格的計時器或彈簧。
- 使用
remotion render <entry> <composition> <out.mp4> --gl=angle --codec=h264 --crf=24進行渲染。 - 已渲染的影片不會因場景變更而改變。請重新渲染，或告知使用者該影片已過時。
4. 在宣告完成前進行檢查
檢查工作使用兩個技能中的腳本。請依序在專案的 .claude/skills/ 和 .agents/skills/，以及 ~/.claude/skills/、~/.agents/skills/ 和 ~/.gemini/config/skills/ 中，透過名稱查找每個技能的資料夾。以下 <anatomy> 和 <taste> 代表這些資料夾。<taste> 的名稱可能是 taste-skill 或 design-taste-frontend。
使用 node <anatomy>/scripts/drive.mjs <url> --actions steps.json 以真實的點擊與拖曳來驅動真實瀏覽器。這兩個腳本都需要 Node 22 或更新版本，以及已安裝的 Chrome、Edge 或 Chromium。
- 靜態畫面與動態流程應分開執行。
shot動作可以凍結動畫直到下一次捕捉。使用--reduced來拍攝靜態畫面，這會跳到最終狀態；並在執行動態流程時使用eval檢查，且期間不要截圖。如果影格出現空白或過時，請在將其視為錯誤之前重新拍攝。 - 測試真實的控制項。 優先點擊實際按鈕，而非直接設定狀態，並且包含反向操作以及在中途中斷動畫。
- 檢查設計。 執行
node <taste>/scripts/inspect.mjs <url> --widths 1440,390，然後自行檢視截圖。通過檢查工具只是最低標準，而非評分。 - 執行測試並閱讀主控台輸出。 然後在正式建置版本（而非僅在開發伺服器）上重複主要流程。
報告已驗證的內容，並明確說明未驗證的內容：真實裝置、聲音以及以全速觀察到的運動通常不在本技能的範圍內。
5. 安裝任何新項目
如果表格中的某個技能遺失，使用者可以使用 npx github:mithulpranav24012008/3d-studio 安裝整個技能組。對於任務所需的任何其他技能或工具，請提供使用者指令並讓他們自行執行，以便他們看到安全性摘要。請勿使用 -y 來跳過確認。