Communitygithub.com

youtiaoguagua/spine-animation

Crea animaciones esqueléticas Spine a partir de imágenes con planes de partes y movimiento redactados por el agente, exporta JSON/atlas/PNG para motores de juego y abre una página de demostración de animación local. Útil para animación de personajes, rigging de imágenes, parpadeo o movimiento de UI en Spine.

¿Qué es spine-animation?

Esta habilidad permite a un agente de IA crear animaciones esqueléticas completas para Spine (Esoteric Software) utilizando únicamente su propia comprensión de imágenes y un tiempo de ejecución local incluido. Acepta una o más imágenes de entrada, permite al agente planificar la segmentación de partes (por ejemplo, extremidades articuladas, capas de superposición) y trayectorias de movimiento, y luego genera los archivos de proyecto de Spine (JSON, atlas, PNG) listos para su uso en motores de juego como Unity, Cocos Creator u otros. La habilidad también inicia un servidor de vista previa local con una página web interactiva para que el usuario o el agente puedan revisar la animación en tiempo real antes de la exportación final. Está diseñada para plataformas como Cursor, Codex y Claude Code en entornos de escritorio, y se basa en un proceso de varios pasos: verificación del entorno (doctor), preparación de la imagen (redimensionamiento, presupuesto de bytes), creación del plan de animación (archivos analysis.json y motion.json), validación de la estructura, compilación de los activos finales y, por último, una revisión humana con puntos de control explícitos. El agente maneja de forma autónoma tareas como recortar partes de imágenes (usando métodos polygon, Mesh o SAM), completar la obra de arte faltante cuando sea necesario (a través de herramientas de generación de imágenes del anfitrión) y ajustar el rig (malla de imagen completa, capas separadas con superposición, o archivos adjuntos/poses alternativos) para que coincida con la acción solicitada. La habilidad enfatiza la producción de animaciones de alta calidad mediante la aplicación de guías de referencia detalladas para el tamaño de la imagen, la estrategia de rigging, la viabilidad del movimiento y la verificación de la calidad humana.

Compatible con✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/youtiaoguagua/animation-2d/tree/HEAD/skills/spine-animation

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Spine Animation

Utiliza tu propia comprensión de imágenes para planificar las partes y el movimiento. El tiempo de ejecución local incluido realiza el rigging de una imagen completa transparente o recorta partes, añade fotogramas clave, exporta activos y sirve una vista previa. El tiempo de ejecución local no llama a una API de modelo separada ni necesita una clave API. La finalización de la obra de arte, cuando sea necesaria, utiliza las herramientas de generación/edición de imágenes del anfitrión.

Verificación previa del entorno — ejecutar primero

Resuelve el directorio de esta habilidad desde la ubicación de su SKILL.md. Ejecuta su lanzador con rutas absolutas; también funciona cuando tu directorio actual es otro proyecto:

node --version
node /ruta/absoluta/a/spine-animation/scripts/spine.mjs doctor \
  --segmentation mesh --output /ruta/absoluta/salida --preview

Antes de prepare, validate, build o iniciar una vista previa:

  1. Confirma Node.js 20.9+. Si node falta o es más antiguo, prepara un Node compatible utilizando el gestor de paquetes/versiones disponible en el entorno antes de lanzar la habilidad. La habilidad incluye JavaScript compilado, no el ejecutable de Node.
  2. Ejecuta doctor con el directorio de salida real del usuario. Usa mesh para la verificación inicial de dependencias; esto no selecciona la estrategia de rig de la animación. Añade --preview a menos que el usuario omita explícitamente el banco de trabajo. Añade --editable/--spine-cli solo cuando se necesite un archivo .spine editable. Vuelve a verificar con --segmentation mobilesam o sam3 antes de usar explícitamente ese backend; estas comprobaciones también verifican sus importaciones de Python, sin cargar pesos para inferencia. Los modelos opcionales faltantes no bloquean los flujos de trabajo de malla/polígono.
  3. Lee result.ready, checks[].required y repairs. Dentro de la autorización existente del usuario, repara solo los requisitos faltantes para la tarea actual, luego vuelve a ejecutar la misma comprobación. repairs proporciona comandos como command más args; conserva las rutas como argumentos. La reparación de dependencias de paquetes instalados utiliza pnpm en el directorio de la habilidad; el checkout de la fuente utiliza su propia instalación de dependencias. Inicia cada comando de generación solo después de que sus propias comprobaciones requeridas hayan pasado; la planificación/preparación independiente puede continuar mientras se resuelven los bloqueadores. No reemplaces silenciosamente un backend o formato final solicitado. Si una reparación está bloqueada por red/acceso o falla, informa el bloqueador específico en lugar de reinstalar repetidamente o declarar que está listo. No instales SAM 3 simplemente porque aparece como una capacidad opcional no disponible.

