El bento grid: el nuevo hero del slop de IA en 2026

Abre en pestañas las homepages de las últimas diez startups de devtools que han levantado una serie A. Cuenta los heroes que son una rejilla de baldosas redondeadas: una celda ancha arriba, dos o tres celdas casi cuadradas debajo, cada esquina con un radio de 1rem, cada superficie con un degradado tenue posado sobre cristal esmerilado. Perderás la cuenta hacia la séptima. Esa rejilla ya tiene nombre. Es el bento.

Antes significaba algo concreto. Ahora significa, casi siempre, que esto lo montó una IA, o una persona que solo ha mirado cosas montadas por IA.

De dónde viene de verdad

Apple no inventó el bento grid, pero Apple es la razón de que tu diseñador conozca la palabra. Las diapositivas de la keynote de la WWDC de junio de 2022 colocaban los reclamos de cada función en cajas desiguales (una grande para la capacidad estrella, satélites más pequeños para las specs de apoyo) y la prensa de diseño tiró de inmediato de la metáfora de la fiambrera japonesa: compartimentos de distintos tamaños, cada uno con una sola cosa, y el conjunto leyéndose como una comida equilibrada. Para cuando llegaron las páginas de marketing del iPhone 15 y las rejillas de funciones de macOS, el bento era ya el idioma de la casa de Apple para decir "aquí tienes un montón denso de funciones y hemos dirigido artísticamente cada una de las celdas".

Esa última frase es la parte que todo el mundo soltó por el camino. Los bentos de Apple están dirigidos artísticamente. Cada celda tiene una ilustración a medida, un render propio, un encuadre afinado a mano. La rejilla es un marco para el oficio, no un sustituto de él. La asimetría carga peso: la celda grande es grande porque esa función importa más, la foto se sangra de una manera concreta porque alguien decidió que debía hacerlo.

Luego se abstrajo en una primitiva de layout, y el oficio se cayó por el desagüe.

El viaje hasta convertirse en opción por defecto

El camino de la keynote al slop es corto y fácil de rastrear.

De Apple a la capa de Dribbble. A los pocos meses de la WWDC 2022, "bento grid" era una etiqueta de Dribbble con miles de shots, la mayoría rejillas vacías con degradados de relleno, cero contenido, puro cosplay de layout. La metáfora se desligó de la comida y se convirtió en una forma.

De Dribbble al ecosistema de plantillas. Los starter kits de Next.js y las tiendas de plantillas del entorno Vercel sirvieron el patrón como una sección lista para soltar. Los componentes de marketing de Tailwind UI incluyen una categoría que se llama, literalmente, Bento grids: esa es la fuente canónica, copiable y pegable, de la que tiraron un millón de webs. La rejilla dejó de ser algo que diseñabas y pasó a ser algo que importabas.

De las plantillas a los generadores. Aquí está el punto de inflexión. Cuando v0, Lovable y Bolt se entrenaron y se apoyaron en esta capa de plantillas, el bento se convirtió en una *salida por defecto*. Pídele a v0 una "sección de features para una landing de SaaS" y tienes posibilidades reales de que te devuelva un grid-cols-3 de tarjetas redondeadas con una celda hero en col-span-2, cada una envuelta en bg-gradient-to-br sobre un backdrop-blur. Nadie pidió un bento. El modelo tiró de la "sección de features moderna" más probable, y la respuesta más probable es justo aquello de lo que estaba saturado el conjunto de entrenamiento.

Ese es el mecanismo entero detrás de por qué todas las webs generadas por IA se parecen: el generador devuelve el centro estadístico de su corpus, y el corpus son los marketplaces de plantillas. El bento forma ya parte de la misma huella que Inter, #3b82f6 y el degradado azul-violeta.

El patrón exacto

Aquí tienes la pista, renderizada como el código en el que casi siempre se compila. Si has auditado más de cinco builds de IA, vas a reconocer cada línea.

<section class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-6xl mx-auto px-6">
  <!-- the obligatory big cell -->
  <div class="md:col-span-2 md:row-span-2 rounded-3xl p-8
              bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md
              shadow-2xl">
    <h3 class="text-2xl font-semibold tracking-tight">Lightning fast</h3>
    <p class="text-slate-400 mt-2">Built for speed and scale.</p>
  </div>

  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
