Rows of identical cards give the template away.

What counts as a card grid

The Slop Score rule is specific, and knowing it lets you check your page the same way. It looks for a container with display: grid or flex holding 3 to 12 visible children that meet all of this:

• The children are the same width, within 8 px, and each is wider than 150 px.
• At least two of them share a row.
• Every one has a heading (h2 to h5, a strong or a class containing "title").

A single grid like that adds nothing. The signal fires when the page has two or more. Footer link columns, carousels and the rows of an auto-scrolling strip don't count; the strip has a signal of its own.

What 509 sites show

In the November study, covering the 509 sites people measured in production under the same version of the rules, the signal showed up on 104. The gap is in where:

• 34 of the 63 sloppiest sites (scores of 55 or more), over half.
• 9 of the 167 most careful (15 or less), just over 5 %.

It wasn't always this clear. In the corpus behind October's research, identical card rows came out backwards: the long, carefully made sites had more of them. What really separated them was the row with an icon on top of every card. In November that variant, "Icons in little colored squares", turns up on 28 of the 63 sloppiest and 2 of the 167 most careful. The full figures are in the study.

Why the model builds the whole page this way

A generator writes the page one section at a time, and for each one the safest mold is the same: a centered heading and a row of boxes that stretches to fit any number of items. It works on phones, survives long copy and never forces a choice about which item matters most.

That choice is what's missing. An even grid says your three features are worth the same, and that's almost never true: one of them is the reason people pick you.

CSS that adds hierarchy

Keep one row of cards, the one that really is a list of similar things. In the features section, make the main one large, with a real product screenshot, and put the other two beside it. grid-template-areas keeps it readable:

.features {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "main second"
    "main third";
  gap: 1.5rem;
}
.features > :nth-child(1) { grid-area: main; }
.features > :nth-child(2) { grid-area: second; }
.features > :nth-child(3) { grid-area: third; }

@media (max-width: 640px) {
  .features {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "second" "third";
  }
}

In Tailwind, the same idea starts with grid grid-cols-3 on the container and col-span-2 on the main item. For the next section, try another shape: a list without boxes, heading on the left and text on the right, divided by thin rules. A fair warning: the rule checks widths, so changing the width alone switches it off, but if every section still says the same thing in the same way, the problem is still there.

Ask the AI like this

Go through the page and count the sections that are a row of identical
cards (same width, a heading and a short text). Keep one at most.
In the features section, make the main feature twice as wide, with a real
product screenshot, and put the other two beside it, smaller.
Turn another section into a plain list with no boxes or shadows.
Don't put icons above the headings. Don't change the copy.

Then run your site through the Slop Score and look for "The same card grid, again" in the result: the evidence lists how many cards each row has and the heading it starts with, so you know which one to change. If the cards you keep all share the same rounded-2xl, move on to corner radii with hierarchy.