Frontend y UI
Container Lines
Dibuja líneas guía verticales discretas en los bordes del contenedor de contenido.
Qué es
Un patrón CSS que añade líneas verticales de 1px en ambos bordes del contenedor de contenido, más mini cuadrados de esquina opcionales. Las guías se sitúan detrás del contenido e ignoran los eventos de puntero.
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
Por qué importa para el diseño
- Revela el ancho del contenedor, así las secciones hero sueltas ganan tensión estructural.
- Las guías comparten el max-width y el padding del contenedor, así nunca se desalinean.
- Los eventos de puntero están desactivados, así las líneas nunca bloquean clics ni selección.
Qué cubre
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
Cómo instalarlo
Container Lines
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/container-lines/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Añade la clase container-lines a la carcasa de la maquetación.
-
Coloca cuadrados de esquina solo en esquinas reales de contenedor o de sección.
-
Comprueba que las líneas se mantienen sutiles sobre fondos claros y oscuros.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.