Apple Bento Grid
Problem
Die Erstellung visuell ansprechender Präsentationsgrafiken erfordert normalerweise Design-Tools wie Figma oder Keynote. Dieses Skill generiert Apple-ähnliche Bento-Grid-Layouts als eigenständige HTML-Dateien, die sich per Screenshot in pixelgenaue Bilder umwandeln lassen – ganz ohne Design-Tool.
Übersicht
Generiere eigenständige HTML-Dateien, die Apple-inspirierte Bento-Kartenraster rendern. Jede Ausgabe ist eine einzelne HTML-Datei mit Inline-CSS – keine Abhängigkeiten außer Google Fonts. Die Karten füllen ein dichtes CSS-Raster mit minimalen Abständen, bereit für den Playwright-Screenshot-Export in 2x-Auflösung. Es stehen sowohl helle als auch dunkle Themes zur Verfügung.
Arbeitsablauf
- Lies das Designsystem selektiv: Konsultiere
design-system.mdbei Bedarf:- Immer lesen: Abschnitt 2 (Lückenloses Grid) + Abschnitt 3 (Layout-Vorlagen) – die Grundlage des Rasters
- Pro Kartentyp lesen: Abschnitte 5.1–5.7 je nach verwendeten Karten
- Für das Theme lesen: Abschnitt 1 (helle Tokens) oder Abschnitt 9 (dunkle Tokens)
- Einmalig für die erste Generierung lesen: Abschnitt 8 (HTML-Gerüst) als struktureller Ausgangspunkt
- Sammle den Inhalt des Nutzers – welche Statistiken, Meilensteine, Kategorien und Zitate gezeigt werden sollen
- Wähle ein Theme – schlage je nach Kontext hell, dunkel oder beides vor (siehe Themenauswahl unten)
- Wähle ein Layout – wähle aus den 3 Layout-Vorlagen basierend auf Kartenanzahl und Ausrichtung
- Setze Karten zusammen – wähle Kartentypen und fülle sie mit dem Inhalt des Nutzers; priorisiere Dichte (keine Karten, die sich leer anfühlen)
- Frage nach Logos/Bildern – wenn der Nutzer ein Logo oder Bilder hat, binde sie ein (siehe Logos & Bilder unten)
- Generiere das HTML – erstelle eine einzige, eigenständige HTML-Datei
- Visuelle Überprüfung – öffne das HTML im Browser und mache einen Screenshot, um auf Probleme zu prüfen (siehe Visuelle Überprüfung unten)
- Biete eine vertikale Version an – frage nach der Generierung eines Querformat-Rasters: „Möchtest du eine vertikale (Hochformat-)Version für soziale Medien?“ und generiere bei Zustimmung eine Vorlage-C-Anpassung
- Screenshot (optional) – verwende das Playwright-Skript, um PNGs in 2x zu erfassen
Visuelle Überprüfung
Öffne nach der Generierung des HTML immer die Ausgabe, um visuelle Probleme zu erkennen, bevor du sie dem Nutzer präsentierst. Verwende Playwright, Browser-MCP-Tools oder open, um die Datei zu rendern, und überprüfe dann auf:
Waisen in Pill-Tags – Ein einzelnes Pill-Tag oder Wort, das alleine in eine neue Zeile umbricht. Behebe dies, indem du ein Pill-Tag entfernst, sodass die verbleibenden Pill-Tags gleichmäßig ausgefüllt werden, oder füge genügend Pill-Tags hinzu, um zwei vollständige Zeilen zu füllen.
Leerflächen – Karten, die mit zu viel Weißraum spärlich wirken. Behebe dies, indem du einen Untertitel, ein Badge oder zusätzlichen Beschreibungstext hinzufügst, um die Karte zu füllen.
Textüberlauf – Zahlen oder Beschriftungen, die für ihre Kartenbreite zu lang sind. Behebe dies, indem du die Schriftgröße reduzierst oder abkürzt (z. B. „$2,4 Mio.“ statt „$2.400.000“).
Kaputtes Grid – Sichtbare Zeilenabstände oder falsch ausgerichtete Karten. Überprüfe: kein align-items: start, Abstand ist exakt 6px, alle Grid-Zellen sind belegt.
Schrift-Fallback – Text, der in Systemschriftarten statt in Sora/DM Sans gerendert wird. Stelle sicher, dass der Google-Fonts-Link vorhanden ist und die Seite Netzwerkzugriff hat.
Screenshot-Beschnitt – Rechte oder untere Kanten von Karten, die im exportierten PNG abgeschnitten sind. Behebe dies, indem du sicherstellst, dass die Viewport-Breite genau der Grid-CSS-Breite entspricht und der Clip box.x/box.y aus boundingBox() verwendet, nicht x: 0, y: 0.
Wenn Probleme gefunden werden, korrigiere das HTML und überprüfe es erneut. Präsentiere die Ausgabe dem Nutzer erst, wenn sie die visuelle Überprüfung bestanden hat.
Themenauswahl
Schlage ein Theme basierend auf dem Kontext vor. Wenn du dir unsicher bist, generiere beide.
| Kontext | Empfohlenes Theme |
|---|---|
| Foliensatz / Präsentation | Dunkel – höhere visuelle Wirkung auf Projektoren |
| Soziale Medien / Portfolio | Dunkel – sticht in Feeds hervor |
| Bericht / Dokument-Einbettung | Hell – passt zu weißen Seitenhintergründen |
| Druck / PDF | Hell – spart Tinte, bessere Lesbarkeit |
| Nutzer sagt „Apple-Stil“ | Hell – Apples typischer Look |
| Nutzer sagt „modern“ oder „elegant“ | Dunkel – zeitgenössisches Gefühl |
| Keine Präferenz angegeben | Beide – generiere zwei Dateien, lass den Nutzer wählen |
Siehe design-system.md Abschnitt 9 für vollständige dunkle Themendefinitionen oder Abschnitt 1 für helle Themendefinitionen.
Ausgabeformat
Erzeuge immer eine einzige, eigenständige HTML-Datei mit:
<!DOCTYPE html>+<html lang="en">- Google Fonts
<link>-Tags im<head> - Gesamtes CSS in einem einzigen
<style>-Block - Gesamter Inhalt im
<body>– kein JavaScript erforderlich
Verfügbare Kartentypen
| Karte | Verwendung für | Hauptmerkmal |
|---|---|---|
| Hero | Slogans, Schlagzeilen | Farbverlauf oben, spannt über 2 Zeilen |
| Stat | Zahlen + Beschriftungen | Farbcodierter Akzent pro Kategorie |
| Kategorie | Gruppierte Elemente (Phasen, Teams, Quartale) | Farbetikett + Untertitel + Pill-Tags |
| Balkendiagramm | Wachstum / Vergleich im Zeitverlauf | Farbverlaufsbalken, Header-Badge |
| Badge | Tool-Zuschreibung, hervorgehobener Aufruf | Icon-Pill + Statistikzahl |
| Zitat | Leitbild, Erfahrungsbericht | Dunkler Hintergrund, weißer Text, grünes <em> |
| Highlight | Held-Zahl (3x, 10x, 100%) | Vollflächiger Farbverlauf-Hintergrund |
Layout-Vorlagen
| Vorlage | Spalten | Breite | Seitenverhältnis | Am besten geeignet für |
|---|---|---|---|---|
| A: Horizontal | 4 Spalten | 1200px | 52/25 | 12-16 Karten, Folien |
| B: Horizontal | 3 Spalten | 1100px | 52/22 | 8-10 Karten, fokussiert |
| C: Vertikal | 2 Spalten | 600px | keine (Inhalt) | 8-14 Karten, soziale Medien |
Kritisch: Regeln für das lückenlose Grid
Diese 5 Regeln sind für ein Apple-ähnliches Erscheinungsbild zwingend erforderlich. Details siehe design-system.md Abschnitt 2.
- NIEMALS
align-items: startsetzen – Standardstretchfüllt die Zellen aspect-ratiobei horizontalen Layouts verwenden, um die Containerform festzulegen- Zeilen:
1frfür horizontal,autofür vertikal - Abstand:
6px(nicht 8px) - Jede Grid-Zelle muss belegt sein – keine leeren Zellen
Screenshot-Export
Verwende das Playwright-Skript unter scripts/screenshot.mjs, um pixelgenaue PNGs zu erfassen.
cd scripts
npm install
npx playwright install chromium
node screenshot.mjs
Bearbeite das pages-Array in screenshot.mjs, um auf deine HTML-Dateien zu verweisen. Jeder Eintrag benötigt: file (HTML-Pfad), output (PNG-Pfad), viewportWidth (muss mit der Grid-Breite übereinstimmen).
Kritisch: Viewport muss der Grid-Breite entsprechen. Wenn der Viewport breiter als das Grid ist, wird das Grid zentriert und der Clip kann die rechte Kante abschneiden. Setze viewportWidth immer auf die exakte Grid-CSS-Breite (1200 für 4 Spalten, 1100 für 3 Spalten, 600 für 2 Spalten).
Kritisch: Clip muss die Elementposition verwenden. Verwende beim Zuschneiden auf das Grid-Element box.x und box.y von boundingBox(), nicht x: 0, y: 0. Wenn das Grid in einem breiteren Viewport zentriert ist, beginnt x: 0 den Clip vor dem Grid und schneidet die rechte Seite ab.
Überprüfe nach dem Screenshot immer das Ausgabebild, um sicherzustellen, dass keine Kanten abgeschnitten sind. Prüfe, dass die Karten ganz rechts und ganz unten vollständig sichtbar sind und ihre abgerundeten Ecken intakt sind.
Logos & Bilder
Benutzer können eigene Logos oder Bilder zu den Bento-Grid-Karten hinzufügen. Frage den Nutzer, ob er Logos oder Bilder einfügen möchte.
Platzierungsmöglichkeiten:
| Ort | Wie | Am besten geeignet für |
|---|---|---|
| Ecke der Hero-Karte | <img> mit position: absolute; top: 20px; right: 20px; width: 40px; | Firmenlogo |
| Badge-Karten-Icon | Ersetze das SVG in .badge-pill durch ein <img>-Tag (width: 16px; height: 16px; border-radius: 4px;) | Tool/Framework-Logo |
| Vollflächiger Kartenhintergrund | background-image: url(...) mit Overlay-Verlauf für Textlesbarkeit | Feature-Screenshots |
| Eigenständige Bildkarte | <img> füllt die Karte mit object-fit: cover; border-radius: 18px; | Produktfotos |
Richtlinien:
- Verwende
<img src="pfad/zu/datei.png">mit einem lokalen Dateipfad – das HTML ist für den Screenshot-Export, nicht zum Hosten - Halte Logos klein (24-48px), damit sie die Karte nicht dominieren
- Stelle bei dunklem Theme sicher, dass Logos auf dunklem Hintergrund funktionieren (verwende weiße/helle Versionen)
- Füge immer
alt-Text für die Barrierefreiheit hinzu
Inhaltsanpassung
| Nutzerdaten | Empfohlene Vorlage | Kartenmischung |
|---|---|---|
| 3–5 Statistiken, keine Kategorien | C (2 Spalten vertikal) | 1 Hero + 3–5 Stats + 1 Zitat |
| 6–8 Statistiken, 1–2 Kategorien | B (3 Spalten horizontal) | 1 Hero + 4–6 Stats + 1–2 Kategorien + 1 Diagramm |
| 8–12 Statistiken, 3+ Kategorien | A (4 Spalten horizontal) | Volle Mischung: Hero, Stats, Kategorien, Diagramm, Badge, Zitat, Highlight |
| Soziales / Hochformat | C (2 Spalten vertikal) | Jede Mischung, kleinere Schriftarten |
Dichteregel: Jede Karte sollte sich vollständig anfühlen. Wenn eine Karte spärlich wirkt, füge einen Untertitel, ein Badge oder Pill-Tags hinzu. Wenn das Grid sichtbare Leerflächen aufweist, lasse entweder eine Karte über mehrere Zellen spannen oder füge eine unterstützende Karte hinzu.
Anpassungscheckliste
- Inhalt sammeln – Statistiken, Kategorien, Meilensteine, Zitate
- Theme wählen – hell, dunkel oder beides
- Layout wählen – 4 Spalten, 3 Spalten oder 2 Spalten
- Grid-Bereiche benennen – lesbare Namen, die zum Inhalt passen
- Kartentypen auswählen – Hero, Stat, Kategorie, Diagramm, Badge, Zitat, Highlight
- Akzentfarben zuweisen – eine pro Kategorie, maximal 3–4 Akzente
- Abmessungen festlegen – Viewport-Breite entspricht Grid-Breite
- Seitenverhältnis festlegen – nur für horizontal; für vertikal weglassen
- Dichte überprüfen – keine leeren Karten, keine ungenutzten Grid-Zellen, Abstand 6px
- Für Ausrichtung skalieren – vertikal erhält kleinere Schriftarten, Abstände, Radien
- Screenshot – Playwright in 2x, Viewport entspricht Grid-Breite
Verifizierung
Nach der Generierung einer Bento-Grid-HTML-Datei:
- In Chrome oder Safari öffnen – überprüfen, dass alle Grid-Zellen gefüllt sind und keine sichtbaren Zeilenabstände vorhanden sind
- Schriftartladung prüfen – Sora und DM Sans sollten gerendert werden (kein System-Fallback)
- Bei dunklem Theme – überprüfen, dass die Kartenhintergründe #1a1a1a sind, nicht #fff
- Screenshot mit der korrekten Viewport-Breite (1200/1100/600) in 2x-Auflösung
- Dichte bestätigen – keine Karte sollte übermäßigen Weißraum aufweisen
Hinweise
- Google Fonts erfordert Internetzugang; offline fallen die Grids auf Systemschriftarten zurück
- Playwright-Screenshot ist optional; Benutzer können manuelle Browser-Screenshots machen
aspect-ratioist nur für horizontale Layouts; vertikale Layouts ergeben sich aus der Inhaltshöhe- Maximal 3–4 Akzentfarben pro Grid, um die Apple-ähnliche Zurückhaltung zu wahren
- Dieses Skill erzeugt statisches HTML für den Screenshot-Export, keine interaktiven Dashboards
- Für Grids mit weniger als 6 Datenpunkten eignet sich Vorlage C (2 Spalten vertikal) meist am besten
Referenzdateien
design-system.md– Vollständige Design-Tokens (hell + dunkel), Karten-CSS/HTML, Layout-Vorlagen und Gerüstscripts/screenshot.mjs– Playwright-Screenshot-Erfassungsskript