</section>

Las pistas que lo componen, cada una un marcador por sí sola y todas juntas una confesión:

• rounded-3xl por todas partes. 1.5rem de radio en cada esquina de cada celda. Ni rounded-xl, ni una mezcla: el mismo cojín uniforme en todas las baldosas, porque el modelo no tiene ningún motivo para variarlo.
• bg-gradient-to-br from-x-900 to-x-800. El degradado diagonal de dos paradas entre dos tonos contiguos de *la misma* rampa slate/zinc/neutral. slate-900 es #0f172a, slate-800 es #1e293b: un delta tan pequeño que produce un brillo apenas perceptible que se lee como "premium" en una miniatura y como "nada" de cerca. El mismo reflejo documentado en la firma del degradado azul-violeta de Tailwind, solo que desaturado para la afición al modo oscuro.
• border border-white/10 + backdrop-blur-md. Glassmorphism por defecto. Rara vez hay algo *detrás* de la celda que difuminar: el backdrop-blur es decoración de culto cargo, un filtro aplicado sobre un fondo sólido donde no hace nada más que obligar al navegador a promover el elemento a su propia capa de composición (pintarlo, difuminar la capa de debajo, recomponer) para cero resultado visible. Toda la manía está diseccionada en el glassmorphism y la pista del backdrop-blur.
• shadow-2xl solo en la celda hero. La celda grande se lleva la sombra pesada para "destacar". Flota sobre una sección plana sin ninguna lógica de fuente de luz.
• col-span-2 row-span-2. La única decisión estructural de todo el bloque, y siempre es la celda de arriba a la izquierda, siempre 2x2, porque es el ejemplo canónico de cada tutorial.
• Ritmo interior idéntico. Cada celda: icono, encabezado text-2xl font-semibold tracking-tight, una sola línea en text-slate-400. La gracia del bento era contenido diferenciado por compartimento. El bento de la IA tiene el *mismo* andamiaje de contenido en cada caja. Es una comida en la que cada compartimento lleva el mismo arroz.

La pista más profunda es esta última. Un bento de verdad se gana su asimetría: la celda grande es grande porque lleva una captura del producto, un gráfico en vivo, un vídeo; las celdas pequeñas llevan una cifra, un logo, una cita. El bento del slop hace una celda más grande y luego le mete el mismo

+

que a todas las demás. La forma dice "estas cosas tienen pesos distintos". El contenido dice que son todas iguales. Esa contradicción es la huella.

Dónde lo vas a pillar en plena naturaleza

Sin señalar ni avergonzar a nadie. Las *ubicaciones del patrón* son de una constancia pasmosa:

• Landings de demo-day de las batches de YC. Cohortes de la primavera de 2026, tema oscuro, el bento de features justo debajo de un titular text-6xl en Geist. Geist más bento es un combo lo bastante estridente como para datar una web en una ventana de seis meses; mira Geist, el nuevo Inter.
• SaaS-wrapper de IA. Cualquier cosa que sea una capa fina sobre una API sirve el bento como su sección de "capacidades de la plataforma", porque el generador que construyó el wrapper construyó también la página.
• Los propios marketplaces de plantillas. Busca "bento" en cualquier tienda de plantillas de Next.js y te salen docenas de kits casi idénticos. El uróboros: las plantillas alimentan a los generadores, los generadores normalizan el patrón, el patrón normalizado se reempaqueta como plantillas nuevas.
• Webs de portfolio de gente que acaba de descubrir v0. El bento es el nuevo "tengo un hero oscuro con un blob de degradado": la señal universal de alguien que está publicando la opción por defecto.

El movimiento diagnóstico: abre las DevTools, inspecciona la sección y mira la lista de clases en tres celdas hermanas. Si son idénticas byte a byte salvo por el col-span, estás ante un bento generado. Es la misma lectura de cinco segundos que cubre leer el CSS para auditar una web.

Alternativas, con un punto de vista

El bento no está prohibido. Está *gastado como opción por defecto*. El arreglo no es prohibir la rejilla; es tomar una decisión de layout de verdad en lugar de aceptar el autocompletado. Esto es a lo que recurro yo, y cuándo.

1. La columna única editorial con un ancla de verdad

