Was macht apple-bento-grid?
Erstelle Apple-inspirierte Bento-Grid-Karten als eigenständige HTML-Dateien für KI-Codierungsagenten – mit pixelgenauem Output und ohne Designwerkzeuge.
Übersicht
Diese Fähigkeit wandelt deine Beschreibungen in fertige HTML-Dateien um, die ein Apple-ähnliches Bento-Grid-Rasterlayout enthalten. Du gibst an, wie viele Karten du benötigst, wie sie angeordnet sein sollen und welche Inhalte darauf dargestellt werden. Der KI-Agent generiert daraufhin eine vollständige HTML-Datei mit eingebettetem CSS und optimiertem Markup.
Warum nützlich?
- Pixelgenaue Ergebnisse: Kein Nachjustieren nötig, die Ausgabe ist sofort einsatzbereit.
- Keine Designwerkzeuge erforderlich: Einfach beschreiben, und der Agent erledigt den Rest.
- Schnell und wiederverwendbar: Du kannst Basisvorlagen anpassen und für verschiedene Projekte nutzen.
Unterstützte Plattformen
- Claude Code
- Cursor
- Codex
Funktionsweise
- Eingabe: Beschreibe die gewünschte Kartenanzahl, -anordnung (z. B. „2x3“ oder „oben groß, unten drei kleine“) und die Inhalte (Überschriften, Texte, Bilder, Symbole).
- Verarbeitung: Der KI-Agent generiert eine HTML-Datei mit responsivem CSS-Raster, das Apple-typische Designelemente wie abgerundete Ecken, weiche Schatten und klare Schriftarten verwendet.
- Ausgabe: Erhalte eine vollständige, eigenständige HTML-Datei, die du direkt im Browser öffnen oder in dein Projekt einbinden kannst.
Beispiel
Eingabe des Benutzers:
Erstelle ein Bento-Grid mit 4 Karten, oben eine große Karte mit dem Titel „Willkommen“, darunter drei kleine Karten mit den Inhalten „Projekte“, „Team“ und „Kontakt“. Apple-Stil mit hellen Farben und abgerundeten Ecken.
Vom Agenten generiertes HTML (Auszug):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Bento Grid</title>
<style>
/* Pixelgenaues CSS für Bento-Grid */
</style>
</head>
<body>
<!-- Bento-Grid Markup -->
</body>
</html>
Tipps zur Verwendung
- Gib explizite Größen an (z. B. „große Karte nimmt 2 Spalten ein“).
- Verwende Begriffe wie „Apple-Stil“, „minimalistisch“ oder „weiche Schatten“, um das Design zu präzisieren.
- Du kannst auch Farbpaletten oder Markenfarben vorgeben.
Lizenz
MIT – siehe LICENSE für Details.