Frontend e UI
Framed Grid Layout
Costruisce layout editoriali precisi con cornici sottili e parentesi angolari.
Che cos’è
Un pattern di griglia a dodici colonne in cui ogni sezione si aggancia a colonne condivise dentro box con cornice da 1px. Le parentesi angolari a L sono disegnate come livelli di sfondo su una texture diagonale a bassa opacità.
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
Perché conta per il design
- Ogni sezione condivide un colore di bordo, una dimensione di parentesi, una scala di spaziatura.
- Le parentesi angolari non richiedono markup in più, così la struttura resta nel CSS.
- Il layout resta chiaro anche se si rimuove il livello di texture.
Cosa copre
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
Come installarlo
Framed Grid Layout
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/framed-grid-layout/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi una pagina tecnica o editoriale e ottieni prima la griglia madre.
-
Assegna classi di span esplicite invece di larghezze di sezione improvvisate.
-
Verifica che i bordi delle cornici si allineino in verticale e in orizzontale a entrambi i breakpoint.
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.