Design for AI

Stil Bento-Grid: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für bento-grid. Auch bekannt als Bento-Box-Layout, Bento-UI, Apple-Keynote-Raster, Feature-Grid-Kacheln. ab 2022 (Apple-Event-Folien, dann 2023 jede SaaS-Landingpage).

Merkmale

  • ein rechteckiges Raster aus Kacheln in gemischten Größen (1x1, 2x1, 2x2) mit gleichen Gutters
  • jede Kachel ist ein eigenständiges Feature: eine Headline, ein Visual, eine Kennzahl
  • einheitlicher Radius (16-24px) und einheitlicher Abstand (12-16px) halten das Durcheinander zusammen
  • Kacheln wechseln zwischen Dunkel, Hell und einer einzelnen Akzentfüllung
  • Inhalt in den Kacheln ist groß und wenig: eine Zahl, ein Icon, ein Screenshot-Ausschnitt
  • das Raster ist der Hero; ein separates Hero-Bild gibt es selten
  • Hover hebt eine Kachel an oder skaliert sie leicht; sonst bewegt sich nichts

Palette

#0b0b0f Seite (dunkle Variante) oder #f5f5f7 (hell), #1c1c22 Kachel, #ffffff helle Kachel, #3b82f6 Akzentkachel, #a1a1aa gedämpfter Text, #fafafa Text

Schrift

Geist oder Manrope; Kacheltitel 600 bei 20-24px, große Kennzahlen 700 bei 48-72px mit -0.03em, Bildunterschriften 400 bei 14px

Do

  • entwirf das Raster mit 4 oder 6 Spalten auf Desktop und klappe es mobil auf 1-2 zusammen; halte die Kachelreihenfolge sinnvoll
  • gib jeder Kachel genau eine Botschaft; braucht sie zwei, teile sie
  • nutze auf jeder Kachel ohne Ausnahme denselben Radius, Abstand und dasselbe Padding

Don't

  • setze nicht überall reine Textkacheln; mindestens ein Drittel braucht ein Visual
  • variiere Gutters oder Radien zwischen Kacheln nicht
  • stapele nicht zwei Bento-Grids direkt hintereinander; eines pro Seitenabschnitt

Bekannt dafür: Apple-Produktseiten, Linear-Features-Seite, Vercel, Arc Browser

CSS-Seed
:root {
  --bg: #0b0b0f;
   --fg: #fafafa;
   --muted: #a1a1aa;
   --tile: #1c1c22;
   --accent: #3b82f6;
   --radius: 20px;
   --gap: 14px;
   --font: 'Geist',sans-serif
}
Prompt

Baue die Startseite als Bento-Grid. Seitenhintergrund #0b0b0f, Text #fafafa, gedämpft #a1a1aa. Raster: CSS Grid mit 6 Spalten und 14px gap bei 1200px, Kacheln über 2x1, 2x2, 3x1 und 1x1 Zellen, auf 2 Spalten bei 768px und 1 Spalte bei 480px zusammenklappend. Jede Kachel: background #1c1c22, border 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Mach eine Kachel #3b82f6 mit weißem Text und eine Kachel reinweiß mit #0b0b0f Text für Kontrast. Kachelinhalt: ein 20px 600 Titel, eine Zeile 14px Bildunterschrift und entweder eine 64px 700 Kennzahl (-0.03em) oder ein beschnittener Screenshot / eine Illustration, unten rechts verankert und vom Kachelradius beschnitten. Schrift Geist durchgehend. Hover: translateY(-2px) und der Rand hellt auf rgba(255,255,255,0.14) auf, 180ms ease-out. Kein anderer Abschnitt darf das Raster wiederverwenden; darunter reine Textabschnitte.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Startseite als Bento-Grid. Seitenhintergrund #0b0b0f, Text #fafafa, gedämpft #a1a1aa. Raster: CSS Grid mit 6 Spalten und 14px gap bei 1200px, Kacheln über 2x1, 2x2, 3x1 und 1x1 Zellen, auf 2 Spalten bei 768px und 1 Spalte bei 480px zusammenklappend. Jede Kachel: background #1c1c22, border 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Mach eine Kachel #3b82f6 mit weißem Text und eine Kachel reinweiß mit #0b0b0f Text für Kontrast. Kachelinhalt: ein 20px 600 Titel, eine Zeile 14px Bildunterschrift und entweder eine 64px 700 Kennzahl (-0.03em) oder ein beschnittener Screenshot / eine Illustration, unten rechts verankert und vom Kachelradius beschnitten. Schrift Geist durchgehend. Hover: translateY(-2px) und der Rand hellt auf rgba(255,255,255,0.14) auf, 180ms ease-out. Kein anderer Abschnitt darf das Raster wiederverwenden; darunter reine Textabschnitte.

## Tokens
:root { --bg:#0b0b0f; --fg:#fafafa; --muted:#a1a1aa; --tile:#1c1c22; --accent:#3b82f6; --radius:20px; --gap:14px; --font:'Geist',sans-serif }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.