影像轉向量 是做什麼的？
將參考圖片轉換為與之相符的 SVG，再進一步轉換為對方要求的樣式化（以及選擇性的動畫）作品。
在下列指令中，<skill> 指的是此技能的資料夾，也就是存放本檔案的資料夾。請在 python 不是 Python 3 的環境中使用 python3。-I 旗標可防止 Python 從圖片所在資料夾匯入無關的檔案。
為什麼需要這個流程
靠肉眼輸入座標來繪製可辨識的形狀註定會失敗，即使感覺很接近也一樣。每個估算的點都會產生一點偏移，這些偏移累積起來，結果看起來只像一個普通的形狀，而不是原本的物體。人們一眼就會發現（「這一點都不像」）。直接描繪參考圖片的像素可以獲得精確的幾何形狀，而後續的每個步驟（顏色、陰影、動畫）都建立在已經正確的形狀之上。
有兩個習慣和描繪本身一樣重要：
- 在宣稱吻合之前先驗證。 將你的輸出與參考圖片並排顯示，並將其疊加在參考圖片上。在沒有看過疊加比對結果之前，絕對不要說「這張圖與你的圖片吻合」。如果實際上並不吻合卻這麼說，所損失的信任遠比繪圖本身更嚴重。
- 在實際整合之前先取得設計核准。 以渲染預覽的方式展示變體，讓對方選擇。修改預覽很便宜，但修改已整合的程式碼則不然，而且一個對方沒看過的設計往往會被否決。
設定
這些腳本需要 Python 3.9+ 並安裝 Pillow、NumPy 和 scikit-image，Node 18+，以及（用於預覽）Edge、Chrome 或 Chromium。請用以下指令檢查：
python -c "import PIL, numpy, skimage" && node --version
如果缺少 Python 套件，請先詢問再進行安裝。執行 pip install -r <skill>/requirements.txt 即可安裝，或者執行 uv run --with pillow --with numpy --with scikit-image python ... 則可在不安裝的情況下執行。
請在暫存資料夾中工作。將參考圖片留在原位，不要將其複製到任何會對外分享的地方。
步驟
1. 取得良好的參考圖片
平面藝術作品可以乾淨地描繪：2D 繪圖、平面圖示、Logo、具有純色和輪廓的卡通圖案。照片或 3D 渲染圖具有漸層和反光，會碎裂成雜點。如果你只有一張照片，請索取（或在獲得對方同意後搜尋）同一主題的平面繪圖。一張乾淨的「如何畫 X：最終步驟」圖片是理想的選擇。僅在後續的陰影處理中使用照片作為參考。
請先親自查看圖像。用簡單的詞彙說出它的各個部分（例如貓頭鷹：耳羽、臉盤、眼睛、喙、腹部、翅膀），這樣你才能與對方討論。
2. 取樣顏色
python -I <skill>/scripts/palette.py <image>
這會輸出圖片尺寸、主體的邊界框、主要顏色以及初始調色盤。將其轉換為描繪配置：每個平坦區域一個命名的顏色（body、belly、eye、line、background……）。較小的區域（例如喙、亮部）可能低於初始取樣的截斷值，因此請檢查圖像是否有這些區域。同時也要注意消除鋸齒的邊緣顏色：一個深色輪廓通常會呈現為兩種或三種深色調。為每一種顏色建立一個調色盤條目，並將它們放在同一個圖層中。
3. 描繪
編寫配置（references/config.md 記錄了每個鍵的用途，examples/owl/owl.config.json 是一個可運作的範例），然後執行：
python -I <skill>/scripts/trace.py <image> <config.json> <out-dir>
每個像素會被分配到距離最近的調色盤顏色。每個圖層的連通區域會被勾勒出來（在輕微模糊的遮罩上進行行進方塊演算法，使邊緣平滑），簡化後，以影像自身像素座標系的 SVG 路徑資料寫入 <out-dir>/regions.json。總是會包含一個 silhouette 圖層（所有非背景的像素）。它也會寫入 trace.svg（結果的純色 SVG）和 classes.png（顯示每個像素被分配到哪個顏色）。當某個區域結果不如預期時，請檢查 classes.png。references/config.md 結尾的表格列出了常見的修正方法。
4. 驗證吻合度
node <skill>/scripts/compare.mjs <out-dir>/regions.json <image> <config.json> <out-dir>/compare.html
python -I <skill>/scripts/render.py <out-dir>/compare.html <out-dir>/compare.png --size 1160x520
配置中的 compareColours 會將每個圖層對應到參考圖片本身的顏色，因此重建結果看起來應該與原始圖片相同。頁面會顯示參考圖片、重建結果，以及重建結果以 55% 透明度疊加在參考圖片上並以藍色勾勒出輪廓的疊加圖。請檢視 PNG 並誠實檢查：輪廓、每個區域、線條及其粗細。修正配置並重新描繪，直到兩者一致。也請向對方展示這個比對結果。這是為後續工作建立信任的關鍵。
如果對方只想要圖片的 SVG，那麼 trace.svg 就是答案：將它連同比對結果一起交給對方，除非他們想要更多，否則在此停止。
5. 重新設計為三種變體
針對相同的描繪形狀，以對方要求的顏色製作三種截然不同的渲染效果。references/styles.md 提供了配方：
- A，平面圖示： 純色填充、粗輪廓、雙色調亮/暗分割。在小尺寸下最為清晰。
- B，柔和 3D： 每個區域都有自己的左上打光漸層，面片帶有柔和的投影、光澤外殼、發光細節。
- C，電影金屬色： 多頻段拉絲漸層、斜角邊緣、反射條紋、光暈。
重新配色（例如「暗黑版」）是在相同圖層上進行的調色盤交換。每個區域都保持其形狀，這就是為什麼它看起來仍然是原來的設計。
製作一個預覽頁面，在深色和淺色背景上以大尺寸顯示每個變體，並以實際使用時的大小顯示（例如 72 px 和 40 px 的頭像、32 px 和 16 px 的 favicon 等），同時包含原始顏色以供比較。使用 render.py 將其渲染為 PNG，親自檢視，然後以你的環境允許的任何方式（可開啟的圖片或檔案、artifact、側邊面板）向對方展示。請他們選擇，或提出混合方案（例如 C 的表面處理搭配 A 的輪廓）。此時還不要進行任何整合。
6. 動畫（選擇性，在樣式選定後進行）
請閱讀 references/animation.md。簡而言之：每個狀態（靜止、思考、說話、暫停）一個風格，循環使用 CSS 關鍵影格，以及任何需與資料同步時間的動畫使用 SMIL <animate>，例如配合語音音量包絡的唇形同步。以 HTML 頁面即時預覽各個風格，同時也提供靜態 PNG。再次取得核准。
7. 整合
現在才開始處理專案。請將描繪出的形狀轉換為程式碼模組，而不是到處貼上路徑資料：
node <skill>/scripts/emit_shapes.mjs <out-dir>/regions.json <target>/shapes.ts --name OWL_SHAPES --layers silhouette,body,wings=wing[],eyes=eye,ink
key=layer 可重新命名圖層，而 [] 會將其區域保留為陣列，以便每個區域可以單獨添加陰影。該模組也會匯出 OWL_SHAPES_VIEWBOX。保持座標在參考圖片的像素空間中，並以該 viewBox 作為框架。嵌入相關說明請參閱 references/animation.md，而 Claude Code 模組的相關說明請參閱 references/claude-code-mods.md。
與對方溝通
- 展示，而非描述。每個設計步驟都必須以對方能看到的圖片作為結束。
- 當對方說看起來不對勁時，請相信他們。在更改任何內容之前，先與參考圖片進行比較，並具體說明差異。
- 如果對方問你是如何做到的，請用簡單的語言解釋方法（「我根據顏色對每個像素進行分類，描繪每種顏色的輪廓，然後將輪廓轉換為向量形狀」）。
- 對於受商標保護的角色或公司的 Logo，為個人用途進行描繪是沒問題的。請在不說教的前提下，簡短提醒對方，出版或銷售則是另一回事。