El doctor de arranque utiliza componentes integrados de Node y puede informar sobre Sharp/Express faltantes o rotos antes de que la aplicación los importe. Verifica los archivos de tiempo de ejecución, la codificación de imágenes nativa, el gestor de paquetes, la capacidad de escritura de la salida solicitada y las características opcionales. No instala paquetes ni modelos. Se necesita pnpm para reparar dependencias faltantes; un tiempo de ejecución ya instalado puede ejecutarse sin pnpm en PATH.

La preparación de recursos de vista previa no prueba que el agente tenga herramientas de navegador/ordenador. La habilidad instalada sirve activos web estáticos precompilados; React/Vite solo se necesitan al desarrollar o reconstruir el frontend desde la fuente. Verifica las herramientas disponibles del anfitrión cuando se solicite apertura automática de páginas o capturas de pantalla, e informa la verificación visual por separado. Mantén el directorio de salida elegido por el usuario; el valor predeterminado es ./output en el directorio de trabajo actual. stdout es JSON, el progreso va a stderr, y las comprobaciones requeridas fallidas salen con código distinto de cero.

Abrir el banco de trabajo al inicio de la tarea

Para cada solicitud de creación de animación, inicia o reutiliza el banco de trabajo tan pronto como la verificación previa básica pase, antes de las preguntas de selección de objetivo, generación de obra de arte, planificación o configuración del modelo. Usa la carpeta de salida del usuario (de lo contrario ./output en el directorio de trabajo de la llamada). Se admite una carpeta de salida vacía:

node /ruta/absoluta/a/spine-animation/scripts/spine.mjs preview \
  --output /ruta/absoluta/salida

Envía inmediatamente el result.url real devuelto como un enlace en el que se puede hacer clic. En Codex desktop, utiliza una herramienta open_in_codex disponible para abrirlo en el panel derecho del chat actual. Consulta references/workbench-start.md para los argumentos de la herramienta, la reutilización de pestañas y las alternativas. Abrir el banco de trabajo no necesita una animación completada ni un destino de exportación elegido.

Mantén el servicio y la página disponibles durante la producción y la revisión humana. Después de cada compilación completada, navega/actualiza el banco de trabajo existente al previewUrl devuelto, o dile al usuario que seleccione el nuevo proyecto y haga clic en actualizar cuando el anfitrión no pueda automatizar eso. Respeta una solicitud explícita de omitir la página web.