La mayoría de las landings tienen una función que importa y cuatro que la apoyan. Un bento finge que son iguales. No lo son. Arranca con la que manda (a sangre completa, un único asset potente: una captura real del producto, un gráfico de verdad, un loop corto), espacio en blanco generoso, y luego lista el resto como filas tipográficas a secas. Sin baldosas.

<section class="max-w-3xl mx-auto px-6 space-y-24">
  <figure class="space-y-6">
    <img src="/real-product-capture.png" class="w-full" alt="…" />
    <figcaption class="text-lg leading-relaxed">…</figcaption>
  </figure>

  <ul class="divide-y divide-neutral-800">
    <li class="py-6 grid grid-cols-[8rem_1fr] gap-6 items-baseline">
      <span class="font-mono text-sm uppercase tracking-widest text-neutral-500">Sync</span>
      <p>…</p>
    </li>
    <!-- repeat -->
  </ul>
</section>

La fila de etiqueta y cuerpo con grid-cols-[8rem_1fr] se lee como una ficha de specs o como una revista bien compuesta. Es imposible confundirla con un bento porque no tiene ni baldosas ni radio. Dice que alguien eligió una jerarquía.

2. Asimetría que sea de verdad asimétrica

Si quieres una rejilla, gánate la asimetría con el contenido, no con col-span. Usa una rejilla rota y descentrada donde las celdas tengan *formas genuinamente distintas* dictadas por lo que llevan dentro: una celda alta para un mock vertical de móvil, una celda ancha para una línea de tiempo, un cuadradito para un solo número. Varía el radio (rounded-sm en la celda de datos, ninguno en la celda de imagen). Varía el tratamiento. En el momento en que dos celdas se diferencian en algo más que el tamaño, la lectura de "rejilla generada" se evapora.

3. Quita el contenedor del todo

El movimiento más infrautilizado de 2026: nada de tarjetas. Las features como texto, bien compuesto, con un color de acento que no sea #3b82f6 y una tipografía que no sea Inter ni Geist. La tipografía, el espacio en blanco y una única línea fina deliberada hacen más por el "esto está pensado" que toda la cantidad de backdrop-blur que quieras. El slop está en el *reflejo de contenerizar*, en la creencia de que cada pieza de contenido necesita su caja de cristal redondeada. Resiste eso y ya estás casi fuera. Si no tienes ningún acento en mente, la siguiente parada es cómo elegir un color de acento que no sea el azul de Tailwind.

4. Si te quedas con el bento, rómpelo a propósito

Conserva los compartimentos pero viola la plantilla en tres puntos concretos: (a) pon la celda grande abajo a la derecha, no arriba a la izquierda, para que se lea contra la memoria muscular; (b) deja que una celda se desborde más allá del canalón de la rejilla o se solape con una vecina; (c) dale a cada celda un *tipo de contenido* distinto, no un tamaño distinto del mismo tipo de contenido. Un bento con una métrica en vivo, una cita, una captura y un mapa es un bento. Un bento con cuatro encabezados es un mantel.

El hilo conductor de pasar del slop de IA a la firma propia es exactamente este: la salida por defecto nunca está mal, simplemente es *del montón*, y lo del montón es ya una señal de detección. El bento pasó de "la rejilla de funciones pensada de Apple" a "la forma que devuelve v0 cuando no tiene nada concreto que decir" en menos de cuatro años. La rejilla no empeoró. Le arrancaron la intención.

La prueba

Antes de publicar un bento, hazle una pregunta a cada celda: *¿sobreviviría este contenido si lo sacaras de su caja y lo pusieras como texto plano?* Si la respuesta es "sí, no se pierde nada", la caja es decoración y el bento no hace ningún trabajo: tienes una rejilla de slop. Si la respuesta es "no, la captura, el gráfico o el número necesitan el marco", quédate con la celda.

Pasa esa prueba por toda la rejilla. Las celdas que la suspendan no deberían ser baldosas. Las celdas que la aprueben probablemente no necesitaban, para empezar, igualar el radio y el degradado de las demás.

Una fiambrera bento, la de verdad, es memorable porque cada compartimento lleva algo distinto y acertado. La razón de que la versión de la IA se lea como slop es que se quedó con la caja y se olvidó de la comida.