AI 做視覺選哪個套件？JavaScript 圖表、動畫、3D 與影片框架總盤點
請 AI 做一張互動圖表、一段片頭動畫或一個 3D 展示，它第一個要決定的就是「用哪個套件」。選對了，一次就做出來；選錯了，不是卡頓就是來回修不好。這篇依照「你想做什麼」分成十類，盤點目前可用的 JavaScript 視覺框架，並標出在 Claude 裡使用時要注意的地方。
本文的版本與授權皆以 2026 年 9 月 28 日 npm 上的最新版查證。表格只列「最適合做什麼」，不列完整功能；選型時先看用途，再看授權。
先記住一件事：所有畫面與聲音都落在五個瀏覽器 API 上
網頁上的圖、動畫和聲音，最後都會落到五個瀏覽器原生 API 之一。套件只是讓這些 API 更好寫。知道底層是哪一個，就能預判效能與限制：
| 原生 API | 特性 | 適合 |
|---|---|---|
| DOM／CSS | 一般網頁元素，可選取、可點選、無障礙最好 | 文字、按鈕、介面動畫 |
| SVG | 向量圖形，每個形狀都是一個元素，放大不失真 | 圖表、圖示、數百個以內的物件 |
| Canvas 2D | 一張點陣畫布，畫上去就變成像素 | 插畫、數千個物件、逐像素效果 |
| WebGL／WebGPU | 交給 GPU 算，能處理數萬到數百萬個點 | 3D、大量粒子、著色器特效 |
| Web Audio | 瀏覽器內的音訊處理與合成 | 合成器、音效、節奏排程 |
經驗法則：需要點選互動、物件不多，用 SVG；物件上千、要流暢，改 Canvas 或 WebGL。AI 做出來的東西會卡，最常見的原因就是用 SVG 畫了幾千個點。
一、資料圖表
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| Chart.js | 長條、折線、圓餅等常見商業圖表，設定簡單 | Canvas | MIT |
| Apache ECharts | 大量資料、儀表板、地理熱圖，內建互動豐富 | Canvas／SVG | Apache-2.0 |
| Vega-Lite | 用一份 JSON 規格描述圖表，AI 很容易產生正確規格 | Canvas／SVG | BSD-3 |
| Observable Plot | 探索性分析，幾行程式就出圖，由 D3 團隊開發 | SVG | ISC |
| Plotly.js | 科學與工程圖表、3D 曲面、縮放與滑鼠提示 | SVG／WebGL | MIT |
| D3.js | 完全客製的視覺化；比例尺、資料繫結、轉場的底層工具箱 | SVG（也可 Canvas） | ISC |
| ApexCharts | 外觀精緻的儀表板圖表 | SVG | 雙授權，見下方授權段 |
給 AI 的建議：一般報表先指定 Chart.js 或 ECharts，要可重複產生的規格用 Vega-Lite，只有要做沒人做過的圖才用 D3。D3 功能最強，但程式碼最長，AI 出錯的機會也最高。
二、2D 繪圖與可操作的畫布
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| 原生 Canvas 2D | 插畫、漸層、簡單動畫，不想多載一個套件時 | Canvas | 瀏覽器內建 |
| Konva | 可拖曳、縮放、選取的物件，適合做編輯器與白板 | Canvas | MIT |
| Fabric.js | 圖片編輯、貼圖、文字排版的物件模型，可匯出 JSON | Canvas | MIT |
| Paper.js | 向量路徑運算：布林運算、曲線平滑、路徑交點 | Canvas | MIT |
| Two.js | 同一套 API 可輸出 SVG、Canvas 或 WebGL | SVG／Canvas／WebGL | MIT |
| Rough.js | 手繪、素描風格的線條與圖形 | Canvas 或 SVG | MIT |
| p5.js | 生成藝術、創意程式、教學示範 | Canvas（也有 WebGL／WebGPU） | LGPL-2.1 |
三、大量物件的高效能 2D
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| PixiJS | 數萬個精靈圖（sprite）與粒子、2D 遊戲、濾鏡特效 | WebGL／WebGPU | MIT |
當 Canvas 2D 開始掉幀，PixiJS 通常是第一個換上的選項：寫法仍是 2D 的思維，底層改由 GPU 繪製。
四、3D
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| Three.js | 最主流的網頁 3D 函式庫，範例與教學最多 | WebGL，另有 WebGPU 渲染器 | MIT |
| React Three Fiber | 在 React 專案裡用元件寫 Three.js | 同 Three.js | MIT |
| Babylon.js | 功能完整的 3D 引擎：物理、GUI、XR 一應俱全 | WebGL／WebGPU | Apache-2.0 |
| PlayCanvas | 偏遊戲與產品展示的引擎，也有線上編輯器 | WebGL／WebGPU | MIT（引擎） |
| A-Frame | 用 HTML 標籤寫 3D 與 VR 場景，門檻最低 | WebGL（基於 Three.js） | MIT |
| OGL | 極簡的 WebGL 函式庫，體積小 | WebGL | Unlicense |
AI 對 Three.js 最熟，範例量也最大；除非有特定需求，3D 先指定 Three.js。要做完整的互動遊戲或 XR 應用，再考慮 Babylon.js。
五、著色器與低階 GPU
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| GLSL | 直接寫給 GPU 的著色器語言：液態漸層、雜訊、全螢幕特效 | WebGL | 語言本身 |
| Three.js TSL | 用 JavaScript 寫著色器，可同時輸出 WebGL 與 WebGPU | WebGL／WebGPU | MIT |
| regl | 以函式風格包裝 WebGL，適合資料密集的繪圖 | WebGL | MIT |
| twgl.js | 減少 WebGL 樣板程式碼的輕量工具 | WebGL | MIT |
六、動畫
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| GSAP | 時間軸編排、緩動曲線、捲動觸發動畫，業界最常用 | DOM／CSS／SVG／任意物件 | 免費標準授權（有限制） |
| Anime.js | 輕量、錯開（stagger）序列動畫；v4 另有 Web Animations API 模組 | DOM／CSS／SVG | MIT |
| Motion | React 與原生 JS 的介面動畫、手勢、版面轉場 | DOM／Web Animations API | MIT |
| Lottie（lottie-web） | 播放設計師從 After Effects 匯出的向量動畫 | SVG／Canvas | MIT |
| Theatre.js | 用視覺化時間軸調整動畫與 3D 鏡頭 | 任意 JS 物件 | 核心 Apache-2.0，編輯器 AGPL-3.0 |
| Web Animations API | 瀏覽器原生動畫，不需套件 | DOM | 瀏覽器內建 |
七、物理模擬
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| Matter.js | 2D 剛體：碰撞、重力、堆疊，上手最快 | 純運算（內建 Canvas 渲染器） | MIT |
| Planck.js | Box2D 的 JavaScript 版，2D 物理更精確 | 純運算 | MIT |
| Rapier | Rust 寫成、編譯成 WebAssembly，2D／3D 都有，效能高 | WebAssembly | Apache-2.0 |
| cannon-es | 搭配 Three.js 的 3D 物理 | 純運算 | MIT |
八、聲音
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| Tone.js | 合成器、節奏排程、效果器，也能離線把音樂算成音檔 | Web Audio | MIT |
| Howler.js | 播放音效與背景音樂，處理各瀏覽器相容性 | Web Audio／HTML5 Audio | MIT |
九、地圖、流程圖、網路圖與數學式
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| Leaflet | 輕量互動地圖 | DOM／SVG／Canvas | BSD-2 |
| MapLibre GL JS | 向量圖磚地圖、3D 地形、大量資料點 | WebGL | BSD-3 |
| Mermaid | 用文字寫流程圖、循序圖、甘特圖 | SVG | MIT |
| Cytoscape.js | 關係網路圖、組織圖、知識圖譜 | Canvas | MIT |
| KaTeX | 在網頁排版數學公式 | DOM | MIT |
十、用程式碼做影片
影片也可以完全用程式碼產生：畫面由瀏覽器算出、逐格擷取，再用 ffmpeg 合成。好處是精準、可重現，改一個參數就能重新輸出，適合資訊圖表動畫、課程教材與片頭片尾。
| 工具 | 最適合 | 底層 | 授權 |
|---|---|---|---|
| Remotion | 用 React 元件寫影片，生態完整 | React／瀏覽器渲染 | 有條件免費，見授權段 |
| Motion Canvas | 用 TypeScript 寫程式化動畫影片，附即時預覽編輯器 | Canvas | MIT |
| HyperFrames | HeyGen 開源，用 HTML 與 GSAP 等網頁技術合成影片 | HTML／瀏覽器渲染 | Apache-2.0 |
無論用哪一套，要能逐格輸出都有同一個前提：畫面必須是時間的純函數。同一個時間點每次算出同一張畫面，不能依賴即時時鐘，亂數要用固定種子；聲音則用離線渲染（Web Audio 的 OfflineAudioContext，或 Tone.js 的 Tone.Offline）直接算成音檔。
在 Claude 裡使用：Artifact 與 Claude Code 的差別
這些都是公開的 JavaScript 套件，不是 Claude 的內建功能；Claude 的工作是選套件、寫程式、看成品修正。實際能不能跑，取決於你在哪個環境。
在 Claude 對話裡產生的 Artifact 網頁，外部腳本只能從 cdnjs、jsDelivr、unpkg 等少數 CDN 載入，其他主機一律被擋；網頁也不能從外部網址載入圖片、音訊影片、外部樣式表、字型檔（Google Fonts 除外）或資料。實務上會遇到的狀況：
- 大多數套件的程式可以直接載入：jsDelivr 會同步 npm 上的套件，指定精確版本載入即可。
- CSS 與素材要內嵌：Leaflet、MapLibre、KaTeX 的樣式表要直接寫進頁面，否則版面會亂；KaTeX 的數學字型會退回系統字型；音檔、3D 模型、貼圖要轉成 base64 內嵌，或改用 Tone.js 即時合成聲音、用程式生成幾何。
- 地圖底圖載不出來：Leaflet、MapLibre 的圖磚來自外部伺服器，在 Artifact 裡會被擋；要嘛改用內嵌的 GeoJSON 畫輪廓，要嘛到本機專案做。
- Lottie 動畫檔要內嵌：不能從網址讀 JSON，要把動畫資料直接寫進頁面。
- 聲音要先點一下：受瀏覽器自動播放限制，Tone.js、Howler.js 都要由使用者點選後才會出聲。
- Mermaid 不必載入：Artifact 會直接渲染 Mermaid 圖表。
- 需要打包工具的框架不適合：React Three Fiber、Remotion、Motion Canvas 這類要建置流程的工具，放到本機專案比較順。
在 Claude Code 等本機環境，就像一般前端專案用 npm 安裝，沒有上述限制；也能讓 AI 開無頭瀏覽器逐格截圖、檢查畫面，再輸出影片。
授權：商用前一定要看的三個
多數套件是 MIT、Apache、BSD 這類寬鬆授權，可以自由商用。但下面三個有門檻，企業使用前要先確認：
- Remotion：個人、員工 3 人以下的營利組織、非營利組織可以免費使用；超過這個規模的公司需要購買公司授權（評估階段、尚未商用時也可免費）；不論規模都不能把修改版拿去轉售或再授權。
- ApexCharts：採雙授權。年營收未達 200 萬美元的組織適用免費的社群授權；達到門檻要購買商業授權，嵌入給他人使用的產品或平台，則不論營收都需要 OEM 授權；社群授權也不能用在與它競爭的圖表產品。
- GSAP：包含外掛在內都可以免費商用，但不能用在「讓使用者不寫程式就能做視覺動畫、並與 Webflow 競爭」的工具裡（取得事先書面同意者除外）。官方 FAQ 也說明，用 AI 產生 GSAP 程式碼不屬於禁止用途。
另外兩個要留意開源義務：p5.js（LGPL-2.1）隨產品散布時，要附授權聲明並保留使用者替換函式庫的能力；Theatre.js 的視覺化編輯器 studio（AGPL-3.0）若修改後透過網路提供他人使用，就要公開原始碼。studio 通常只在開發階段使用，正式上線只打包 core（Apache-2.0）即可避開。以上授權條件以 2026 年 9 月 28 日查證為準，Remotion 已預告 5.0 版會調整授權。
給 AI 的選型提示詞
把用途、渲染層、執行環境和授權限制一次講清楚，AI 選出來的套件會準很多：
我要做：［例如：一張顯示 12 個月營收、滑鼠移上去就能看數字的折線圖］
執行環境：［Claude Artifact 單一網頁／本機 Vite 專案］
資料量：［例如：每條線 12 個點、共 3 條線］
限制：公司年營收超過 200 萬美元，請避開需要付費授權的套件
請先推薦一個最適合的 JavaScript 套件，說明它的底層是 SVG、Canvas 還是 WebGL，
以及為什麼不選另外兩個候選；確認後再寫程式，指定精確版本號。想拿這篇的純文字原稿？網址結尾加上 .md 即可： /blog/javascript-visual-libraries-ai-code-video.md