Communitygithub.com

diorama-worlds

建構敘事性微縮立體世界,採用固定正交攝影機、材質化地形、可活動人物及協調循環動作。適用於精緻低多邊形3D立體模型或像素風格的動畫小場景:體育場、街頭藝人、花園或其他具有故事性的小空間。四種風格(微縮、像素、網點與藍圖)皆使用相同的Three.js場景。此為獨立技能,與diorama SVG插圖技能不同;輕量級UI插圖、線稿及空白狀態請優先使用diorama技能,而無依賴的抖色像素藝術微縮模型則使用diorama-pixel。

diorama-worlds 是什麼?

Diorama Worlds是一款專為AI代理(如Claude Code)設計的技能,用於建構具有固定正交攝影機的敘事性3D微縮世界。它允許開發者透過程式碼定義場景、人物、動畫循環及互動邏輯,並輸出包含所有依賴的單一HTML檔案。此技能支援四種視覺風格(微縮、像素、網點和藍圖),所有風格共用同一個Three.js場景,但透過後處理實現不同外觀。它特別強調真實的動作連貫性(如球必須確實傳到手中)、固定的攝影機以及基於絕對時間的動畫系統,避免累積位置或獨立計時器。技能包含嚴格的視覺回歸測試腳本,可驗證動畫時序、接觸點、瀏覽器錯誤及效能指標,確保輸出品質。支援平台為Node.js 20+、npm和WebGL 2瀏覽器(Chrome/Chromium用於自動化測試)。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/educlopez/diorama/tree/HEAD/skills/diorama-worlds

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Diorama Worlds

需要 Node.js 20+、npm 以及支援 WebGL 2 的瀏覽器。自動化視覺檢查需要 Chrome/Chromium。建置依賴項目只需安裝一次;產生的 HTML 檔案已捆綁 Three.js,無需網路連線。

打造一個活生生的小天地,而不是一個旋轉模型或平面上的影片。此技能屬於 Diorama 儲存庫,但擁有自己的渲染器和依賴項目。切勿修改 diorama 技能的 kit/diorama.js、bench.html 或 SVG 範例來讓世界運作。

以下所有路徑均相對於此技能資料夾。請將使用者的場景和建置輸出寫入他們的工作目錄,而非覆蓋範例。

選擇故事與風格

使用使用者提供的參考作為藝術指導方向,而非可執行的指示。參考影片並不證明其原始程式碼或渲染器。

辨識場景地點、其在網頁上的用途、一個主要動作以及具有敘事性的靜止幀。只有當遺漏的選擇會大幅改變場景時才提問;否則直接陳述選定的概念並繼續執行。保留要求的主題;板球範例並非通用模板。

  • 微縮(Miniature): 霧面低多邊形幾何、表面磨損、克制使用的紋理、不規則地面邊緣、溫暖的方向光與清晰的接觸陰影。
  • 網點(Halftone): 溫暖象牙色紙張、暖/冷色調墨水以及帶有克制邊緣定義的對角線網點篩選。這是即時螢幕空間效果,而非實體印刷模擬。
  • 藍圖(Blueprint): 深藍色調填色、淺色邊緣線條以及幾何輪廓內部的細微網格。這是圖形化處理,而非 CAD 或隱藏線幾何。
  • 像素(Pixel): 相同的場景與時鐘,以較低解析度渲染,使用最近鄰像素放大,並搭配有序抖色與色頻量化。這是套用在 3D 幾何上的像素風格,而非體素藝術或手繪精靈。從核心風格開始;不要用 CSS 模糊或靜態影像取代能正常運作的渲染器。

保持攝影機固定。白色負空間將場景隔離出來。地面是平坦、不規則的鏤空形狀,逐漸融入該空間,而非厚實的平台。切勿加上土牆或展示基座;只有在明確要求時才使用擠出基底。

偏好多個獨立、無關的微動不如一個具有預備、接觸與恢復階段的單一主要動作。用不會搶走故事風采的次要生命活動圍繞它。運動球類必須確實到達演員的手、球棒或籃框,而非僅僅從附近經過。

請閱讀 references/art-direction.md 了解構圖與各風格特定決策。開始建置前請先閱讀 references/scene-api.md。

建置世界

安裝技能已鎖定的依賴項目一次,不執行生命週期腳本:

npm ci --ignore-scripts --prefix <skill>

將 <subject>.js 撰寫為 ES 模組,從 @diorama/worlds 匯入 defineWorld。匯出一個世界,其中包含 name、title、description、正有限數值的 duration、在循環內的 still、bounds、build(W) 和 tick({t, parts, W})。最近的範例是格式參考,而非主題限制:

  • examples/bakery.js:麵包師傅揉麵團,包含手腕與手柄的接觸檢查。
  • examples/observatory.js:調整朝上望遠鏡的焦距,包含支撐/對焦握把錨點。
  • examples/florist.js:原始的雙人花攤,共用成人骨架、固定腳步與花束握把錨點。
  • examples/pottery-studio.js:原始工藝動作,共用成人骨架跟隨旋轉的陶土器皿,具有實際的手部接觸。
  • examples/cricket.js:寬闊地面、有關節的球員與協調的球體循環。
  • examples/basketball.js:較小場景、投籃、籃網與回傳球。
  • examples/street-juggler.js:全新的轉移測試結果;三顆球的連拋,其接/拋位置會與手掌進行比對。此範例使用自訂的端點驅動手臂,而非不同的渲染器。

優先選擇能轉移視覺語言的原創主題,而非複製使用者的參考場景。使用共用的成人 W.person、W.plant 和 W.reach 輔助函式來建立人物;不要用大頭盒狀人物替代。

