/stick-figure: un explicador animado con figuras de palo
El usuario da una idea o una pregunta ("¿por qué son contagiosos los bostezos?", "¿por qué los gatos tiran cosas de las mesas?", "¿por qué procrastinamos?"). Escribes la respuesta en una línea, montas una pequeña escena que la muestre, revisas unos fotogramas, renderizas el video y entregas un MP4 silencioso (5-7 segundos).
${CLAUDE_SKILL_DIR} abajo es la carpeta de esta habilidad (donde está este SKILL.md). Si tu entorno no lo completa, usa la ruta de esa carpeta. Guarda todo en la carpeta actual del usuario, o en la carpeta que él nombre.
0. Verificación de configuración
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Tarda unos segundos; ejecútalo si no estás seguro de que este ordenador esté configurado. "ready": true significa que estamos listos. De lo contrario, ejecuta los comandos que aparecen bajo "fix", indicando al usuario que es una instalación única: python3 -m pip install playwright (el controlador del navegador), python3 -m playwright install chromium (solo si Google Chrome o Edge no están instalados, unos 150 MB) y python3 -m pip install imageio-ffmpeg (solo si falta ffmpeg). Si pip se niega con "externally managed environment", crea un entorno privado una vez y usa su Python para todos los comandos: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, luego ~/.animate-skills/bin/python -m playwright install chromium si es necesario. En Windows, usa py en lugar de python3. ¿No es posible usar un navegador aquí (por ejemplo, el sandbox de la app de Claude)? Revisa el final de este archivo.
1. Planifica la escena (brevemente)
- Título: la pregunta o idea, corta (máximo ~40 caracteres).
- Respuesta: la explicación en una línea, verdadera y simple (máximo ~45 caracteres). Aparece aproximadamente al segundo.
- La escena: 1-4 personajes actuando la respuesta en 3-8 tiempos durante 5-7 segundos. Muestra lo que sucede: bostezos que se contagian de persona a persona, un gato empujando una taza de la mesa, un perro que se despierta y mueve la cola. El último tiempo es el remate y se queda en pantalla hasta el final.
2. Escribe la especificación
Guarda stick-<tema>.json. Ejemplo (examples/knock-things-off.json):
{
"title": "Why do cats knock things off tables?",
"answer": "Hunting instinct, and it gets your attention",
"scene": "room",
"props": [{"type": "table", "x": 0.62}, {"type": "cup", "x": 0.70, "on": "table", "wobbleAt": 1.6, "fallAt": 2.15},
{"type": "plant", "x": 0.08}],
"figures": [{"id": "cat", "kind": "cat", "x": 0.52, "on": "table", "head": "#F4A261", "hatColor": "#F4A261"},
{"id": "you", "x": 1.2, "label": "You", "hat": "hair", "hatColor": "#6B4423"}],
"beats": [
{"who": "cat", "do": "look", "at": 0.0, "for": 1.0, "to": 0.7},
{"who": "cat", "do": "swipe", "at": 1.0, "for": 1.2, "to": 0.7, "say": "Boop"},
{"who": "you", "do": "run", "at": 2.3, "for": 0.8, "to": 0.86},
{"who": "you", "do": "surprised", "at": 3.1, "for": 0.9, "say": "My mug!"},
{"who": "cat", "do": "sit", "at": 3.3, "for": 1.0},
{"who": "you", "do": "point", "at": 4.1, "for": 1.2, "to": "cat"},
{"who": "cat", "do": "love", "at": 4.4, "for": 1.0}
],
"arrows": [{"from": "cat", "to": "you", "at": 3.6, "for": 0.4}]
}
Más: examples/contagious-yawns.json (tres personas), examples/procrastination.json (una oficina, alguien entrando), examples/dog-wags.json (un perro y un niño en un parque).
Escenas: street (cielo, pavimento, carretera), park (sol, colinas, césped), room, office (ventana con ciudad), classroom (añade "board": "text" para la pizarra), night (estrellas y luna), plain (añade "background": "#hex").
Figuras (x de 0 = borde izquierdo a 1 = borde derecho; usa -0.2 o 1.2 para empezar fuera de pantalla y que caminen hacia adentro). Tres personas caben cómodamente en un video vertical (x 0.2, 0.5, 0.8); una cuarta necesita scale ~0.85 y espaciado ~0.22. Un perro o gato de perfil mide aproximadamente 0.35 del ancho del fotograma (x es su cuerpo; el hocico está ~0.2 adelante): detén a una mascota ~0.3 de la persona hacia la que corre. Mantén las etiquetas de nombre cortas ("Bill", no "The bill"):
kind:person(predeterminado),cat,dog(de perfil, aproximadamente un tercio de la altura de una persona).id,x,label(un nombre bajo sus pies: "Tú", "Tu cerebro"),scale(0.6-0.8 para un niño),facing(left/right; de lo contrario, miran al centro, luego a donde sea que se hayan movido, señalado o deslizado).on: pararse sobre muebles:table,desk,bench,shelf,bed(coloca el mueble en la misma x).- Personas:
hat(cap,tophat,beanie,crown,bow,hair),hatColor(también el color del cabello),head(color de la cara),glasses(true),tie(un color). Mascotas:head(color del pelaje),hatColor(color de la oreja).
Tiempos ({"who", "do", "at", "for", "to", "say"}, en segundos): to es el id de otra figura o una x (0-1).
do (personas) | Cómo se ve | do (personas) | Cómo se ve |
|---|---|---|---|
walk, run | Se mueve hacia to | talk | Moviendo la boca, gesto con una mano |
wave | Saluda, sonrisa grande | yawn | Brazos arriba, gran bostezo, ojos cerrados |
look | Gira la cabeza hacia to | point | Señala hacia to (la cabeza de una figura, o altura de mesa en una x) |
think | Mano en la barbilla (con say: un globo de pensamiento) | shrug | "¿Quién sabe?" |
jump | Salta de alegría | cheer | Brazos en V |
surprised | Salta hacia atrás, "!" | sad | Cabeza gacha, una lágrima |
sleep | Ojos cerrados, Zzz | laugh | Rebota, sonrisa grande |
dance | Bailando, nota musical | idea | Brazo arriba, bombilla |
love | Corazón | fall | Se cae y se queda en el suelo |
raise | Una mano arriba (votar, preguntar, "¡yo!") | write | Escribiendo o firmando en un escritorio |
relabel | Cambia la etiqueta de nombre: {"who": "bill", "do": "relabel", "at": 4, "text": "Law"} |
Mascotas: walk, run, jump, sit, swipe (un zarpazo hacia to, para tirar cosas), sleep (enroscado, Zzz), meow/bark/talk (boca abierta; añade say), surprised (lomo arqueado, "!"), look (se gira hacia to), wag (feliz, moviendo la cola), love, idea, sad.
say pone un globo de diálogo sobre esa figura durante ese tiempo (máximo 5 palabras; think hace un globo de pensamiento; el globo reemplaza el pequeño ícono del tiempo; los globos se mantienen alejados de las caras de otras personas). El último tiempo de cada figura mantiene su pose hasta el final (excepto caminar, correr, hablar y bostezar), y la última línea dicha en la escena también permanece, así que termina con el remate. point apunta a la cabeza de una figura lejana y al pecho de una cercana.
Accesorios ({"type", "x", ...}): muebles y elementos de escena bus-stop, tree, bench, desk (con un portátil), table, door, sign (con text), car ("drive": 1 lo hace pasar), house, plant, lamp, tv, bed; y objetos pequeños cup, mug, glass, vase, bottle, plate, ball, book, phone, box, paper (un documento). Los objetos pequeños se colocan en el suelo o "on": "table" (o desk, bench, shelf, bed; dales una x dentro del ancho de ese mueble, que es aproximadamente ±0.15 alrededor de su x); "wobbleAt": s hace que uno se tambalee, "fallAt": s lo tira ("fallDir": -1 hacia la izquierda); las tazas, vasos, jarrones, botellas y platos se rompen con un CRASH ("sound": "SMASH!" cambia la palabra), las pelotas rebotan. También color, scale, front: true (dibujado delante de los personajes).
Flechas ({"from", "to", "at", "for", "color", "hold"}): una flecha punteada de una cabeza a otra, como "se transmite"; hold es cuánto tiempo permanece después de dibujarse (por defecto 0.9 s).
Otros campos: answer se divide donde encaje (aproximadamente 24 caracteres por línea); pon un | donde quieras el salto. answerAt (segundos; por defecto ~1.1), size ("1080x1920" por defecto, "1080x1080", "1920x1080"), duration (por defecto: el final del último tiempo + 1.3 s, al menos 5), fps (por defecto 30).
Consejos de puesta en escena: empieza un tiempo en 0.0 para que nadie esté congelado al inicio; superpón los tiempos un poco para que siempre se mueva algo; cada tiempo 0.8-1.6 s; coloca el derribo o el momento clave en el medio y la reacción después.
3. Revisa tres fotogramas
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<tema>.json --still 0.5 --out stick-<tema>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<tema>.json --still 2.5 --out stick-<tema>-check2.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<tema>.json --still end --out stick-<tema>-check3.png
--still acepta segundos, o end; también revisa el tiempo del momento clave (el derribo, la revelación). Míralos: personajes en pantalla y mirando hacia el lugar correcto, nadie caminando a través de otro, burbujas que no cubren caras ni el título, la historia legible sin sonido. Ajusta posiciones o tiempos y vuelve a revisar si es necesario.
4. Renderiza el video
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<tema>.json --out stick-<tema>.mp4
Unos 10-25 segundos. Borra las imágenes de verificación.
5. Entrega
Dale al usuario la ruta del MP4 (muéstralo si tu entorno puede mostrar archivos). No tiene sonido, listo para música o voz en off. Ofrece una variación (otro final, otra escena).
¿Sin navegador aquí? (por ejemplo, el sandbox de la app de Claude)
Si la verificación de configuración no puede ejecutar un navegador, escribe la animación como una página en su lugar: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<tema>.json --html stick-<tema>.html. La página se reproduce en cualquier navegador (muéstrala como un artefacto si puedes). Dile al usuario que el MP4 necesita Claude Code en un ordenador, o una grabación de pantalla de la página.