Crear una animación

  1. Con el enlace del banco de trabajo ya proporcionado, identifica la imagen de origen, el movimiento solicitado, el destino de exportación y la carpeta de salida a partir de la conversación. Si el usuario no ha elegido un destino de exportación, ofrece Unity (unity) como opción predeterminada/recomendada, Cocos Creator 3.8 y los otros destinos compatibles. Espera la selección del usuario antes de cualquier compilación o exportación; un valor predeterminado preseleccionado o el silencio no son una elección. Reutiliza una elección explícita existente, incluyendo una instrucción para usar el valor predeterminado, sin preguntar de nuevo. Consulta references/export-targets.md para opciones y compatibilidad de versiones. Las comprobaciones independientes del entorno, la preparación de imágenes y la planificación pueden continuar mientras se espera. Reutiliza las imágenes y activos proporcionados. Cuando solo se proporcione una descripción del personaje, utiliza una herramienta de generación de imágenes disponible si el usuario ha solicitado la creación de la obra de arte; de lo contrario, obtén una imagen de origen.

  2. Aplica references/image-size.md antes de generar o preparar la obra de arte. Por defecto, usa un borde más largo de 512 px y un PNG de trabajo de 512 KiB. Solicita el tamaño de generación adecuado más pequeño, luego usa prepare para hacer cumplir el presupuesto real de píxeles/bytes sin cambiar el original:

    node /ruta/absoluta/a/spine-animation/scripts/spine.mjs prepare \
      --image /ruta/absoluta/personaje.png --workdir /ruta/absoluta/planos/personaje \
      --max-edge 512 --max-bytes 524288 \
      --prompt "2 segundos de inactividad, pequeños balanceos de cabeza y brazos, parpadeo"
    
  3. Inspecciona el sourceImage devuelto con tu capacidad de visualización de imágenes. Lee references/plans.md para formatos de coordenadas y fotogramas clave. Usa el imageSize devuelto como base de coordenadas; registra imageBudget. Confirma que los ojos, los dedos y los contornos finos sigan siendo legibles después de la reducción. Define las poses clave de la acción y las articulaciones que se mueven de forma independiente, luego elige el rig utilizando references/artwork-completion.md. La mesh de imagen completa es adecuada para movimientos de inactividad pequeños y coherentes compatibles con los píxeles existentes. Para movimiento articulado de extremidades, grandes rotaciones de articulaciones o superposición cambiante, usa capas cortadas/completadas por separado con superposición de articulaciones y regiones ocultas rellenadas. Usa archivos adjuntos/poses alternativos cuando los cambios de mano, cara o perspectiva necesiten una obra de arte diferente; combina estos métodos según sea necesario. No reutilices un rig de imagen completa para inactividad para un puñetazo, caminar o bailar simplemente para evitar costuras, ni reduzcas la acción solicitada para que se ajuste a ese rig. Registra la elección y las partes móviles requeridas como rigDecision en quality-review.json. Verifica que la ruta de compilación activa pueda consumir los activos y realizar las poses requeridas antes de invertir en fotogramas clave. Completa e inspecciona la obra de arte faltante cuando sea compatible; resuelve una capacidad faltante o un alcance revisado con el usuario antes de continuar con la producción dependiente. Escribe analysis.json y motion.json tú mismo. No le pidas al usuario que cree estos archivos. Divide en las articulaciones que necesitan movimiento relativo y los límites necesarios para la superposición visual; evita cortes innecesarios en regiones fijas. Usa auto/mobilesam/sam3/polygon para recortar una fuente existente. auto selecciona un backend de máscara instalado, no una estrategia de rig. Para bordes sucios, solicitudes de SAM o nueva obra de arte transparente, lee references/cutouts.md antes de elegir una ruta.

  4. Valida y construye un candidato de revisión. Lee references/human-review.md antes de la primera compilación para que el candidato incluya la evidencia necesaria para la revisión de calidad humana. El siguiente ejemplo recorta partes con polygon; usa el backend elegido para la tarea real. Usa mesh para una estrategia de imagen completa, o una ruta de integración de capa/pose probada cuando el build estándar no pueda realizar las poses requeridas:

    node /ruta/absoluta/a/spine-animation/scripts/spine.mjs validate \
      --image /ruta/absoluta/planos/personaje/source.png \
      --analysis /ruta/absoluta/planos/personaje/analysis.json \
      --motion /ruta/absoluta/planos/personaje/motion.json
    
    node /ruta/absoluta/a/spine-animation/scripts/spine.mjs build \
      --image /ruta/absoluta/planos/personaje/source.png \
      --analysis /ruta/absoluta/planos/personaje/analysis.json \
      --motion /ruta/absoluta/planos/personaje/motion.json \
      --project personaje-motion --output /ruta/absoluta/salida \
      --target unity --segmentation polygon --background transparent --blink --preview
    

    Siempre pasa el ID seleccionado por el usuario con --target; el ejemplo anterior asume que se eligió Unity. Añade --blink solo cuando se solicite parpadeo y el personaje tenga ojos oscuros claros y frontales. Omite --motion para usar la inactividad predeterminada. Usa --name para un nombre de activo estable. Al iterar sobre un trabajo generado anteriormente, usa --replace; otros proyectos y fuentes permanecen separados.

  5. Actualiza el banco de trabajo ya abierto al previewUrl devuelto, reutilizando su pestaña cuando sea compatible. Compara la imagen original con la animación en reposo y en el movimiento más grande, e inspecciona un fotograma de ojos cerrados cuando se haya solicitado parpadeo. Ajusta los planes y reconstruye cuando sea visible un defecto concreto. También verifica la acción solicitada con sus poses clave: un puñetazo necesita un golpe y una recuperación legibles, con una forma de mano adecuada y mecánica corporal. Registra las autocomprobaciones de imagen/acción por separado de la validación de archivos. Completa los puntos de control humanos a continuación antes de dar por aceptado el resultado. Conserva las páginas abiertas solicitadas.

Puntos de control de calidad humana

Utiliza tres puntos de control durante la producción de la animación:

