svg-techo 是做什麼的？
使用 assets/lib/ 中可重複使用的 JavaScript 模組。透過生成器參數改變外觀。當任務需要新行為時，擴展適當的模組，然後驗證其正常進入點。
進入點
assets/lib/index.mjs導出materialKinds、svgKinds、referencePresets、renderSvg(kind, options)和createLightRenderer(canvas, options)。assets/lib/index.d.mts提供 TypeScript 宣告。scripts/render-svg.mjs是 Node CLI。scripts/self-test.mjs檢查幾何、輸入邊界、確定性、迴圈和 RGBA 輸入。scripts/browser-check.html檢查 SVG 解碼、WebGL、alpha、相位和釋放。
相對於此 SKILL.md 解析這些路徑。在匯入之前，將完整的 assets/lib/ 目錄複製到目標專案的版本控制原始碼中，保留內部模組匯入。
工作流程
- 確定資產的用途、尺寸、調色板、動畫和透明度需求。在選擇顏色之前，閱讀專案現有的設計標記。
- 閱讀 API 參考。複製
referencePresets[kind]並編輯生成器的巢狀options[kind]配置。確認半徑、間距、計數和筆畫寬度的含義。 - 對於網站或行銷影片，閱讀 整合指南 的相關章節。將參數和種子保留在專案中，以便後續版本可以重現該資產。
- 執行程式碼並檢查實際輸出。檢查 SVG 尺寸、透明度和裁剪。檢查 WebGL 編譯、渲染和清理。檢查目標工作流程中的影片幀數、迴圈轉換和 alpha。
- 交付請求的程式碼、呼叫範例、配置和輸出檔案。記錄實際使用的參數。
模組
| 模組 | 職責 |
|---|---|
geometry.mjs | 分派到 geometry-a、geometry-b 和 dot-matrix |
dot-matrix.mjs | 點尺寸、邊緣間距、形狀和佈局 |
fields.mjs | 分派到 fields-audited 處理輪廓線、半色調、ASCII 和像素碼 |
light.mjs | 使用明確相位的 WebGL 條紋和火焰渲染 |
common.mjs | 共享驗證、種子隨機性、相位標準化、XML 轉義 |
擴展規則
- 保持 SVG 生成器純粹且確定性。靜態生成器保持靜態，除非呼叫者更改其特定參數。啟用運動的 WebGL 和輪廓線接受相位。
- 跨影片幀保持種子固定。從幀號推導動畫參數。
- 新增 kind 或參數時，更新匯出、宣告、參數文件和相關檢查。
- 在改編為 React、Three.js 或 Remotion 時重複使用該函式庫。
- 點陣使用
dotMatrix.dotSize、spacing、layout和range。其預設直徑為 8，邊緣間距為 24。密度遵循 spacing 或 rows/cols。 - 在預期背景上檢查透明圖形。在目標編輯器中驗證解碼後的影片 alpha。
- 使用業務資料和標準編碼器處理機器可讀條碼。
範例任務
- 生成品牌色彩的輪廓線 SVG 並保留其參數。
- 根據 Remotion 幀號對
hudLines.rotation進行動畫。 - 使用產品影像 RGBA 作為半色調 alpha 遮罩或 ASCII 輸入。
- 調整光線渲染器的方向和能量參數，用於循環疊加層。