AI 快速開始

這一頁是給 AI coding agent 的入口。先讀 /llms.txt 取得索引；需要單檔背景時讀 /llms-full.txt。套件 API 以各 GitHub repo 內的 README.md、STABILITY.md 與 llms-full.txt 為準。

可先開啟 Sprite Playground 查看 PixiJS/ai*js editor。官網是 read-only mock；產圖與提交 frame 需使用本機 AI Sprite Studio。

先選最小套件

• Sprite 狀態圖與 PixiJS v8：aispritejs、aispritejs/pixi
• 遊戲資料：aiecsjs
• 遊戲邏輯 FSM：aifsmjs
• 事件：aieventjs
• 音效：aiaudiojs，另裝 peer dependency howler
• 物件回收：aipooljs
• 2D broadphase：aiquadtreejs
• iframe、Flutter WebView 等跨 context 通訊：aibridgejs

套件彼此沒有強制依賴。不要為了使用其中一個而安裝整套。

PixiJS sprite pipeline

pnpm add aispritejs pixi.js

import { createPixiSpriteAnimator } from "aispritejs/pixi";

const animator = createPixiSpriteAnimator(sprite, graph, spritesheet);
animator.setInput("speed", 1);
animator.update(deltaMs);

AI Sprite Studio 提供 atlas 產生、QA、打包與 web editor 流程。repo 內現有生圖僅是失敗測試素材，不應當成可出貨資產或風格基準；打包前必須讓 deterministic QA 與 visual QA 都通過。

Agent 驗證清單

1. 從 package 的 exports 確認 subpath，不猜測 import path。
2. 依 repo 的 package manager 與 scripts 執行 typecheck、test、build。
3. 外部 atlas、bridge message 與 snapshot 都視為不可信輸入，在 boundary 驗證。
4. 只選任務需要的套件，保留 renderer 與遊戲狀態邏輯的邊界。

讓 AI 參與產圖

clone aisprite-studio 後，在 repository root 執行：

npm ci
npm test
npm run serve

在本機 editor 的 AI Agent Handoff 複製 MCP client config。連接後，AI 先呼叫 aisprite_studio_list_assets。由於 repo 內既有生圖皆未通過 visual QA，應先用 aisprite_studio_get_reference_task 與 aisprite_studio_submit_reference 修復 canonical reference，經人工 visual review 後，再取得 frame task、提交 frame 並執行 deterministic QA。伺服器不保存模型 API key，也不會把提交或 deterministic checks 冒充 visual approval。

• Codex：複製 config.toml 格式。
• Claude Code/Desktop、Gemini CLI：複製 mcpServers JSON。
• Antigravity 或沒有 MCP client 的生圖 agent：複製 active frame task，產圖後交由已連接 MCP 的 agent 提交。

官網容器與 editor 使用 aibridgejs 的 exact-origin iframe adapter。Browser agent 可透過 window.aispriteStudioBridge.requestContext() 取得 aisprite-studio:context event，或用 selectAsset(asset)／reloadAssets() 操作受限的 editor 指令；產圖與寫檔仍只允許走本機 MCP boundary。