Frontend y UI
design-skills · Editorial
Maquetación de revista en serif Gelasio sobre una rejilla estricta de 8pt.
Qué es
Una skill de guía de sistema de diseño para un look editorial moderno: serif Gelasio tanto para cuerpo como para display, Ubuntu Mono, un casi negro #111111 sobre superficies blancas y una rejilla base de 8pt.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
Por qué importa para el diseño
- Display y cuerpo en serif de una sola familia mantiene tipográficamente coherentes los pasajes de lectura larga.
- Una rejilla base de 8pt impone ritmo vertical en titulares, cuerpo de texto y espaciado.
- El listón de accesibilidad incluye soporte de reduced-motion, áreas táctiles de 44px y manejo de alto contraste.
Qué cubre
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
Cómo instalarlo
design-skills · Editorial
-
Clona el repositorio.
git clone https://github.com/bergside/awesome-design-skills -
Señálale a Codex el archivo de la skill.
skills/editorial/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pídele a Codex que reformule la intención de diseño, y que defina los tokens antes de tocar componentes.
-
Pide reglas de componente que cubran anatomía, variantes, estados y comportamiento responsive.
-
Cierra con la lista de QA para que un revisor de código pueda verificar el resultado.
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.