glyphsprite: ilustraciones pixel art que escribes en ASCII

¿Qué es glyphsprite? ¶

glyphsprite convierte unas filas de caracteres en ilustraciones pixel art. Cada letra es un papel (contorno, primer acento, tercer acento…) y el motor la transforma en rectángulos dentro de un SVG que sirves con un <img> normal: se ve nítido a cualquier tamaño, no necesita JavaScript y, si la pieza se mueve, la animación va dentro del propio fichero.

export const KEY = [
  ".oooo..........",
  "oyyyyo.........",
  "oy..yoooooooooo",
  "oy..yyyyyyyyyYo",
  "oyyyyoooooyoyoo",
  ".oooo....oyoyo.",
  ".........ooooo.",
];

Con eso tu agente monta infografías, diagramas explicativos, portadas de blog y tarjetas para redes. Para que la pieza encaje, el texto se mide con la fuente real.

No tiene un estilo propio: usa el tuyo ¶

glyphsprite no trae colores de serie. Los coge, por este orden, de:

1. Lo que le digas.
2. Un glyphsprite/theme.json en tu proyecto.
3. Un DESIGN.md del proyecto: el color más oscuro pasa a ser la tinta, el más claro el papel y el resto acentos. Antes de dibujar te enseña cómo los ha repartido.
4. Si no hay nada, te pregunta, y te ofrece una paleta sobria de referencia.

Como las letras de un sprite son papeles y no colores, si cambias el tema todo el catálogo se repinta solo. Las fuentes salen de Google Fonts o de tus ficheros y van incrustadas en cada SVG, porque un SVG dentro de <img> no puede cargar fuentes externas.

Qué hace el agente con cada imagen ¶

Carga el tema, convierte las filas ASCII en rectángulos, mide el texto con la fuente real y empaqueta un único SVG. Luego congela fotogramas y los mira hasta que la imagen está bien. Todo lo necesario para reconstruirla va en una carpeta glyphsprite/ junto a la imagen, y al final te pregunta qué conservar:

• image: la imagen y el tema. El resto se borra.
• sources: la carpeta entera, para editarla y regenerarla después.
• archive: la imagen y el tema se quedan, y el resto sale del proyecto a ~/.cache/glyphsprite/archive/.

El tema no se borra nunca, así que la siguiente pieza mantiene el mismo aspecto.

Cómo instalar glyphsprite ¶

Funciona con cualquier agente que lea skills. Pega esto en tu terminal:

npx skills add webreactiva/glyphsprite

Necesitas Node 18+ y playwright con Chromium en el proyecto donde generes las piezas. Lo usa para medir el texto y sacar los fotogramas de revisión; los SVG no dependen de nada:

npm i -D playwright && npx playwright install chromium

Es opcional pyftsubset (fonttools con brotli), que recorta las fuentes incrustadas para que el SVG pese menos. Cada release trae también un glyphsprite.zip que puedes pasarle a cualquiera.

Es open source. Puedes ver el código fuente en GitHub antes de instalarla.

Preguntas frecuentes ¶

¿Sirve para la imagen que comparto en redes? ¶

Sí, pero exporta también un PNG. Las redes sociales no muestran vistas previas en SVG, así que para og:image necesitas un fotograma en PNG.

¿La animación molesta a quien prefiere menos movimiento? ¶

No. La animación se para sola si el sistema tiene activado reducir el movimiento.

¿Puedo usar mi propio sistema de diseño? ¶

Sí. Si tu proyecto tiene un DESIGN.md, glyphsprite saca de ahí los colores y la primera familia tipográfica. Solo lee colores en hexadecimal: las referencias a tokens y los oklch() se saltan.