gpt-hand-drawing-skill

Habilidad de Dibujo a Mano con GPT para Codex

Crea un proyecto de animación funcional y el MP4 o bucle solicitado. Los fotogramas son funciones deterministas del tiempo, pintados por p5.brush en Chrome y codificados por FFmpeg. No se requiere runtime de Claude, API de pago ni modelo de generación de imágenes. Clawd es un personaje incorporado opcional; sigue el reparto y estilo elegidos por el usuario.

Iniciar un proyecto

Resuelve el directorio de esta habilidad desde la ubicación del SKILL.md cargado. No codifiques un directorio de Claude. Ejecuta:

python "<skill-dir>/scripts/new_project.py" "<project-dir>"

El inicializador multiplataforma copia template/, desconecta el demo, instala las dependencias bloqueadas con npm ci y reporta las herramientas. Usa --keep-demo solo para un demo o verificación del motor, --skip-install solo para andamiaje, o --npm-cli /path/to/npm-cli.js cuando Node esté disponible pero npm no esté en PATH. NPM_CLI_JS es una variable de entorno equivalente. No sobrescribirá un proyecto no vacío.

Lee el ANIMATION_GUIDE.md generado por completo antes de diseñar. Inspecciona docs/emotions.jpg y docs/views.jpg con un visor de imágenes disponible (por ejemplo view_image a través de las herramientas de ejecución). La guía contiene el motor y la API de personajes. Lee references/music-video.md para videoclips o videos de más de unos 20 segundos. Lee references/codex-runtime.md para problemas de runtime, comandos de plataforma y limitaciones del renderizador.

Planificar y construir

Usa las elecciones existentes del usuario. Pregunta solo por información faltante que afecte materialmente el trabajo; no repitas preguntas ya respondidas. Para un videoclip, recopila el audio y la fuente de sincronización. Un video con letras necesita letras proporcionadas con marcas de tiempo LRC o equivalentes; no inventes letras faltantes. Un videoclip instrumental no necesita LRC. Cuando falte dirección creativa, una pregunta opcional puede cubrir historia, estado de ánimo, imágenes recurrentes y aspectos a evitar. Si el usuario delega la dirección, propón y procede con una interpretación coherente.

Mide la música con python "<skill-dir>/scripts/beat_grid.py" cancion.mp3 --from=0 --to=30 --lrc=cancion.lrc (requiere NumPy y FFmpeg). Trata el tempo como una estimación con ambigüedad de mitad/doble tiempo; el audio y las marcas de tiempo proporcionados definen la sincronización. LRC normalmente marca los tiempos de las líneas, por lo que el llenado por carácter del karaoke es una aproximación a menos que se proporcione sincronización a nivel de palabra. No afirmes alineación forzada.

Escribe STORYBOARD.md: logline, arco narrativo del mundo y la paleta, motivo visual, arco emocional y tomas con rangos de tiempo, acción, lectura del espectador y transiciones. Comparte la dirección para revisión cuando sea útil; si el usuario te ha pedido que continúes, sigue adelante. El ejemplo completo y funcional es examples/xiaozhen/STORYBOARD.md, con sus archivos de escena al lado.

Establece duration, bpm, offset y el opcional audio en src/config.js. Implementa las escenas como IIFE en src/scenes/, registra shots([[t0, fn], ...]) e incluye sus scripts en studio.html. Primero bloquea las poses legibles. Usa un reparto común, paleta y motivos recurrentes en todas las tomas.

Renderizar e inspeccionar

Desde el directorio del proyecto, renderiza fotogramas seleccionados, una tira de movimiento corta y detalles cuando sea necesario:

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/poses.jpg
node render.mjs --strip=2.1:2.6 --out=out/check/motion.jpg
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg

Abre las imágenes generadas. Verifica el evento y tiempo de lectura de cada toma, rostros, contacto con accesorios, tamaño del personaje, transiciones y paleta. Inspecciona el movimiento alrededor de acciones clave y costuras. Corrige los problemas observados, luego inspecciona nuevamente los fotogramas afectados. Una hoja de contactos verifica poses y continuidad; inspecciona una vista previa codificada corta para la sincronización de movimiento importante. No afirmes revisión visual solo a partir del código fuente.

Usa los ms/fotograma medidos y el recuento de fotogramas para estimar el costo final. Este entorno de escritorio es local: una solicitud para crear un video generalmente autoriza la renderización local. Respeta una elección explícita local/nube; no agregues una puerta de aprobación de ubicación obligatoria ni uses un servicio de pago/nube sin autorización. Si el trabajo es realmente remoto y la ubicación de renderizado es relevante, acláralo antes de una renderización completa. Conserva un proyecto ejecutable y vistas previas si el usuario solicita solo el código fuente o comandos locales.

node render.mjs --clip --out=out/video.mp4
node render.mjs --frames --workers=4
node render.mjs --encode --audio=assets/song.mp3 --out=out/video.mp4

Usa el mismo --fps en la renderización de fotogramas y la codificación. Los archivos de fotogramas se pueden reanudar, pero los fotogramas en caché deben eliminarse para los rangos de tiempo modificados antes de volver a renderizar. --encode consume fotogramas comenzando desde cero; un rango parcial que comienza más tarde necesita su propio número de inicio de FFmpeg y recorte de audio coincidente (consulta la referencia de runtime).

Verifica la duración, resolución, fps y audio codificados con ffprobe e inspecciona el resultado. Devuelve las rutas del video y el proyecto, el rendimiento medido y cualquier limitación real. Mantén node_modules, cachés de fotogramas y archivos temporales fuera de los archivos fuente portátiles.

Invariantes visuales y del motor

• Pinta con paint() e inkLine(); usa glow() para luz aditiva. Vistas clave planas dibujadas en 2D, paleta suave, tinta hirviente. Estos son estilos predeterminados; los requisitos explícitos del usuario tienen prioridad.
• Evita texto innecesario; se admiten karaoke con letras y lettering solicitado. Carga src/karaoke.js después de timeline.js, llena LY y mantén la acción por encima de su banda inferior. Verifica la fuente real y los glifos chinos.
• Cada toma necesita un evento, causa seguida de reacción, y un significado sostenido legible. Anima los rostros a través de emotions() y los tiempos muertos a través de feel(). Ajusta las transiciones a la historia y conecta el final con la apertura cuando sea apropiado.
• Cada fotograma es una función pura de t: sin simulación acumulada, Math.random() sin semilla ni dependencia del orden de renderizado. Usa hash() para variación estable y boilSeed(key) por elemento independiente.
• Mantén los ayudantes en IIFE de escena para evitar colisiones de nombres globales de p5. Protege contra geometría degenerada y NaN. Enmascara el contenido de puertas/ventanas con marcos de primer plano; reduce el peso del contorno bajo zoom cercano.
• El rendimiento depende de los rellenos y trazos del pincel. Mide algunos fotogramas representativos antes de escalar; reduce la geometría excesiva y el número de trabajadores cuando la memoria de la GPU sea escasa. --soft-gl es un recurso lento, no una optimización predeterminada.
• Implementa los capítulos secuencialmente a menos que el usuario solicite explícitamente subagentes. Los trabajadores de renderizado paralelo son una característica del renderizador y no requieren subagentes.

Fuente y licencia: references/upstream.md. Conserva ambos avisos MIT incluidos al redistribuir el motor o la habilidad.