Bento-Grid: das neue Hero und warum es nach KI-Slop riecht

Öffne die Startseiten der letzten zehn Series-A-Devtools-Startups in deinen Tabs. Zähl die Heroes, die aus einem Raster gerundeter Kacheln bestehen — oben eine breite Zelle, darunter zwei oder drei quadratische, jede Ecke auf 1rem gerundet, jede Fläche ein blasser Verlauf auf Milchglas. Spätestens beim siebten verlierst du den Faden. Dieses Raster hat inzwischen einen Namen. Es heißt Bento.

Früher meinte das etwas Konkretes. Heute heißt es meistens: Das hat eine KI zusammengebaut — oder ein Mensch, der nur Dinge gesehen hat, die KIs zusammengebaut haben.

Wo es eigentlich herkommt

Apple hat das Bento-Grid nicht erfunden, aber Apple ist der Grund, warum dein Designer das Wort kennt. Die Keynote-Slides der WWDC im Juni 2022 ordneten Feature-Callouts in ungleichen Boxen an — eine große für die Headline-Fähigkeit, kleinere Satelliten für die unterstützenden Specs — und die Designpresse griff sofort zur Metapher der japanischen Lunchbox: Fächer unterschiedlicher Größe, jedes hält genau eine Sache, das Ganze liest sich wie eine ausgewogene Mahlzeit. Spätestens bei den Marketingseiten zum iPhone 15 und den macOS-Feature-Rastern war das Bento Apples Hausschrift für "hier ist ein dichtes Bündel an Features, und wir haben jede einzelne Zelle art-directed".

Genau diesen letzten Halbsatz haben alle weggelassen. Apples Bentos sind art-directed. Jede Zelle hat eine eigens gestaltete Illustration, ein maßgefertigtes Render, einen von Hand abgestimmten Ausschnitt. Das Raster ist ein Rahmen für Handwerk, kein Ersatz dafür. Die Asymmetrie trägt: Die große Zelle ist groß, weil dieses Feature mehr wiegt; das Foto blutet auf eine bestimmte Art aus, weil jemand entschieden hat, dass es so sein soll.

Dann wurde das Ganze zu einem Layout-Primitiv abstrahiert, und das Handwerk fiel unten raus.

Der Weg zum Default

Der Weg von der Keynote zum Slop ist kurz und gut nachvollziehbar.

Von Apple in die Dribbble-Schicht. Innerhalb von Monaten nach der WWDC 2022 war "bento grid" ein Dribbble-Tag mit Tausenden Shots — die meisten davon leere Raster mit Platzhalter-Verläufen, null Inhalt, reines Layout-Cosplay. Die Metapher löste sich von der Mahlzeit und wurde zur Form.

Von Dribbble ins Template-Ökosystem. Next.js-Starterkits und Vercel-nahe Template-Shops lieferten das Muster als Drop-in-Section aus. Tailwind UIs Marketing-Komponenten enthalten eine eigene Kategorie namens Bento grids — das ist die kanonische, copy-paste-fertige Quelle, von der eine Million Sites abgeschrieben haben. Das Raster war nichts mehr, das man entwarf, sondern etwas, das man importierte.

Von Templates zu den Generatoren. Hier ist der Wendepunkt. Als v0, Lovable und Bolt auf dieser Template-Schicht trainiert und gegen sie gescaffoldet wurden, wurde das Bento zum *Standard-Output*. Bitte v0 um eine "features section for a SaaS landing page" und du hast reelle Chancen, ein grid-cols-3 aus gerundeten Cards mit einer col-span-2-Hero-Zelle zu bekommen, jede in bg-gradient-to-br über einem backdrop-blur verpackt. Niemand hat um ein Bento gebeten. Das Modell hat zur "modernen Features-Section" mit der höchsten Wahrscheinlichkeit gegriffen, und die wahrscheinlichste Antwort ist genau das, womit der Trainingsdatensatz übersättigt war.

Das ist der ganze Mechanismus hinter warum jede KI-generierte Website gleich aussieht: Der Generator liefert das statistische Zentrum seines Korpus zurück, und der Korpus sind Template-Marktplätze. Das Bento gehört inzwischen zum selben Fingerabdruck wie Inter, #3b82f6 und der Blau-Lila-Verlauf.

Das exakte Muster

Hier ist das Verräterische, gerendert als der Code, zu dem es fast immer kompiliert. Wer mehr als fünf KI-Builds auditiert hat, erkennt jede Zeile wieder.

<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>

Die einzelnen Marker, jeder für sich schon ein Indiz, zusammen ein Geständnis:

