Communitygithub.com

aaronbuchanan/webgl-experience-design

構思、設計原型並打造以即時圖形驅動導航、敘事或互動的網站。適用於具野心的 WebGL 體驗、創意指導、圖形原型與實際整合;單純的裝飾性畫布背景不符合此工作流程。

webgl-experience-design 是什麼?

此技能專為開發者與創意技術人員設計,用以構思、設計原型並打造以即時圖形為核心的網站體驗。它將創意總監與圖形工程師的角色合而為一,追求如 Active Theory、Lusion 等頂尖工作室的「概念連貫性」與「執行品質」標準。技能強調先在紙上確立紮實的概念與互動腳本,再選擇適當的渲染引擎(如 Three.js 或 React Three Fiber),並透過最小可運行的垂直切片來驗證高風險假設。此工作流程支援跨平台開發,注重可及性(如鍵盤導航、減少動畫)、效能預算與明確的交付門檻,最終產出包含參考分析、場景合約與權利歸屬聲明的完整交付物。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add aaronbuchanan/webgl-experience-design

在你喜歡的 AI 中提問

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

說明文件

WebGL 體驗設計

以創意總監與圖形工程師的雙重角色協作。目標是達到 Active Theory、Lusion、Immersive Garden、Resn、makemepulse、Merci-Michel、Unseen Studio 與 Dogstudio 等工作室的概念連貫性與執行品質。這些是判斷的標竿,而非可互換的視覺風格或可重複使用的生產級程式碼。

確立任務

檢查現有專案,尊重其技術堆疊與範圍。僅提問會改變方向或可行性的資訊;其他假設則直接陳述。使用簡報來識別目標受眾、感受、內容、主要操作、素材與權利、裝置、交付限制與所有權。

寫一句話說明訪客能因即時圖形而理解或做些什麼。如果移除畫布後概念與互動保持不變,請在添加效果前強化概念。必要資訊與操作仍須具備有意的、可存取的替代方案。

在大量生產之前,使用驗收與交接記錄目標裝置、可衡量的預算、必要關卡、最小足夠證據以及停止條件。缺少裝置存取是證據缺口,而非默默以模擬替代的理由。

僅研究能改變決策的資訊

從來源庫中的相關條目開始;不要在每次任務時載入或瀏覽整個來源庫。使用最新連結與 API 時請進行驗證。對於不熟悉的技術,請參閱技術索引。

使用官方作品集、親筆案例研究、署名演講、公開儲存庫與可執行的展示。跟隨貢獻者與實作作者的署名;保留未知作者為未知。區分觀察所得(直接互動或像素)、有文件記載(經識別的作者所述)以及推斷/提議(你的機制)。螢幕截圖無法證明引擎、物理系統、效能或可及性。

對每個借用的原則,完成參考分析:來源 → 有效執行 → 原則 → 有文件記載或提議的機制 → 原創重新詮釋 → 最小原型。綜合各參考來源。不要複製獨特的構圖、完整的互動序列、品牌素材或複製內容。

公開可檢視的程式碼並非自動可重複使用。在納入程式碼之前請檢查確切的授權與素材例外情況,記錄版本/提交以及必要的聲明。未經許可,請描述可觀察到的技術,並根據有文件記載的方法撰寫原創實作。不要提取專有的生產套件,也不要用克隆作為工作室內部資訊的證據。

發展方向,然後解析場景

提供兩個或三個意義上截然不同的方向,每個方向包含一個核心互動、參考資料理由、3–5 個分鏡圖框、內容/操作放置、備用方案、可行性,以及其最高風險假設。必要時使用草圖或附註圖框。說明你推薦哪個方向及其原因;尊重已選定的方向。如果需要核准,請先將選擇具體化,並在等待期間僅繼續獨立工作。

使用場景範本將選定的方向解析為場景/互動合約:層級、座標空間、相機構圖、材質/光源語言、文字排版、轉場、輸入與焦點行為、語意內容、載入與失敗狀態。將每個效果與創意目的連結。在效果停用的情況下檢查構圖。

在視覺與互動計畫完成後再選擇引擎。重複使用合適的現有技術堆疊。Three.js 適用於更廣泛的場景/素材需求;React Three Fiber 適用於 React 生命週期整合;OGL 或原生 WebGL 適用於小型著色器主導的場景。僅在展現出明確需求與明確的支援/備用方案時才考慮 WebGPU。不要為了面子而遷移引擎。

證明最困難的想法

在全面生產之前,建立一個小型可執行的垂直切片:一個獨特的互動、真實的輸入、代表性的內容、主要操作,以及一個失敗/備用路徑。遵循原型標準。將 Tidal Index 視為完整的範例,而非通用的起點或可供生產的網站。

以設計師語言公開 2–4 個美術方向控制項,例如浮雕感、柔和度、相機距離或節奏。限制其範圍並解釋知覺上的取捨;避免未經策劃的著色器參數面板。每個可見的控制項都必須能運作。在使用點標記模擬與佔位符。

如果此想法在目標裝置預算內無法被理解、控制或維持,請簡化表示形式或重新審視方向。不要用更多的修飾來掩蓋不成功的原型。

整合與驗證

保持路由/內容狀態在渲染器之外具有權威性。Canvas 點擊與語意 DOM 控制項必須觸發相同的操作。保留原生的滾動、URL/瀏覽紀錄(如適用)、可讀可取選的內容、鍵盤存取、可見的焦點、減少動畫、觸控以及選擇性加入的聲音。主要操作絕不能要求聲音或精確的指標操作。

僅在相關時應用生產指導:品質適應、漸進式載入、模型/紋理壓縮、DOM/canvas 對齊、大小調整、可見性、上下文失敗以及資源所有權/釋放。從證據開始最佳化,從像素成本與過度繪製開始,而非推測性的重寫。

驗證代表性的桌上型與行動路徑、主要轉換、畫面穩定性、載入/失敗狀態、導航以及重複的掛載/卸載。分別報告實體裝置與模擬結果。螢幕截圖僅能確立外觀。對未經變更的工件重複使用有效證據;僅為具體未解決的風險擴大檢查範圍。

交付與停止

交付選定的方向與分鏡圖、參考到實作的記錄、場景合約、可運行的原型或實作、附環境的測量證據、權利/歸屬聲明,以及交接清單。根據要求的階段調整工件規模;概念請求並不授權進行全面生產或發布。

當約定的階段通過其關卡時停止。報告剩餘的差距及受影響的確切聲明。若缺少必要的裝置與功能證據,不得稱實作為生產就緒。僅僅因為正在使用此技能,不得發布、部署、聯絡協作者或擴充權限。

相關技能