Frontend & UI
Container Lines
Zeichnet dezente vertikale Hilfslinien an den Kanten deines Content-Containers.
Worum es geht
Ein CSS-Pattern, das 1px vertikale Linien an beiden Kanten des Content-Containers setzt, plus optionale Mini-Eckquadrate. Die Hilfslinien liegen hinter dem Content und ignorieren Pointer Events.
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small
Warum das fürs Design zählt
- Zeigt die Containerbreite, damit lose Hero-Sections strukturelle Spannung gewinnen.
- Die Hilfslinien teilen max-width und Padding des Containers, damit sie nie verrutschen.
- Pointer Events sind deaktiviert, damit Linien nie Klicks oder Auswahl blockieren.
Was es abdeckt
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
So installierst du es
Container Lines
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/container-lines/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Füg die container-lines-Klasse zur Layout-Hülle hinzu.
-
Setz Eckquadrate nur an echte Container- oder Section-Ecken.
-
Prüfe, dass die Linien auf hellen und dunklen Hintergründen dezent bleiben.
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.