Design-Systeme
Agency Grid Layout Minimal
Editoriales Mehrspalten-Raster mit übergroßen Headlines und winzigen Großbuchstaben-Labels.
Worum es geht
Eine Layout-Richtung für Agentur-Sites: breite Raster-Hüllen, übergroße Display-Headlines, kleine Großbuchstaben-Metadaten in angrenzenden Spalten und architektonische Bildblöcke.
Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
Warum das fürs Design zählt
- Strikte Spaltenplatzierung lässt jede Elementposition bewusst wirken.
- Der Größenkontrast zwischen Display-Headlines und winzigen Metadaten trägt die Hierarchie.
- Negativraum bleibt erhalten statt gefüllt und hält die Seite editorial.
Was es abdeckt
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
So installierst du es
Agency Grid Layout Minimal
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/agency-grid-layout-minimal/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Setz zuerst eine breite max-width-Hülle mit sichtbaren Spaltenteilungen.
-
Verankere eine Hero-Headline über die meisten Spalten, Begleittext in einer Seitenspalte.
-
Bau Service-Zeilen als Mehrspalten-Listings mit winzigen Metadaten-Labels.
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.