Communitygithub.com

alexgreensh/anidoodle

Dibujos fijos, timelapses de dibujo, películas, explicadores y animaciones web interactivas en 31 estilos, con composiciones musicales. Coincide con un estilo de referencia, mantiene la consistencia de los personajes y enseña a dibujar. Determinista, sin activos generados.

¿Qué es anidoodle?

anidoodle es un skill determinista para agentes de IA (como Claude Code, Cursor o Codex) que permite crear imágenes fijas, películas, bucles animados, explicadores y animaciones web interactivas completamente dibujadas con código. Utiliza un motor portátil que asegura que el mismo código genere exactamente los mismos píxeles y sonido en cualquier máquina, resolución o duración. El skill impone siete leyes de calidad (como tener un punto narrativo, realismo explícito, estilo como método de marcas, y un contrato absoluto de determinismo), y ofrece flujos de trabajo guiados para cada tipo de pieza. Soporta 31 estilos, composición musical generativa, efectos de sonido sincronizados, cámara virtual y cuatro backends de salida (Playwright, HTML Player, Remotion, Hyperframes). Está diseñado para que el agente ayude al usuario a crear arte visual y sonoro de alta calidad sin generar ni descargar activos externos, basándose únicamente en funciones puras y seeds de números aleatorios.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alexgreensh/anidoodle/tree/HEAD/skills/anidoodle

Preguntar en tu IA favorita

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

Documentación

¿Qué hace anidoodle?

Imágenes, películas y piezas interactivas dibujadas enteramente en código. Una función pura pinta cada fotograma; otra compone y sintetiza cada muestra de audio. La misma fuente reconstruye los mismos píxeles y el mismo sonido en cualquier máquina, a cualquier tamaño, en cualquier duración.

El motor es la mitad fácil. El trabajo se desecha porque no tenía sentido, porque el tema era un icono de sí mismo, porque un estilo era solo un cambio de paleta, porque la música no tenía forma, o porque la persona gastó su paciencia aprobando fragmentos. Este skill lleva la artesanía que previene cada uno de esos.

Empieza preguntando, luego construye

