Frontend y UI
gpt-taste
Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos.
Qué es
Una directiva de frontend que fuerza variación de maquetación mediante selección aleatoria simulada de hero, tipografía, componentes y paradigmas GSAP. También impone la estructura de página AIDA y un espaciado generoso entre secciones.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP Scro
Por qué importa para el diseño
- Los titulares del hero se quedan en dos o tres líneas porque los contenedores se ensanchan en vez de convertirse en un muro de texto.
- Las rejillas bento usan grid-flow-dense, así que ninguna celda queda vacía o rota.
- Prohíbe las etiquetas meta baratas y verifica el contraste del texto de los botones antes de entregar el resultado.
Qué cubre
- Python-driven true randomization
- AIDA structure and spacing
- Hero architecture and the 2-line iron rule
- The gapless bento grid
- Advanced GSAP motion and hover physics
- Content, assets and strict bans
Cómo instalarlo
gpt-taste
-
Clona el repositorio.
git clone https://github.com/Leonxlnx/taste-skill -
Señálale a Codex el archivo de la skill.
skills/gpt-tasteskill/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pide una página; la skill emite un bloque design_plan antes de cualquier código de UI.
-
Revisa sus elecciones aleatorias: maquetación del hero, pila tipográfica, componentes, paradigmas GSAP.
-
Comprueba los puntos de la lista previa: matemática de ancho del hero, densidad de la rejilla, barrido de etiquetas, contraste.
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
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. 
Frontend y UI Qué hace imagegen-frontend-web Genera una imagen de referencia horizontal por cada sección de la landing page. 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.