Frontend y UI
design-skills · Bento
Rejilla de bloques variados sobre crema, tipografía Inter, escala compacta.
Qué es
Una skill de guía para maquetaciones de caja bento que presentan el contenido como bloques de rejilla de tamaños variados. Inter en todo, una escala tipográfica compacta de 12 a 32, acentos melocotón y azul sobre crema.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Por qué importa para el diseño
- Los tamaños de bloque variados llevan la jerarquía, así la propia rejilla hace la clasificación.
- Una escala tipográfica compacta de 12 a 32 encaja texto denso dentro de mosaicos pequeños.
- La superficie crema #FFF5E6 mantiene legibles los bordes de los bloques sin necesidad de bordes gruesos.
Qué cubre
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
Cómo instalarlo
design-skills · Bento
-
Clona el repositorio.
git clone https://github.com/bergside/awesome-design-skills -
Señálale a Codex el archivo de la skill.
skills/bento/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pídele a Codex que asigne a cada bloque un tamaño según la prioridad del contenido.
-
Define los tokens de espaciado en la escala de 4 a 32 antes de disponer los mosaicos.
-
Pide el manejo de overflow y de etiquetas largas, que esta skill enumera como casos límite.
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.