Cómo hice la mascota de mi marca con Claude Code y Gemini: del logo a un personaje que te sigue con la mirada

Mi consultora, WeSoft, tiene un logo con una W y una mantarraya. Quería que esa mantarraya dejara de ser un dibujo y se convirtiera en un personaje: que salude, que celebre, que señale el formulario de contacto y que te siga con la mirada cuando mueves el mouse.

En una tarde salió Manta. Así se ve el antes y el después:

Izquierda: el logo que ya tenía. Derecha: la primera imagen que generó Gemini, la “toma madre”.

No abrí Gemini a mano. Claude Code lo manejó en mi Chrome: subió el logo, escribió cada prompt, revisó cada resultado y descargó las imágenes con su nombre. Yo solo aprobaba o pedía cambios.

TL;DR

• Herramientas: Gemini web (modelo de imagen Nano Banana), Claude Code con la extensión de Chrome, Python con rembg para quitar fondos y, para el video, Wan 2.2 en ComfyUI en mi propia GPU.
• La clave de todo es la “toma madre”: una primera imagen que apruebas y a la que anclas todas las demás. Cada prompt nuevo empieza con “Usando ESTA misma mascota exacta…”.
• 11 tomas del mismo personaje: madre, 5 miradas (centro, izquierda, derecha, arriba, abajo) y 5 poses (saluda, trabaja, celebra, nada de perfil, señala).
• Fondo liso gris claro a propósito: así el recorte automático sale limpio.
• Las 5 miradas se recortan con la misma caja; si no, el personaje “brinca” al cambiar de imagen.
• Costo: $0. Gemini con mi cuenta, y el video en mi PC.

1. La toma madre: la imagen que manda

Todo personaje consistente empieza igual: una imagen aprobada que sirve de ancla. Si la madre sale mal, todas las variantes heredan el error. Aquí vale la pena repetir hasta que te encante.

Le pasé a Gemini el logo como referencia (colores y silueta) y este prompt:

