Frontend & UI
Container Lines
Trace de discrètes lignes de repère verticales aux bords de votre conteneur de contenu.
De quoi il s’agit
Un pattern CSS qui ajoute des lignes verticales de 1px aux deux bords du conteneur de contenu, plus de petits carrés d’angle en option. Les repères passent derrière le contenu et ignorent les événements de pointeur.
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
Pourquoi ça compte pour le design
- Révèle la largeur du conteneur : les sections hero lâches gagnent une tension structurelle.
- Les repères partagent la max-width et le padding du conteneur : ils ne dérivent jamais.
- Les événements de pointeur sont désactivés : les lignes ne bloquent jamais clics ni sélection.
Ce que ça couvre
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
Comment l’installer
Container Lines
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/container-lines/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Ajoutez la classe container-lines à la coque de mise en page.
-
Placez les carrés d’angle uniquement sur de vrais coins de conteneur ou de section.
-
Vérifiez que les lignes restent discrètes sur fond clair comme sombre.
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.