Abre cualquier blog tech. Las imágenes destacadas son fotos stock de personas mirando pantallas, ilustraciones genéricas de redes neuronales, o imágenes de DALL-E que todas tienen el mismo estilo pastoso. Puedes intercambiar las imágenes entre blogs y nadie notaría la diferencia.
Eso no es identidad visual. Es decoración genérica.
Cuando construí este blog con Claude, quise resolver el problema de las imágenes de una forma que un diseñador con 10 años de experiencia consideraría correcta: cada imagen debería ser inseparable del contenido que representa.
La solución fue un sistema generativo. Un script PHP que lee el título y contenido de cada artículo, extrae propiedades del texto (longitud, frecuencia de palabras, estructura), y usa esas propiedades como semillas para generar formas, colores y composiciones únicas. Cada post produce una imagen que no podría pertenecer a ningún otro post.
Cómo funciona el sistema
El generador recibe dos inputs: el título del post y un hash del contenido. El título determina el esquema de color. El hash del contenido determina la geometría.
Para el color, el sistema convierte el título en un valor numérico usando crc32 y lo mapea a una paleta predefinida que mantiene coherencia con la identidad del blog (tonos derivados del #b8a070, el accent color del sitio). El resultado es un esquema de color que varía por post pero siempre se siente parte de la misma familia visual.
Para la geometría, el hash del contenido se descompone en segmentos que determinan el número de formas, sus posiciones, tamaños, rotaciones y opacidades. Contenido más largo produce composiciones más densas. Contenido con más headings produce formas más angulares. Contenido con más listas produce patrones más repetitivos.
El resultado es determinístico. El mismo contenido siempre produce la misma imagen. Si edito el artículo, la imagen cambia. La imagen es una representación visual del estado del contenido.
Por qué SVG y no raster
Las imágenes se generan como SVG por tres razones. Primera: escalan infinitamente sin pérdida de calidad. La misma imagen funciona como thumbnail de 200px y como header de 1920px. Segunda: pesan entre 2KB y 8KB contra los 200KB-500KB de una foto JPG. El impacto en performance es prácticamente cero. Tercera: son código. Puedo versionarlas, diff-earlas, y generar variaciones programáticamente.
Para las redes sociales donde se necesita raster (Twitter, LinkedIn, Instagram), el sistema también genera una versión PNG usando GD library de PHP. Misma composición, formato diferente. Automatizado en el momento de publicar.
Lo que esto significa como filosofía de diseño
Como diseñador UX con una década en fintech, aprendí que la identidad visual no es estética. Es sistema. Un buen sistema de diseño no necesita que un humano tome decisiones visuales para cada pieza de contenido. Define reglas, y las reglas generan resultados consistentes pero únicos.
Eso es exactamente lo que hace este generador. Las reglas son: usa la paleta del sitio, deriva la geometría del contenido, mantén la densidad proporcional a la longitud del artículo. Dentro de esas reglas, cada imagen es diferente. Pero todas son recognizablemente shinobis.com.
Es el mismo principio que un sistema de diseño como Material Design o Apple's HIG. No diseñas cada botón. Diseñas las reglas del botón. Los botones se generan solos.
Cómo se conecta con GEO
Las imágenes generativas no son solo estética. Son una señal de originalidad. Cada imagen de este blog es única. No existe en ningún banco de stock. No fue generada con un modelo de difusión que millones de personas usan. Es computacionalmente verificable que pertenece a este contenido específico.
En un mundo donde los modelos de IA evalúan originalidad y esfuerzo de contenido, tener imágenes que son una función directa del texto es una señal de autenticidad que las fotos stock no pueden replicar.
Google internamente mide contentEffort. Un blog donde cada imagen se genera algorítmicamente desde el contenido demuestra un nivel de esfuerzo e intención que un blog con fotos de Unsplash no puede demostrar.
El código y el repo
El generador es un archivo PHP de menos de 200 líneas. No tiene dependencias externas para SVG. Usa GD (incluido en PHP estándar) para la versión PNG. Se ejecuta automáticamente cada vez que se publica o actualiza un post desde el admin.
Planeo liberar una versión limpia como repo público en GitHub. No porque el código sea particularmente sofisticado sino porque la idea de que cada pieza de contenido genere su propia identidad visual es un concepto que debería ser accesible para cualquier blog independiente.
Tu identidad visual no debería depender de un banco de stock ni de un modelo de difusión. Debería nacer de tu contenido. Porque si tu contenido es único, tu identidad visual también debería serlo.