• rounded-3xl überall. 1.5rem Radius an jeder Ecke jeder Zelle. Nicht rounded-xl, kein Mix — dasselbe einheitliche Kissen auf allen Kacheln, weil das Modell keinen Grund hat, es zu variieren.
• bg-gradient-to-br from-x-900 to-x-800. Der diagonale Zwei-Stopp-Verlauf zwischen zwei benachbarten Tönen *derselben* Slate-/Zinc-/Neutral-Skala. slate-900 ist #0f172a, slate-800 ist #1e293b — ein Delta so klein, dass es einen kaum wahrnehmbaren Schimmer erzeugt, der im Thumbnail als "premium" durchgeht und aus der Nähe als "nichts". Derselbe Reflex, dokumentiert in der Tailwind-Blau-Lila-Verlaufssignatur, nur entsättigt für die Dark-Mode-Fraktion.
• border border-white/10 + backdrop-blur-md. Glasmorphismus per Default. Hinter der Zelle ist selten überhaupt etwas zu blurren — der backdrop-blur ist Cargo-Cult-Deko, ein Filter auf einen soliden Hintergrund, der nichts tut, außer den Browser zu zwingen, das Element auf eine eigene Compositing-Ebene zu heben (rendern, die darunterliegende Ebene blurren, zurückkomponieren) — für null sichtbares Ergebnis. Den ganzen Tick zerlegt Glasmorphismus und der backdrop-blur-Verräter.
• shadow-2xl nur auf der Hero-Zelle. Die große Zelle bekommt den schweren Schatten, damit sie "poppt". Sie schwebt über einer flachen Section ganz ohne Logik einer Lichtquelle.
• col-span-2 row-span-2. Die einzige strukturelle Entscheidung im ganzen Block, und es ist immer die Zelle oben links, immer 2x2, weil das das kanonische Beispiel in jedem Tutorial ist.
• Identischer Innenrhythmus. Jede Zelle: Icon, text-2xl font-semibold tracking-tight-Überschrift, text-slate-400-Einzeiler. Der ganze Sinn des Bento war differenzierter Inhalt pro Fach. Das KI-Bento hat in jeder Box *identisches* Content-Gerüst. Es ist eine Mahlzeit, bei der in jedem Fach derselbe Reis liegt.

Das tiefste Indiz ist das letzte. Ein echtes Bento verdient sich seine Asymmetrie — die große Zelle ist groß, weil sie einen Produkt-Screenshot, ein Live-Chart, ein Video hält; die kleinen Zellen halten eine Kennzahl, ein Logo, ein Zitat. Das Slop-Bento macht eine Zelle größer und packt dann denselben

+

hinein wie überall sonst. Die Form sagt "diese Dinge haben unterschiedliches Gewicht". Der Inhalt sagt, sie sind alle gleich. Dieser Widerspruch ist der Fingerabdruck.

Wo du es in freier Wildbahn entdeckst

Kein Naming and Shaming. Aber die *Fundorte des Musters* sind verlässlich gleich:

• YC-Batch-Demo-Day-Landingpages. Die Kohorten vom Frühjahr 2026, Dark Theme, das Features-Bento sitzt direkt unter einer text-6xl-Geist-Headline. Geist plus Bento ist eine Kombi laut genug, um eine Site auf ein Sechs-Monats-Fenster zu datieren — siehe Geist, das neue Inter.
• AI-Wrapper-SaaS. Alles, was nur eine dünne Schicht über einer API ist, liefert das Bento als seine "platform capabilities"-Section aus, weil der Generator, der den Wrapper gebaut hat, auch die Seite gebaut hat.
• Die Template-Marktplätze selbst. Such "bento" in einem beliebigen Next.js-Template-Shop und du bekommst Dutzende fast identischer Kits. Die Ouroboros-Schleife: Templates füttern Generatoren, Generatoren normalisieren das Muster, das normalisierte Muster wird als neue Templates wiederverpackt.
• Portfolio-Sites von Entwicklern, die gerade v0 entdeckt haben. Das Bento ist das neue "Ich habe einen dunklen Hero mit einem Gradient-Blob" — das universelle Signal von jemandem, der den Default ausliefert.

Der diagnostische Griff: DevTools öffnen, die Section inspizieren, und die Klassenliste von drei benachbarten Zellen ansehen. Sind sie bis aufs Byte identisch außer beim col-span, schaust du auf ein generiertes Bento. Das ist derselbe Fünf-Sekunden-Check wie in das CSS lesen, um eine Site zu auditieren.

Alternativen, mit Haltung

Das Bento ist nicht verboten. Es ist *als Default verbraucht*. Die Lösung ist nicht, das Raster zu verbieten; sie ist, eine echte Layout-Entscheidung zu treffen, statt die Autovervollständigung zu akzeptieren. Hier ist, wozu ich greife — und wann.

