Frontend y UI
image-to-code
Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente.
Qué es
Un flujo de trabajo que prioriza la imagen para tareas web visuales. El agente genera imágenes de referencia por sección, extrae de ellas tipografía, espaciado, color y componentes, y luego implementa el sitio para que coincida.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C
Por qué importa para el diseño
- El código sigue una referencia visual real, así la implementación no deriva hacia maquetaciones genéricas.
- Cada sección recibe su propia imagen grande, así el texto y el espaciado se pueden analizar.
- Los heroes se mantienen en menos de tres líneas de titular y sin pilas de contenedores anidados.
Qué cubre
- Mandatory image-first rule
- Generate enough images rule
- Deep image analysis requirement
- Hero minimalism rules
- Anti-drift implementation rule
- Anti-AI-slop rules
Cómo instalarlo
image-to-code
-
Clona el repositorio.
git clone https://github.com/Leonxlnx/taste-skill -
Señálale a Codex el archivo de la skill.
skills/image-to-code-skill/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Indica el número de secciones; en Codex, la skill genera una imagen por sección.
-
Pide un render de detalle más cercano cuando el detalle de botones o tipografía quede ilegible.
-
Haz que ejecute la comprobación de claridad antes de escribir cualquier archivo de implementación.
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 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.