3D 網站工廠 是做什麼的？
以下 S 指的是此檔案所在的資料夾。必要條件：Chrome、Python 3、Node 22+。影片製作還需要 ffmpeg。
管線
┌──> 雕刻師 (3D 物件) ──┐
偵查員 ─────┤ ├──> 建構師 (縫合) ──> 評論家 ──┐
(計畫) └──> 動畫師 (動態) ──────┘ ^ │
^ 使用者批准計畫 └──── 修正，最多 3 輪 ┘
| 角色 | 簡介 | 產出 |
|---|---|---|
| 偵查員 | roles/scout.md | 計畫：事實、來自黃金標準參考的設計系統、畫面、3D 物件清單 |
| 雕刻師 | roles/sculptor.md | 每個 3D 物件一個 three.js 模組（或一個 Spline 場景） |
| 動畫師 | roles/animator.md | 解說循環、滾輪編舞、進場動畫 |
| 建構師 | roles/builder.md | 網站、所有內容縫合在一起、使用者互動功能接線 |
| 評論家 | roles/critic.md | 根據十個固定問題判定通過或失敗，並附帶修正方案 |
角色之間僅透過工作區中的檔案溝通：計畫在 _work/<slug>/ 中，程式碼在 sites/<slug>/ 中。
因此任何角色都可以獨立重新執行（「讓 3D 更亮眼」是雕刻師的工作，然後是建構師和評論家）。
執行角色。 如果你的工具可以啟動子代理（Claude Code、Codex、Cursor 等），請為每個角色啟動一個代理，並使用以下提示詞，同時執行雕刻師和動畫師：
你是 3D 網站工廠的 <角色>。閱讀
<S>/roles/<角色>.md和<S>/references/taste.md， 然後為網站<slug>執行你的角色，工作區位於<absolute path>。技能資料夾是<S>。 報告你寫了什麼以及你無法完成的任何事項。
如果不能，請依序自行扮演這些角色，在開始前閱讀每個簡介。 無論哪種方式，你是指揮者：你與使用者交談，檢查每個交接是否存在，並在關卡處停止。
使用者決定的關卡： 偵查員的訪談及其摘要（參考資料、外觀、主角概念、畫面、物件的成本），在開始任何付費項目之前，以及在最後。其他一切都在不詢問的情況下執行。
進度。 一次建置可能需要一個小時。在每個角色開始之前，用一句話告訴使用者它在做什麼（「雕刻師：建立粘土標誌，免費」），之後告訴它做了什麼。
任務
| 使用者說 | 任務 |
|---|---|
| 「設定」，首次使用，或沒有工作區存在 | A. 設定 |
| 「為我建置這個」、「為 X 建置網站」 | B. 建置 |
| 「讓我的網站變 3D」、「為這個網站加入 3D」 | C. 升級現有網站 |
| 「讓機器人跟隨游標」、「更改 3D」，對已建置網站的任何更改 | D. 更改 |
| 「加入影片」、「加入影片」 | E. 影片 (references/film.md) |
A. 設定
sh "$S/scripts/init.sh" # 建立 ./website-factory，永不覆蓋
用簡潔的語言告訴使用者：文字放在 content/ 中，標誌放在 assets/logo/ 中（SVG 最好，可以變成 3D），
圖片放在 assets/images/ 中，3D 模型放在 assets/models/ 中，他們喜歡的網站放在 assets/style/ 中。
然後說「為我建置這個網站」。在有內容或用戶要求示範之前，不要開始建置。
B. 建置
每個 content/ 中的檔案一個網站（跳過以 _ 開頭的名稱，以及已經在 sites/ 中有資料夾的檔案，除非要求重建）。slug = 以 kebab-case 命名的檔案名稱。
執行完整管線。最後，寫入 sites/<slug>/REPORT.md 並告訴使用者：每個 3D 物件和動態是什麼，你做的每個他們未明確決定的選擇，文字變更 (copy.md)，花費的積分，評論家的判決，仍開放的項目，以及如何預覽：python3 -m http.server 8080 --directory sites/<slug>。
然後提供發佈選項（請參閱發佈）。
C. 升級現有網站
在使用者自己的網站資料夾內執行此操作。該網站保持為他們所有：相同的設計，相同的文字。
- 偵查員掃描程式碼並寫下計畫。提出：哪些物件放到哪裡，哪些東西會移動，哪些檔案會更改。 等待使用者同意。
- 如果是 git 儲存庫，建立一個分支。盡可能少改動檔案。不重新設定樣式、不重新措辭、不重新排序或升級依賴項。
- 雕刻師和動畫師製作他們的部分。建構師以網站原生的方式加入它們：
- 純 HTML：如
roles/builder.md中所述。 - React、Next、Vue、Svelte、Astro：一個僅限用戶端的元件，它渲染盒子並在掛載後匯入物件模組。將
stage.js和模組放在框架使用的靜態或原始碼資料夾中。如果專案已經使用 three.js 或 react-three-fiber，則使用該方式而不是匯入地圖。 - WordPress：一個子主題或自訂 HTML 區塊。永遠不要使用父主題或直接編輯上線網站。
- 純 HTML：如
- 關卡：網站自身的建置和測試仍然通過。在其開發伺服器執行時，
node "$S/scripts/probe.mjs" <url> _work/before在更改前執行，_work/after在更改後執行 （將_work/排除在 git 之外）。評論家進行比較。check.py僅用於任務 B 的頁面。 - 顯示差異以及如何預覽。除非使用者要求，否則永遠不要推送或部署（請參閱發佈）。
D. 更改
找出擁有該更改的角色，只重新執行該角色的部分，然後重新執行建構師的關卡和評論家。
Spline 場景
Spline 場景是 3D 的來源之一（請參閱 roles/sculptor.md）。
- 社群場景（免費，無需帳戶）：
sh "$S/scripts/browser.sh" embed <community-url>會列印出可嵌入的 URL。它會載入 Spline 的整個編輯器，首次訪問時大約需要 15 秒並顯示黑暗畫面。適合示範。對於正式網站，使用者需要在免費的 Spline 帳戶中開啟它，進行「混搭」，然後選擇「匯出 > 公開 URL」，並提供給你my.spline.design/...連結，該連結會在一兩秒內載入。 - 在頁面上：
<div class="f-3d" data-spline="URL" data-title="這是什麼" style="height:100vh"></div>。factory.js會懶加載它，淡入顯示，並將其放大以隱藏檢視器的按鈕。 - 僅當場景的授權要求時，在頁尾中標註場景作者的姓名。
- 頁面仍然需要在游標懸浮於其上時能滾動（
probe.mjs測試此功能）。如果不能，則加入data-shield。 - Spline 連接器 (
claude mcp add --transport http spline https://mcp.spline.design/mcp) 可以建立新場景。它有每日呼叫限制：僅在使用者要求時使用，並告訴你使用了多少次呼叫。
素材與金錢
3D、圖片和影片的來源，要使用的提供者（Higgsfield 連接器或 CLI，其他連接的生成器，或免費的手動途徑），以及付費生成的規則：references/assets.md。
發佈
僅在使用者要求時使用。使用已連接的工具：主機連接器（Hostinger、Netlify、Vercel 等暴露了部署工具），或使用 GitHub CLI 部署到 GitHub Pages，或告訴使用者要上傳哪個資料夾。在首次部署之前確認目標（網域或儲存庫）。之後，僅在使用者要求時重新部署更改。
始終成立的規則
- 金錢。 程式碼建立的 3D、Spline 社群場景和動態是免費的。任何付費項目（AI 圖片、影片或 3D、Spline 方案）都需要使用者在本次對話中對報價成本的同意，每次都需要。先試行一個畫面。
- 真實性。 僅使用使用者提供的事實。絕不發明數字、價格、客戶、推薦語、獎項或標誌。
- 品味。 不使用
references/taste.md中低品質清單中的任何內容。 - 無障礙。 減少動畫偏好會得到一個完成的靜態頁面。圖片有替代文字。文字有可讀的對比度。
- 他人作品。 永遠不要複製參考網站中的文字、圖片或程式碼。保留素材授權要求的任何標註；不加入其他標註。
- 清理。 停止你啟動的所有伺服器和瀏覽器。