El arte de cada artículo se genera desde su título

Empezamos esta sección de artículos con un problema operativo banal: cada post necesita una imagen hero. Sin imagen el preview de LinkedIn se ve raro, el listado se siente plano, el artículo parece menos producido.

La opción default es comprar stock photos. Probamos. No funciona — y la razón importa más de lo que parece.

Por qué stock photos no escalan para blogs técnicos

Tres problemas que se acumulan rápido:

1. Curaduría no escala. Cada artículo nuevo son 15-30 minutos buscando en Unsplash, Pexels o Stock, evaluando si la imagen “comunica el tema”, decidiendo crop, ajustando colores. Para 30 artículos, son 10+ horas que se sienten como overhead puro.

2. Brand consistency es manual. Cada foto stock tiene su propia paleta, su propia composición, su propia “vibe”. Mantener coherencia visual a través de 30 artículos requiere disciplina de design que la mayoría de equipos no tiene.

3. Stock photos mienten. El developer en hoodie sonriendo frente a tres pantallas. La diversidad falsa de la oficina ideal. La taza de café junto al MacBook. Son imágenes que prometen “contenido genérico de tech”. Restan credibilidad al artículo que abren.

La alternativa: arte derivado del título

En lugar de buscar imagen para cada artículo, decidimos que el artículo se la genere a sí mismo. La fórmula:

título + tracker_id → seed determinista → SVG procedural → hero

Cada artículo tiene un hero único que solo existe para él. Si cambias el título, cambia la arte. Si rebuildeas el sitio, sale exactamente igual. Si dos lectores abren el mismo artículo, ven exactamente lo mismo.

Eso es lo nuevo: arte determinista. No es random distinto cada vez. Es un hash visual del título.

Cómo funciona en la práctica

La pieza central es un PRNG seeded. Tomamos el título del artículo, lo hasheamos a un entero de 32 bits, y lo usamos como semilla para un generador pseudo-aleatorio (mulberry32):

function hashSeed(s: string): number {
  let h = 0x811c9dc5;
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i);
    h = Math.imul(h, 0x01000193);
  }
  return h >>> 0;
}

function makeRng(seedNum: number) {
  let t = seedNum;
  return () => {
    t = (t + 0x6d2b79f5) >>> 0;
    let r = t;
    r = Math.imul(r ^ (r >>> 15), r | 1);
    r ^= r + Math.imul(r ^ (r >>> 7), r | 61);
    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
  };
}

Esa función rand() reemplaza a Math.random() en todo el generador del SVG. Mismo seed → exactamente la misma secuencia de números → exactamente el mismo arte. Cada decisión visual (número de puntos, posición, color, brillo) sale de ese stream determinista.

Del lado del SVG, cada variant decide qué generar con esos números. Por ejemplo, en constellation:

const count = 38 + Math.floor(rand() * 10);
for (let i = 0; i < count; i++) {
  dots.push({
    x: 40 + rand() * (width - 80),
    y: 30 + rand() * (height - 60),
    r: 1.2 + rand() * 2.8,
    bright: rand() < 0.22,
  });
}

Eso es todo. ~50 líneas por variant. Cero dependencias externas. SVG plano que el browser pinta directo. Carga 8-15 KB. Cero license drama.

Los cuatro variants editoriales

Después de probar 14 patrones, aterrizamos en cuatro:

• constellation — puntos y líneas conectándose. Default. Encaja con artículos reflexivos o de red de ideas.
• plasma — blobs mint con texture noise. Para artículos emocionales, casi-líricos.
• hex-grid — tesselación hexagonal honeycomb. Para artículos estructurados, comparativos, métricas.
• lightning-tree — branching recursivo tipo rayo o árbol. Para artículos sobre decisiones, jerarquías, evolución.

Cada artículo puede declarar su variant en el frontmatter; si no lo declara, el sistema elige uno usando el mismo seed determinista.

Pruébalo

Hicimos un preview interactivo: escribes cualquier string, ves cómo se ve en los 4 variants. Útil para calibrar la decisión de qué variant asignar a un artículo nuevo.

Pruebas suger­idas: tu nombre, tu empresa, el título de un proyecto que tienes en mente. El input genera arte que no existía antes y solo va a existir para ese string.

Por qué importa más allá de Agentic

Lo que hicimos para nuestros hero images se generaliza: deterministic generative content es un patrón útil cada vez que necesitas:

• Avatars únicos por usuario (sin upload manual)
• Identicons para repos o issues
• Tokens visuales únicos por entidad (orgs, projects)
• OG images personalizadas por página

Cualquier caso donde “cada cosa debe verse distinta de forma estable”, el patrón seed+PRNG+SVG resuelve. Es el mismo ingrediente que GitHub usa para sus identicons, Stripe para sus checkout robots, y muchos otros sistemas que requieren diferenciación visual a escala sin curaduría humana.

La pieza que se queda

Cada uno de nuestros artículos lleva una arte que solo existe para él. No es decoración añadida después; es una proyección visual del título mismo — su fingerprint geométrico.

Eso cambia la relación entre forma y contenido. La imagen no ilustra al artículo, es al artículo en otro lenguaje. Si mañana cambiamos el título, cambia la arte; si cambiamos la arte, estamos cambiando una pieza de identidad del artículo, no solo su empaque.

Esa es la apuesta de diseño: que la identidad visual de un sistema no tiene que ser curada pieza por pieza para sentirse intencional. Si la regla es buena y consistente, el resultado agregado se lee como autoría — aunque ninguna pieza individual haya pasado por un humano.

---

Si tu equipo está pensando cómo escalar identidad visual sin contratar diseñador para cada pieza, conversemos — el chat está abierto. (Y prueba el preview interactivo — escribe lo que quieras.)