Usando el logotipo adjunto de WeSoft (una W con una mantarraya) como referencia de colores
y de la silueta de la mantarraya, crea la MASCOTA oficial de WeSoft: una mantarraya amigable
en 3D estilo película animada de Disney Pixar, de cuerpo completo, flotando como si nadara en
el aire, vista frontal ligeramente en tres cuartos, con las alas abiertas y relajadas.
Piel brillante y suave con degradado del azul índigo (#3b82f6) al violeta (#8b5cf6) en el
dorso, bordes de las alas con un brillo bioluminiscente cian (#22d3ee), vientre blanco perla.
Aletas cefálicas curvadas hacia arriba como en el logotipo. Ojos grandes, expresivos y amables
con brillo, una sonrisa pequeña y simpática, mirada de confianza e inteligencia. Un patrón sutil
de líneas de circuito luminoso muy fino en el dorso (tecnología), sin exagerar. Cola larga y delgada.
Fondo gris claro liso y uniforme (#e5e7eb), sin sombras en el piso, sin objetos, sin texto, sin
logotipos, sin marca de agua. Iluminación de estudio suave, alta calidad, render limpio,
formato cuadrado 1:1.

Lo que hace que funcione:

2. Las variantes: siempre ancladas a la madre

Con la madre aprobada, cada imagen nueva se pide en el mismo chat y empieza con la misma frase ancla:

Usando ESTA misma mascota exacta (misma mantarraya, mismos colores, mismos ojos, mismo patrón
de circuitos, mismo estilo 3D Pixar), crea una nueva imagen de cuerpo completo con margen amplio
(nada cortado), mismo fondo gris claro liso y uniforme, sin sombras, sin texto, sin logotipos,
sin marca de agua, formato cuadrado 1:1: {LA POSE}

Solo cambia {LA POSE}:

Mismos ojos, mismos colores y el mismo patrón de circuitos en todas las tomas. Eso es lo que da el ancla.

“Margen amplio (nada cortado)” parece un detalle, pero es lo que más retrabajo ahorra. Si una ala sale cortada por el borde, la toma no sirve para la web.

3. Las 5 miradas: el truco para que te siga el cursor

Para que la mascota “te vea”, necesitas la misma imagen con los ojos hacia distintos lados. Aquí el prompt cambia de “crea una nueva imagen” a “EDITA la imagen anterior”, y pide moverse lo mínimo:

Edita la imagen FRONTAL anterior de la mantarraya (mismo encuadre exacto, mismo tamaño y misma
posición en el cuadro, mismo fondo gris claro liso, mismo estilo 3D, mismos colores): ÚNICAMENTE
mueve sus ojos y gira muy ligeramente (unos 15 grados) la cabeza y el cuerpo para MIRAR HACIA LA
IZQUIERDA de la imagen (izquierda del espectador). No cambies nada más. Sin texto, sin marca de agua. 1:1.

Igual para derecha, arriba y abajo. Este es el resultado ya recortado:

Tres cosas que aprendí haciendo esto con varios personajes:

1. “Izquierda de la imagen (izquierda del espectador)”, nunca “su izquierda”. El modelo confunde la izquierda del personaje con la tuya.
2. Gemini tiende a mirar a la derecha. Con un personaje humano, 4 de 4 pedidos de “izquierda” salieron a la derecha, sin importar cómo lo redactara. La solución es pedir solo la derecha y voltearla en espejo con una línea de Python. Para un personaje simétrico, como una mantarraya, el espejo ni se nota.
3. Cambios grandes no salen como edición. Si quieres otra complexión u otra ropa, pide “imagen NUEVA desde cero… mismo personaje…”. Si lo pides como edición, el modelo apenas lo toca.

4. Recortar para la web (sin que brinque)

Las imágenes salen con fondo gris. Para ponerlas sobre una web oscura hay que quitarles el fondo y exportarlas a WebP con transparencia. Esto lo hace rembg con el modelo isnet-general-use:

from rembg import remove, new_session
from PIL import Image
import pathlib

src = pathlib.Path("mantarraya")          # las .jpg descargadas de Gemini
web = pathlib.Path("web"); web.mkdir(exist_ok=True)
s = new_session("isnet-general-use")

for f in sorted(src.glob("*.jpg")):
    r = remove(Image.open(f).convert("RGB"), session=s, post_process_mask=True)
    caja = r.getchannel("A").point(lambda a: 255 if a > 8 else 0).getbbox()
    c = r.crop(caja); c.thumbnail((900, 900), Image.LANCZOS)
    c.save(web / (f.stem + ".webp"), quality=86, method=6)

La trampa: si recortas cada mirada con su propia caja, cada imagen queda de un tamaño distinto y el personaje brinca cuando cambias de una a otra. Para las 5 miradas hay que usar la unión de todas las cajas:

cajas = [im.getchannel("A").point(lambda a: 255 if a > 8 else 0).getbbox() for im in miradas]
u = (min(c[0] for c in cajas) - 10, min(c[1] for c in cajas) - 10,
     max(c[2] for c in cajas) + 10, max(c[3] for c in cajas) + 10)
for nombre, im in zip(nombres, miradas):
    im.crop(u).save(f"mira-{nombre}.webp", quality=86, method=6)   # mismo recorte para todas

Cada WebP pesa unos 40 KB. Las 11 tomas juntas pesan menos que una sola foto de celular.

5. Que te siga con la mirada

En la web, un componente pequeño mide dónde está el cursor respecto a la cara de la mascota y muestra la mirada que toca: mira-izq, mira-der, mira-arriba, mira-abajo o mira-centro. Son estados discretos: solo cambia de imagen, no anima nada, así que no gasta CPU.

En el sitio de WeSoft le agregué un globito de diálogo que cambia con la dirección y un modo “señalar” que apunta al botón del formulario:

PersonajeMirada.crear(elemento, {
  modo: "rejilla",
  base: "/mascota/mira-",          // mira-centro.webp, mira-izq.webp, ...
  ext: "webp",
  textos: {
    centro: "¡Hola! Soy Manta 👋",
    izq: "¿Qué estás buscando?",
    der: "Aquí te ayudo",
    arriba: "¡Por aquí!",
    abajo: "Cuéntame tu idea",
  },
  senala: ["senala"],              // al acercarse al botón, cambia a la pose de señalar
  textoSenala: "¡Escríbenos aquí!",
  caraY: 0.4,                      // la cara está al 40 % de la altura de la imagen
});

caraY importa: el ángulo se calcula desde la cara, no desde el centro de la imagen. En una mantarraya los ojos están arriba; si mides desde el centro, mira raro.

6. Bonus: el video en bucle del inicio

Para el inicio del sitio quería a Manta nadando. Lo generé en mi PC con Wan 2.2 (ComfyUI), con la técnica de primer y último fotograma:

1. Toma A: la imagen de Manta como primer fotograma y este prompt: “The cute 3D cartoon manta ray swims gracefully in the deep dark blue ocean, flapping its wide wings slowly up and down… glowing cyan and violet particles drift… soft god rays shimmer from the surface above. Static camera, cinematic, smooth natural motion.”
2. Toma B: el último cuadro de A como inicio y la imagen original como final, para que regrese a donde empezó.
3. Con ffmpeg se pegan A y B y se suavizan a 24 fps. Como el último cuadro es igual al primero, el bucle no tiene corte.

832×464, 81 cuadros por toma, unos 2 minutos cada una en una RTX 5070 Ti. Costo: $0.

Un consejo: mide si el video se ve vivo. Una mantarraya nadando se lee como video al instante. En cambio, una escena de oficina con poco movimiento parece foto aunque se muevan las manos; a esas les agrego movimiento de cámara al prompt.

7. ¿Y si la mascota es una persona?

La misma receta sirve para convertir a alguien de tu familia en personaje (por ejemplo, para cuentos infantiles), con dos diferencias:

• Pide permiso y úsalo solo para lo que te autorizaron. Su cara es suya, aunque sea en caricatura.
• La foto real es solo referencia de parecido: “Usa la foto adjunta solo como referencia de parecido para crear un personaje ORIGINAL en animación 3D…”. Así Gemini no intenta copiar la foto.

Dos lecciones extra de esas corridas:

1. Los tres cuartos no salen anclados a la toma de frente: se quedan de frente aunque insistas. Lo que funcionó fue “Toma como base la imagen de PERFIL y gírala 45° hacia la cámara”.
2. Las poses salen mejor en un chat NUEVO con la madre adjunta: 10 de 10 a la primera, sin que el cuerpo cambie.

Cierre

Una mascota ya no necesita un ilustrador y tres semanas. Necesita una buena toma madre, prompts que anclen todo a ella y un poco de Python para dejarla lista para la web.

Lo que más me sirvió:

1. Aprueba la madre con calma. Todo lo demás hereda de ella.
2. Cada prompt empieza con el ancla (“ESTA misma mascota exacta…”) y cambia una sola cosa.
3. Fondo liso, margen amplio y sin texto: tres frases que ahorran horas de retoque.
4. Recorta las miradas con la misma caja, o el personaje brinca.
5. Deja que Claude Code maneje Gemini. Tú decides; él sube, escribe, revisa y descarga.

Puedes ver a Manta en acción en el sitio de WeSoft: mueve el mouse cerca del formulario de contacto.