Frontend e UI
Container Lines
Traccia discrete linee guida verticali ai bordi del contenitore dei contenuti.
Che cos’è
Un pattern CSS che aggiunge linee verticali da 1px a entrambi i bordi del contenitore dei contenuti, più mini quadrati angolari opzionali. Le guide stanno dietro al contenuto e ignorano gli eventi puntatore.
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
Perché conta per il design
- Rivela la larghezza del contenitore, così le sezioni hero sciolte guadagnano tensione strutturale.
- Le guide condividono max-width e padding del contenitore, così non vanno mai fuori posto.
- Gli eventi puntatore sono disabilitati, così le linee non bloccano mai click o selezione.
Cosa copre
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
Come installarlo
Container Lines
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/container-lines/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Aggiungi la classe container-lines al guscio di layout.
-
Metti i quadrati angolari solo sugli angoli reali di contenitore o sezione.
-
Controlla che le linee restino discrete sia su sfondi chiari che scuri.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.