Punto de controlRevisiones humanas
Materiales y rigEstrategia de rig, partes cortadas/completadas reales o textura de imagen completa, superposición de articulaciones, poses de reposo/extremo
MovimientoAnimación reproducible, poses extremas, costura del bucle y ojos cerrados/reabiertos cuando se solicite
EntregaEl formato de destino de la revisión revisada, los archivos reales y cualquier limitación no resuelta

Espera la aprobación humana explícita antes de avanzar más allá de un punto de control de calidad. Se permiten compilaciones y exportaciones preliminares para producir evidencia de revisión. Primero corrige los defectos que el agente pueda identificar, luego muestra las imágenes/vista previa reales y pide comentarios específicos. Una compilación exitosa o la propia verificación visual del agente no constituyen aprobación humana.

Sigue references/human-review.md para listas de verificación, registros de revisión y cambios que requieren otra revisión. Presenta los puntos de control juntos cuando su evidencia esté lista, y reutiliza la aprobación explícita de artefactos sin cambios. Respeta la instrucción explícita de un usuario de omitir o relajar un punto de control; registra ese punto de control como renunciado en lugar de aprobado.

Calidad y entregables

  • Usa identificadores de partes en inglés. parent describe la herencia de movimiento; depth describe el orden de dibujo. Mantén una extremidad con su objeto sostenido cuando se muevan juntos.
  • Empareja el rig con la acción solicitada. Mantén las articulaciones articuladas conectadas a través de pivotes adecuados, obra de arte completa superpuesta y pesos ajustados. Usa la deformación de malla local dentro de capas separadas cuando sea útil; verifica que las extremidades en movimiento realmente se articulen de forma independiente. La obra de arte faltante o los límites de movimiento de la compilación estándar requieren una ruta de obra de arte/integración compatible o un cambio de alcance acordado, en lugar de un gesto sustituto más pequeño.
  • Una imagen completa transparente aún necesita regiones de hueso y pivotes. Las mallas de imagen completa admiten deformaciones coherentes; la opacidad por parte y la oclusión cambiante de forma independiente requieren capas separadas. No prometas obra de arte no vista.
  • build nunca descarga entornos SAM/Python ni llama a API de generación de imágenes. doctor informa sobre la disponibilidad local de MobileSAM/SAM 3 opcional. auto utiliza un backend instalado e informa sobre las alternativas de polígono reales; los modos SAM explícitos fallan cuando no están disponibles. Usa sam-setup solo como parte del trabajo SAM solicitado cuando la instalación del modelo local se ajuste al alcance y las limitaciones de recursos del usuario.
  • Para obra de arte recién solicitada, prefiere la opción de fondo transparente real de un generador, luego verifica alfa con inspect o prepare --background transparent. Un patrón de tablero de ajedrez pintado en RGB no es transparencia. Evita fondos de pantalla verde para nuevos activos. El RGBA existente todavía puede tener bordes de color mate; la compilación inspecciona alfa y repara de forma conservadora el derrame de color identificable.
  • Mantén las imágenes de trabajo normales dentro de 512 px / 512 KiB. Usa un presupuesto más grande solo para un requisito de tamaño explícito del usuario o una necesidad de detalle concreta; registra el motivo. Verifica las dimensiones/bytes finales del atlas y reconstruye desde la fuente presupuestada cuando sea demasiado grande en lugar de redimensionar una textura exportada por sí sola.
  • Inspecciona las warnings de la compilación. No afirmes que se produjo un parpadeo omitido o un proyecto editable no disponible. Los entregables estándar son .json, .atlas y .png con el mismo nombre; un archivo .spine editable adicionalmente necesita un editor Spine instalado y --editable (o --spine-cli /ruta/al/editor). Informa esa limitación cuando corresponda.
  • Devuelve el enlace de vista previa, la carpeta o los archivos del artefacto, las animaciones y lo que se verificó, incluido el estado de revisión humana. El trabajo pendiente o rechazado sigue siendo un candidato de revisión. Inspecciona los bordes tanto sobre fondos de vista previa claros como oscuros. Si no hay navegador disponible, informa la verificación visual como incompleta y deja que el humano inspeccione la vista previa o las imágenes disponibles.

El servidor de vista previa mantiene el servicio y la página disponibles. Después de cada compilación completada, actualiza el banco de trabajo existente al previewUrl devuelto o indica al usuario que seleccione el nuevo proyecto y haga clic en actualizar; preserva las páginas abiertas solicitadas.

Skills relacionados