Lee references/workflows/start-here.md y ejecuta su proceso de ingesta: una pregunta a la vez, solo lo que la solicitud deja abierto, tu recomendación primero. Qué están haciendo, en qué estilo (muestra la hoja de galería, https://github.com/alexgreensh/anidoodle/blob/main/skills/anidoodle/assets/styles.jpg; la lista es references/styles/INDEX.md), qué forma (1x1, 9x16, 16x9, 4x5 o cualquier W x H), cuánto tiempo duración (cualquier duración; nunca la limites), qué sonido (silencio o un estilo musical y estado de ánimo), qué personajes. "Tú eliges" significa elegir y explicar por qué en una línea. Escribe las respuestas en un breve resumen antes de dibujar.

¿Qué estás haciendo?

HaciendoLee
Una imagen fija: hero, spot, portada, tarjeta, póster, una serieFlujo de trabajo de imagen fija abajo, references/formats.md
Una imagen que se dibuja a sí misma (timelapse, making-of)references/workflows/drawing-process.md
Un bucle, sticker, logo animado, encabezado ambientalFlujo de trabajo de bucle abajo, references/formats.md
Una película narrativa, cualquier duraciónFlujo de trabajo de película abajo, references/workflows/long-film.md
Un explicador o una infografíareferences/workflows/explainer.md
Un video de lanzamiento o producto (sus capturas de pantalla son bienvenidas)references/workflows/launch-video.md; construye sobre references/workflows/launch-video-kit.md
Una animación web interactiva que reacciona a la interfaz de usuarioreferences/workflows/interactive.md
Una lección de dibujo, o "¿cómo dibujo esto?"references/workflows/teach-drawing.md
Un personaje mantenido idéntico en cualquier estilo (xilografía a ladrillo de juguete)references/workflows/character-consistency.md, references/anatomy.md
Un estilo coincidente con su imagenreferences/workflows/adapt-a-style.md
Una banda sonora o pista musicalreferences/music/README.md
  • Música: escribe tu propia partitura para la película (references/music/README.md); node tools/music.mjs check <score.ts#export> debe PASAR antes de que un humano escuche.
  • Efectos de sonido: references/music/sound-design.md. 14 efectos en capas y con semilla, sincronizados por fotograma de película (filmSfx); la partitura se atenúa, y cada señal debe estar dentro de 6 dB de ella. Efectos solo en cambios de dirección reales, un ascenso + un impacto por película.
  • Películas de lanzamiento: launchTemplate.ts renderiza el lanzamiento de un producto a partir de datos: indicaciones, placas dibujadas para él, una partitura escrita para él, palabras, líneas de instalación; los hábitos que ahorran tokens están en references/working-method.md.

Las siete leyes

  1. Cada pieza tiene un punto. Una imagen fija: una idea, un sujeto focal, una luz. Una película: una transformación, una recompensa, un token que regresa. → references/storytelling.md
  2. Declara el realismo. Nombra la anatomía, la vista y la referencia que abriste, tanto para animales, objetos como personas. → references/realism-and-craft.md, references/anatomy.md
  3. Un estilo es una forma de hacer marcas. Cambia el medio, el borde y el orden de las marcas, más allá de la paleta. → references/styles.md
  4. Prueba el aspecto en UNA imagen fija, luego construye de principio a fin. Después de eso, los puntos de control cuestan más de lo que ahorran. → references/working-method.md
  5. El contrato es absoluto. Puro en (frame, env) (y el registro de entrada, para piezas interactivas), solo rng(seed), sin reloj, sin ctx.filter. Nada generado o descargado; las imágenes que la persona trae pueden estar incrustadas, fijadas por hash. → references/determinism-and-contract.md
  6. La música obtiene un plan, nunca un adjetivo. Un estilo, un estado de ánimo por sección, las notas como datos, luego mediciones. No puedes oírlo, así que un humano escucha antes de que se envíe. → references/music/
  7. Uno dirige, uno construye, ambos escriben todo. Cuando una sesión se degrada, reinicia; los archivos son la memoria. → references/working-method.md

Flujos de trabajo

Imagen fija. (1) Di la idea en una oración; nombra el sujeto focal y la luz. (2) Abre referencia real para cualquier cosa que exista, y anota cuál. (3) Elige el estilo y lee primero el encabezado de su placa. (4) Dibuja en el orden de ese medio. (5) Renderiza con still.mjs a tamaño completo, ejecuta el pase de detalle en recortes (caras, manos, pies, uniones; references/craft-bar.md), critica por escrito. ✋ Una aprobación. (6) Entrega cada tamaño y forma solicitados desde la misma fuente, y di que se imprimió reproducible.

Bucle. Como una imagen fija, más: cada movimiento es periódico sobre el bucle, el sujeto nunca se detiene, algo se mueve cada segundo. Comprueba la costura (último fotograma contra el fotograma 0). ✋ Una aprobación, sobre el archivo en movimiento.

Película. (1) La historia en tres oraciones (planteamiento, transformación, recompensa) y el token; para películas más largas, una columna vertebral más una línea por capítulo. Si no puedes escribirla, detente. (2) La cuadrícula: un tiempo es 60 x fps / bpm fotogramas, el bpm de la partitura del resumen; una tabla de señales contiene cada número de fotograma y un verificador se ejecuta al cargar. (3) Referencia real para cualquier cosa que exista. (4) UNA imagen fija de aspecto, el fotograma más difícil, criticado por escrito. ✋ Aprobación. (5) UNA muestra de música de 8 segundos. ✋ Aprobación. (6) Construye toda la película; las comprobaciones mecánicas se ejecutan continuamente. (7) Revisa una vez desde el archivo renderizado: una hoja de contactos por tiempo, cada corte como un par, los números de silencio. Una lista ordenada de correcciones, una reconstrucción. (8) ✋ Aprobación final. Di lo que verificaste y lo que no puedes.

Como máximo tres puntos de aprobación. La aprobación es un presupuesto; gástalo donde equivocarse es caro.

El nivel de artesanía

La prueba: ¿un ilustrador humano orgulloso enviaría esto, o es un ensamblaje mecánico de formas? La tabla completa de señales está en references/craft-bar.md. Las que hunden la mayoría del trabajo: sujetos construidos a partir de elipses, un estilo recoloreado en otro, cosas que aparecen gradualmente en lugar de ser dibujadas, personas con articulaciones de goma, y un personaje dibujado de manera diferente de toma a toma.

Sin silencio muerto en cualquier cosa que se mueva: algo cambia visiblemente cada segundo. Una película que se dibuja a sí misma declara kind: "drawing" y se juzga con un estándar más fino; un congelamiento sigue siendo un fallo.

El motor

engine/ es el núcleo artístico portátil más las herramientas. engine/src/canvas-core no sabe nada sobre el DOM o cualquier backend. W, H, fps y durationFrames provienen del meta de la película. Los movimientos de cámara (paneos, zooms, paralaje, sacudidas) provienen de engine/src/canvas-core/camera.ts: references/camera.md. render.mjs --blur N renderiza con desenfoque de movimiento (N subfotogramas promediados en luz lineal por fotograma); la ruta predeterminada no se modifica.

node <skill>/engine/tools/scaffold.mjs ~/art --film intro --format 9x16 --duration 12   # segundos
cd ~/art && npm install && npx playwright-core install chromium
node tools/still.mjs intro --frame 0 --out out/look.png --scale 2   # una imagen fija, con su hash
node tools/render.mjs intro                                        # MP4; --out x.gif|x.webm|x.apng
node tools/gate.mjs intro                                          # determinismo, contrato, silencio muerto
node tools/emit.mjs intro --out out/intro.html                     # un reproductor offline autónomo
HerramientaQué hace
scaffold.mjsun proyecto con una imagen fija y/o película; --duration, --format o --size, --fps, --bpm
still.mjs / render.mjsfotogramas dibujados dos veces con hashes (--frames a,b,c --sheet en un navegador) / la pieza en cualquier formato (--from/--to, --poster-frame, --hashes)
gate.mjsdeterminismo, contrato, silencio muerto, artefacto; --self-test prueba que puede fallar
registry.mjs / gallery.mjsla lista de estilos desde las propias placas / la hoja de galería
docs-check.mjsfalla cuando el recuento de estilos, duración o ruta de algún documento no coincide con el código
verify-export.mjsQA en el archivo renderizado: fotogramas, duración, partitura; primer fotograma opt-in, costura de bucle, --delivery
test.mjs (npm test)suites unitarias en engine/test/, sin navegador
music.mjsrenderiza y mide una partitura; check la controla (tonalidad, master, guards, stems, novelty)
sfx.mjsel kit de efectos de sonido: list, one, kit <dir>, test

Cuatro backends, un núcleo artístico: playwright, html-player, remotion, hyperframes. → references/backends-and-adapters.md

Ejemplos trabajados

  • Las placas de estilo en engine/src/canvas-core/: cada estilo tiene una imagen fija y una película de cómo se dibuja, con la receta en el encabezado y references/styles/<id>.md.
  • MECHANICAL LEPIDOPTERA en example/: una película con partitura de 47 s. scaffold.mjs ~/study --example.

Estúdialos. No los copies. El nivel de artesanía no se satisface con la herencia.

Límites honestos

No puedes oír la partitura, ver la película en movimiento, ni usar la pieza interactiva. Cada afirmación sobre ellos proviene de una medición o de un humano; di cuál. Una marca de verificación verde es una afirmación hasta que la vuelvas a ejecutar. Renderiza un fotograma a --scale 2 antes de confiar en una imagen fija: una capa transferida a través de la transformación incorrecta se ve bien a 1x y se rompe a 2x.

Skills relacionados