Frontend & UI
Framed Grid Layout
Baut präzise Editorial-Layouts mit dünnen Rahmen und Eckwinkeln.
Worum es geht
Ein Zwölf-Spalten-Raster-Pattern, bei dem jede Section innerhalb von 1px-gerahmten Boxen an geteilten Spalten einrastet. L-förmige Eckwinkel werden als Hintergrundebenen über einer Diagonaltextur mit geringer Deckkraft gezeichnet.
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial
Warum das fürs Design zählt
- Jede Section teilt eine Rahmenfarbe, eine Winkelgröße, eine Spacing-Skala.
- Eckwinkel brauchen kein zusätzliches Markup, damit die Struktur in CSS bleibt.
- Das Layout bleibt klar lesbar, auch wenn die Texturebene entfernt wird.
Was es abdeckt
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
So installierst du es
Framed Grid Layout
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/framed-grid-layout/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Verlange eine technische oder editoriale Seite und bekomm zuerst das übergeordnete Raster.
-
Vergib explizite Span-Klassen statt ad hoc gesetzter Section-Breiten.
-
Prüfe, dass Rahmenkanten an beiden Breakpoints vertikal und horizontal fluchten.
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.