图片转矢量 是做什么的？
将参考图像转化为精确匹配的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，电影级金属： 多波段拉丝渐变，斜面边缘，反射条纹，泛光效果。
重新着色（例如“暗黑版”）是对相同图层进行调色板交换。每个区域的形状保持不变，因此它仍然能被识别为原始设计。
制作一个预览页面，在深色和浅色背景上分别展示每个变体的大图，以及实际使用时的尺寸（例如 72px 和 40px 的头像、32px 和 16px 的网站图标等），并提供原始颜色以供比较。使用 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，为个人使用而追踪是可以的。在不显得说教的前提下，提醒一句：发布或出售则是另一回事。