Imagen a vector
Convierte una imagen de referencia en un SVG que coincide con ella, y luego en la obra estilizada (y, si se desea, animada) que la persona solicitó.
En los comandos siguientes, <skill> es la carpeta de esta habilidad, la que contiene este archivo. Usa python3 donde python no sea Python 3. La bandera -I evita que Python importe archivos extraños de la carpeta de la imagen.
Por qué existe este flujo de trabajo
Dibujar una forma reconocible escribiendo coordenadas "a ojo" falla, incluso cuando se siente cercano. Cada punto estimado se desvía un poco, las desviaciones se acumulan y el resultado se percibe como una forma genérica en lugar de la cosa real. Las personas lo notan de inmediato ("no se parece en nada"). Trazar los píxeles reales de la referencia proporciona la geometría exacta, y cada paso posterior (colores, sombreado, animación) se basa en formas que ya son correctas.
Dos hábitos son tan importantes como el trazado:
- Comprueba la coincidencia antes de afirmarla. Coloca tu salida junto a la referencia y superpónla sobre la referencia. Nunca digas "esto coincide con tu imagen" sin haber visto esa superposición. Decirlo cuando no coincide cuesta más confianza que el dibujo mismo.
- Obtén la aprobación del diseño antes de integrarlo. Muestra variantes como vistas previas renderizadas y deja que la persona elija. Cambiar una vista previa es barato; cambiar código integrado no lo es, y un diseño que la persona no ha visto tiende a ser rechazado.
Configuración
Los scripts necesitan Python 3.9+ con Pillow, NumPy y scikit-image, Node 18+, y (para vistas previas) Edge, Chrome o Chromium. Verifica con:
python -c "import PIL, numpy, skimage" && node --version
Si faltan los paquetes de Python, pregunta antes de instalar algo. pip install -r <skill>/requirements.txt los instala, o uv run --with pillow --with numpy --with scikit-image python ... se ejecuta sin instalar.
Trabaja en una carpeta temporal. Deja la imagen de referencia donde está y no la copies en nada que se vaya a compartir.
Los pasos
1. Obtén una buena referencia
El arte plano se traza limpiamente: un dibujo 2D, un icono plano, un logotipo, un dibujo animado con colores sólidos y contornos. Una foto o un render 3D tiene degradados y reflejos que se rompen en motas. Si solo tienes una foto, pide (o, con el permiso de la persona, busca) un dibujo plano del mismo sujeto. Una imagen limpia de "cómo dibujar X: paso final" es ideal. Usa la foto solo para guiar el sombreado más adelante.
Mira la imagen tú mismo primero. Nombra sus partes en palabras sencillas (para un búho: penachos, discos faciales, ojos, pico, vientre, alas) para poder hablar de ellas con la persona.
2. Muestrea sus colores
python -I <skill>/scripts/palette.py <imagen>
Esto imprime el tamaño de la imagen, el cuadro delimitador del sujeto, los colores dominantes y una paleta inicial. Conviértelo en una configuración de trazado: un color nombrado por región plana (cuerpo, vientre, ojo, línea, fondo, ...). Las regiones pequeñas (un pico, un brillo) pueden estar por debajo del límite de la paleta inicial, así que revisa la imagen para detectarlas. También ten en cuenta los colores de borde suavizados: un contorno oscuro a menudo aparece como dos o tres tonos oscuros. Dale a cada uno su propia entrada de paleta y colócalos en la misma capa.
3. Traza
Escribe la configuración (references/config.md documenta cada clave, y examples/owl/owl.config.json es un ejemplo funcional) y ejecuta:
python -I <skill>/scripts/trace.py <imagen> <config.json> <directorio-salida>
Cada píxel se asigna a su color de paleta más cercano. Las regiones conectadas de cada capa se contornean (marching squares sobre una máscara ligeramente desenfocada, para que los bordes sean suaves), se simplifican y se escriben en <directorio-salida>/regions.json como datos de ruta SVG en las coordenadas de píxeles de la propia imagen. Siempre se incluye una capa silueta (todo lo que no es fondo). También escribe trace.svg, un SVG de color plano del resultado, y classes.png, que muestra a qué color fue asignado cada píxel. Mira classes.png cuando una región salga mal. La tabla al final de references/config.md enumera las correcciones habituales.
4. Comprueba la coincidencia
node <skill>/scripts/compare.mjs <directorio-salida>/regions.json <imagen> <config.json> <directorio-salida>/compare.html
python -I <skill>/scripts/render.py <directorio-salida>/compare.html <directorio-salida>/compare.png --size 1160x520
El compareColours de la configuración asigna cada capa al color propio de la referencia, por lo que la reconstrucción debería parecerse al original. La página muestra la referencia, la reconstrucción y la reconstrucción superpuesta sobre la referencia al 55 % con la silueta delineada en azul. Mira el PNG y verifica honestamente: el contorno, cada región, las líneas y su grosor. Corrige la configuración y vuelve a trazar hasta que coincidan. Muestra esta comparación también a la persona. Es lo que genera su confianza en lo que sigue.
Si todo lo que querían era un SVG de la imagen, trace.svg lo es: entrégalo junto con la comparación y detente aquí a menos que quieran más.
5. Reestiliza en tres variantes
Construye tres representaciones genuinamente diferentes de las mismas formas trazadas, en los colores que la persona solicitó. references/styles.md tiene las recetas:
- A, Icono plano: rellenos planos, contornos gruesos, una división de luz/sombra de dos tonos. Más nítido en tamaños pequeños.
- B, 3D suave: cada región obtiene su propio degradado iluminado desde la parte superior izquierda, las placas se elevan con una sombra suave, una carcasa brillante, detalles resplandecientes.
- C, Metal cinematográfico: degradados cepillados de múltiples bandas, bordes biselados, rayas de reflejo, floración.
Recolorear (una "edición oscura", por ejemplo) es un intercambio de paleta en las mismas capas. Cada región conserva su forma, y es por eso que sigue leyéndose como el original.
Crea una página de vista previa que muestre cada variante grande sobre un fondo oscuro y uno claro, en los tamaños en los que realmente se usará (un avatar a 72 px y 40 px, un favicon a 32 px y 16 px, etc.), además de los colores originales para comparar. Renderízalo a PNG con render.py, míralo tú mismo y muéstraselo a la persona de la manera que tu entorno permita (una imagen o archivo que puedan abrir, un artefacto, un panel lateral). Pídeles que elijan, o que mezclen (el acabado de C con los contornos de A, por ejemplo). No construyas nada aún.
6. Anima (opcional, después de elegir un estilo)
Lee references/animation.md. En resumen: un estado de ánimo por estado (inactivo, pensando, hablando, en pausa), keyframes CSS para bucles y <animate> SMIL para cualquier cosa sincronizada con datos, como la sincronización labial con una envolvente de volumen del habla. Previsualiza los estados de ánimo en vivo como una página HTML y envía también un PNG fijo. Obtén aprobación nuevamente.
7. Intégralo
Solo ahora toca el proyecto. Convierte las formas trazadas en un módulo de código en lugar de pegar datos de ruta:
node <skill>/scripts/emit_shapes.mjs <directorio-salida>/regions.json <destino>/shapes.ts --name OWL_SHAPES --layers silhouette,body,wings=wing[],eyes=eye,ink
clave=capa renombra una capa, y [] mantiene sus regiones como un arreglo para que cada una pueda sombrearse por separado. El módulo también exporta OWL_SHAPES_VIEWBOX. Mantén las coordenadas en el espacio de píxeles de la referencia y enmárcarlas con ese viewBox. Las notas de integración están en references/animation.md, y las notas para mods de Claude Code están en references/claude-code-mods.md.
Cómo hablar con la persona
- Muestra, no describas. Cada paso de diseño termina con una imagen que pueden ver.
- Cuando dicen que se ve mal, créeles. Compara con la referencia y di específicamente qué difiere antes de cambiar nada.
- Explica el método en palabras sencillas si preguntan cómo lo haces ("Clasifico cada píxel por color, trazo el contorno de cada color y convierto los contornos en formas vectoriales").
- Para un personaje con marca registrada o el logotipo de una empresa, trazarlo para uso personal está bien. Menciona una vez, sin sermonear, que publicarlo o venderlo es un asunto diferente.