1. Die redaktionelle Einspaltigkeit mit echtem Anker

Die meisten Landingpages haben ein Feature, das zählt, und vier, die es stützen. Ein Bento tut so, als wären sie ebenbürtig. Sind sie nicht. Führe mit dem einen — full-bleed, ein starkes Asset (eine echte Produktaufnahme, ein tatsächliches Chart, ein kurzer Loop), großzügiger Weißraum — und liste den Rest dann als schlichte typografische Zeilen. Keine Kacheln.

<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>

Die grid-cols-[8rem_1fr]-Zeile aus Label und Fließtext liest sich wie ein Datenblatt oder ein sauber gesetztes Magazin. Man kann sie unmöglich mit einem Bento verwechseln, weil sie keine Kacheln und keinen Radius hat. Sie sagt: Hier hat jemand eine Hierarchie gewählt.

2. Asymmetrie, die tatsächlich asymmetrisch ist

Wenn du ein Raster willst, verdien dir die Asymmetrie mit Inhalt, nicht mit col-span. Nimm ein gebrochenes, versetztes Raster, in dem Zellen *wirklich unterschiedliche Formen* haben, diktiert von dem, was drinsteckt — eine hohe Zelle für ein vertikales Phone-Mock, eine breite Zelle für eine Timeline, ein kleines Quadrat für eine einzelne Zahl. Variiere den Radius (rounded-sm auf der Daten-Zelle, gar keiner auf der Bild-Zelle). Variiere die Behandlung. In dem Moment, in dem sich zwei Zellen in mehr als nur der Größe unterscheiden, verflüchtigt sich der Eindruck des generierten Rasters.

3. Den Container ganz weglassen

Der am meisten unterschätzte Griff 2026: gar keine Cards. Features als Text, gut gesetzt, mit einer Akzentfarbe, die nicht #3b82f6 ist, und einer Schrift, die nicht Inter oder Geist ist. Typografie, Weißraum und eine einzige bewusst gesetzte Haarlinie tun mehr für "durchdacht" als jede Menge backdrop-blur. Der Slop steckt im *Containerisierungs-Reflex* — dem Glauben, jedes Stück Inhalt brauche eine gerundete Glasbox. Widersteh dem, und du bist schon fast draußen. Wenn dir kein Akzent vorschwebt, ist wie man eine Akzentfarbe wählt, die nicht Tailwind-Blau ist der nächste Halt.

4. Wenn du das Bento behältst, brich es mit Absicht

Behalte die Fächer, aber verletze das Template an drei konkreten Stellen: (a) setz die große Zelle unten rechts, nicht oben links, damit sie gegen das Muskelgedächtnis liest; (b) lass eine Zelle über die Raster-Gutter hinausbluten oder eine Nachbarin überlappen; (c) gib jeder Zelle einen anderen *Inhaltstyp*, nicht eine andere Größe desselben Inhaltstyps. Ein Bento mit einer Live-Metrik, einem Zitat, einem Screenshot und einer Karte ist ein Bento. Ein Bento mit vier Überschriften ist eine Tischdecke.

Der rote Faden auf dem Weg vom KI-Slop zur Signatur ist genau das: Der Default-Output ist nie falsch, er ist nur *Durchschnitt*, und Durchschnitt ist inzwischen ein Erkennungssignal. Das Bento wurde in unter vier Jahren von "Apples durchdachtem Feature-Raster" zu "der Form, die v0 zurückgibt, wenn es nichts Konkretes zu sagen hat". Das Raster ist nicht schlechter geworden. Man hat ihm die Absicht herausgezogen.

Der Test

Bevor du ein Bento ausspielst, stell jeder Zelle eine Frage: *Würde dieser Inhalt überleben, wenn man ihn aus seiner Box reißt und als schlichten Text setzt?* Lautet die Antwort "ja, es geht nichts verloren", ist die Box Deko und das Bento leistet exakt null Arbeit — du hast ein Slop-Raster. Lautet die Antwort "nein, der Screenshot, das Chart oder die Zahl braucht den Rahmen", behalte die Zelle.

Lass diesen Test über das ganze Raster laufen. Die Zellen, die durchfallen, sollten keine Kacheln sein. Die Zellen, die bestehen, brauchten ihren Radius und Verlauf wahrscheinlich gar nicht erst auf die anderen abzustimmen.

Eine Bento-Box, die echte, bleibt im Gedächtnis, weil jedes Fach etwas anderes und Richtiges hält. Der Grund, warum die KI-Version nach Slop riecht, ist: Sie hat die Box behalten und die Mahlzeit vergessen.