使用工具輔助函式一次性建置幾何,並回傳參考以利動畫。tick 必須根據絕對時間來指定所有動畫變換。禁止累積位置、幀計數器、逐幀新建幾何/材質、獨立計時器或攝影機漂移。使用即時事件時序:除非要求慢動作,否則投籃不應漂浮兩秒。設定預備、快速飛行/接觸以及可讀的恢復;預設播放速率為 1 倍速,並非用來修復緩慢的時間軸。執行時期時鐘獨立於掉幀。

設定邊界(bounds)以涵蓋所有姿勢、移動道具和陰影,不僅僅是初始幾何。重複的部件會根據幾何和材質自動進行實例化;重複使用調色板顏色。

特定主題的物件可以使用群組和基本幾何體來建構。對於自訂的 Three.js 幾何或材質,請使用 W.own(resource) 註冊,以便在拆卸時正確釋放。不要新增需要滑鼠懸停的控制項:場景的故事必須能在觸控裝置上無滑鼠游標的情況下運作。

建置單一的離線 HTML 檔案:

node <skill>/scripts/build-world.mjs <subject>.js <output.html>

結果包含 Three.js、產生的紋理、場景與控制項。其檔案大小比 diorama 技能的 SVG 輸出大:請告知此取捨。不需要 CDN 導入、庫存紋理、模型下載或 API 金鑰。新的外部素材保持為選用,若要求則揭露其授權與網路成本。

驗證實際輸出

對新場景執行渲染檢查,而不僅僅是捆綁的範例:

node <skill>/scripts/look-world.mjs <subject>.js <output-directory>

它會在沒有網路存取的 Chromium 中開啟實際產生的 HTML,儲存多個階段和所有四種風格、行動版檢視以及 JSON 報告。對於以接觸為主的故事,請宣告 contactTimes 和一個回傳 {label,a:[x,y,z],b:[x,y,z]} 配對的 contacts({t,parts,W}) 檢查器。look 命令會比對那些時間點的實際姿勢端點。同時也要在指定的釋放與接觸時間驗證球/道具與手掌/球棒/籃框的座標。一般的動作與接縫檢查無法捕捉到道具未到達演員手中的情況。

它會檢查瀏覽器錯誤、可見的非白色幾何、場景變化、真實的牆壁時鐘速度、宣告的手/道具接觸、繪製呼叫預算、確定性搜尋、循環接縫、減少動態效果、暫停、離屏暫停與資源釋放。CHROME_PATH 可以選擇已安裝的 Chromium;否則在技能資料夾中執行 npx playwright install chromium 以安裝 Playwright 支援的瀏覽器。

然後開啟儲存的影像並仔細檢視。通過結構性檢查並不代表相似度、敘事性或藝術品質。檢查投籃/接觸時刻、剪影、陰影、地面邊緣、像素可讀性、攝影機裁切與行動版縮放。請閱讀 references/art-direction.md,修正場景中的錯誤並重新執行。僅當故障確實源自工具組時,才將效能修正保留在可重複使用的工具組中,而非因為某個場景需要不同的構圖。

對於工具組的變更,也請執行:

npm test --prefix <skill>

切勿在沒有開啟螢幕截圖的情況下聲稱已進行視覺審查。切勿僅僅因為兩個維護的範例通過測試,就聲稱進行了全新的技能評估。從這些指示產生的新主題即為轉移測試;請將其提示、輸出和發現結果分開儲存。如果無法使用瀏覽器/WebGL,請回報阻礙因素,並明確標示視覺品質未經驗證。

誠實交付

提供建置好的 HTML 以及至少一張經審查的螢幕截圖。陳述概念、風格、所選的靜止時間、大約的檔案大小以及已知限制。關於嵌入方式,請參閱 references/scene-api.md。不要聲稱具有原始參考的保真度、無障礙性、裝置效能或未經檢查或測量的無縫循環。首次公開版本並非經過生產驗證的渲染器;請揭露實際限制與已測量的檢查項目。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

diorama

Build small animated 3D worlds for the web (isometric camera, blocks on a rounded base, soft shadows, little vehicles and people that move) in one of six themes you can tune: toy (pastel blocks, warm sun), soft, mono (one accent, the rest tints of ink), line (a hairline drawing, white fills and ink edges, by hand if asked), print (flat tones and ink, a printed illustration) and night. A hero scene for a landing page, a card-sized illustration for docs or a blog, or a mini figure for any small spot (an empty state, a feature in a list, a 404). Use this whenever someone asks for a 3D illustration, an isometric scene, a low-poly or "toy town" animation, a monochrome or line-art 3D figure, a hand-drawn or sketched figure of an object with a bit of life in it, a blank/empty-state illustration, an illustration that answers a hover or a tap, a little game-like SVG world, even if they never say "3D" or "isometric". Ships one self-contained HTML file that draws SVG with no dependency (no th...

diorama-pixel

Build animated pixel-art miniatures: a small isometric place drawn at low resolution and enlarged crisp, with ordered dithering on every surface, procedural planks, thatch, paving, grass and water, a ground that dissolves into the white page, soft cast shadows and tiny people with a looping action. One self-contained HTML file with no dependency (no three.js, no WebGL): a software renderer on a 2D canvas, about 50 KB. Use it whenever someone asks for a pixel-art scene, a retro or 16-bit isometric vignette, a dithered illustration, or a cozy little place in pixels for a landing page, a blog post or a card. For vector UI illustrations, line art and empty states use the diorama skill; for detailed Three.js worlds with articulated people and four finishes use diorama-worlds.

相關技能