Tantas filas de tarjetas iguales delatan la plantilla.

Qué cuenta como grilla de tarjetas

La regla del Slop Score es concreta, y conviene conocerla para revisar tu página con los mismos ojos. Busca un contenedor con display: grid o flex que tenga entre 3 y 12 hijos visibles y que cumpla todo esto:

• Los hijos miden lo mismo de ancho, con menos de 8 px de diferencia, y cada uno pasa de 150 px.
• Al menos dos comparten fila.
• Todos tienen un título (h2 a h5, un strong o una clase con «title»).

Una sola grilla así no suma nada. La señal aparece cuando hay dos o más en la página. No cuentan las columnas de enlaces del pie, los carruseles ni las filas de una cinta que se mueve sola, que tienen su propia señal.

Lo que muestran las 509 webs

En el estudio de noviembre, con las 509 webs que la gente midió en producción con la misma versión de las reglas, la señal apareció en 104. La diferencia está en dónde:

• 34 de las 63 webs más sloppy (las de 55 puntos o más), más de la mitad.
• 9 de las 167 más cuidadas (las de 15 o menos), poco más del 5 %.

No siempre fue tan claro. En el corpus de la investigación de octubre, las filas de tarjetas iguales salían al revés: las webs cuidadas y largas tenían más. Lo que separaba de verdad era la fila con un ícono arriba de cada tarjeta. En noviembre esa variante, «Íconos en cuadradito de color», aparece en 28 de las 63 más sloppy y en 2 de las 167 más cuidadas. Las cifras completas están en el estudio.

Por qué el modelo arma toda la página así

Un generador escribe la página sección por sección, y para cada una el molde más seguro es el mismo: un título centrado y una fila de cajas que se adapta a cualquier cantidad de ítems. Funciona en el celular, no se rompe con textos largos y no obliga a decidir qué ítem importa más.

Esa última es la decisión que falta. Una grilla pareja dice que las tres funciones valen lo mismo, y casi nunca es verdad: hay una que es la razón por la que alguien te elige.

El CSS para darle jerarquía

Deja una sola fila de tarjetas, la que de verdad sea una lista de cosas parecidas. En la sección de funciones, pon la principal grande, con una captura real del producto, y las otras dos a su lado. Con grid-template-areas queda legible:

.funciones {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "principal segunda"
    "principal tercera";
  gap: 1.5rem;
}
.funciones > :nth-child(1) { grid-area: principal; }
.funciones > :nth-child(2) { grid-area: segunda; }
.funciones > :nth-child(3) { grid-area: tercera; }

@media (max-width: 640px) {
  .funciones {
    grid-template-columns: 1fr;
    grid-template-areas: "principal" "segunda" "tercera";
  }
}

En Tailwind, lo mismo empieza con grid grid-cols-3 en el contenedor y col-span-2 en el ítem principal. Para la sección siguiente, prueba otra forma: una lista sin cajas, con el título a la izquierda y el texto a la derecha, separada por líneas finas. Un dato honesto: la regla mira los anchos, así que cambiar solo el ancho la apaga, pero si la página sigue diciendo lo mismo en todas las secciones, el problema sigue ahí.

Pídeselo así a la IA

Revisa la página y cuenta las secciones que son una fila de tarjetas
iguales (mismo ancho, un título y un texto corto). Deja como máximo una.
En la sección de funciones, haz la principal el doble de ancha, con una
captura real del producto, y las otras dos más pequeñas a su lado.
Convierte otra sección en una lista simple sin cajas ni sombras.
No pongas íconos arriba de los títulos. No cambies los textos.

Después mide tu web con el Slop Score y busca «Grillas de tarjetas iguales» en el resultado: la evidencia dice cuántas tarjetas tiene cada fila y con qué título empieza, para que sepas cuál cambiar. Si las tarjetas que quedan llevan todas el mismo rounded-2xl, sigue con los radios con jerarquía.