Frontend & UI
Framed Grid Layout
Construit des mises en page éditoriales précises avec des cadres fins et des équerres d’angle.
De quoi il s’agit
Un pattern de grille à douze colonnes où chaque section s’aligne sur des colonnes partagées dans des boîtes encadrées en 1px. Des équerres d’angle en L sont dessinées en couches de fond sur une texture diagonale en faible 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
Pourquoi ça compte pour le design
- Chaque section partage une couleur de bordure, une taille d’équerre, une échelle d’espacement.
- Les équerres d’angle ne demandent aucun markup supplémentaire : la structure reste en CSS.
- La mise en page reste claire même si l’on retire la couche de texture.
Ce que ça couvre
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
Comment l’installer
Framed Grid Layout
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/framed-grid-layout/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez une page technique ou éditoriale et obtenez d’abord la grille parente.
-
Attribuez des classes de span explicites plutôt que des largeurs de section improvisées.
-
Vérifiez que les bords des cadres s’alignent verticalement et horizontalement aux deux breakpoints.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.