Frontend y UI
Framed Grid Layout
Construye maquetaciones editoriales precisas con marcos finos y corchetes de esquina.
Qué es
Un patrón de rejilla de doce columnas donde cada sección se ajusta a columnas compartidas dentro de cajas con marco de 1px. Los corchetes de esquina en forma de L se dibujan como capas de fondo sobre una textura diagonal de baja opacidad.
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
Por qué importa para el diseño
- Cada sección comparte un color de borde, un tamaño de corchete y una escala de espaciado.
- Los corchetes de esquina no necesitan markup extra, así la estructura se queda en CSS.
- La maquetación sigue leyéndose con claridad si se elimina la capa de textura.
Qué cubre
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
Cómo instalarlo
Framed Grid Layout
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/framed-grid-layout/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pide una página técnica o editorial y obtén primero la rejilla padre.
-
Asigna clases de span explícitas en vez de anchos de sección improvisados.
-
Verifica que los bordes de los marcos se alinean vertical y horizontalmente en ambos breakpoints.
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.