Frontend & UI
design-skills · Bento
Raster aus unterschiedlichen Blöcken auf Creme, Inter-Schrift, kompakte Skala.
Worum es geht
Ein Richtlinien-Skill für Bento-Box-Layouts, die Inhalte als Rasterblöcke unterschiedlicher Größe zeigen. Durchgängig Inter, eine kompakte Schriftskala von 12 bis 32, Pfirsich- und Blau-Akzente auf Creme.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Warum das fürs Design zählt
- Unterschiedliche Blockgrößen tragen die Hierarchie, das Raster selbst übernimmt die Gewichtung.
- Eine kompakte Schriftskala von 12 bis 32 packt dichten Text in kleine Kacheln.
- Die Creme-Fläche #FFF5E6 hält Blockkanten lesbar ohne schwere Rahmen.
Was es abdeckt
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
So installierst du es
design-skills · Bento
-
Klone das Repo.
git clone https://github.com/bergside/awesome-design-skills -
Verweise Codex auf die Skill-Datei.
skills/bento/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Bitte Codex, jedem Block eine Größe nach Content-Priorität zuzuweisen.
-
Definiere Spacing-Tokens auf der Skala von 4 bis 32, bevor du Kacheln anordnest.
-
Verlange Overflow- und Long-Label-Handling, das dieser Skill als Edge Cases führt.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.