Cuando un sistema no se puede ver ni probar en una interfaz, cuesta confiar en el producto. Construir un front-end con Codex App resuelve ese vacío: permite abrir el navegador, iterar estados visuales y validar casos de uso sin perder el hilo del proyecto. Esta guía te muestra cómo hacerlo si ya trabajas con agentes de IA y necesitas pasar de la terminal a una interfaz real.

¿Por qué elegir Codex frente a otros agentes de IA?

La diferencia no está solo en el modelo, está en el ecosistema completo. Una misma tarea puede moverse entre superficies sin fricción.

• ChatGPT como punto de entrada para conversaciones iniciales.
• Codex Web para tareas en background.
• Extensión integrada en Cursor o VS Code.
• Terminal para flujos de línea de comandos.
• Codex App para ver el proyecto visualmente y abrir threads en paralelo.

Esa portabilidad es lo que hace que el agente se adapte a tu forma de trabajar y no al revés.

¿Qué es Codex App? Es la aplicación de escritorio de Codex que te permite trabajar localmente, abrir varios threads a la vez, usar Git, instalar plugins y navegar con un navegador interno integrado [3:00].

¿Cómo instalar y configurar Codex App en tu computadora?

Descarga el instalador desde la URL que aparece en los recursos de la clase, elige la versión que se ajuste a tu sistema operativo e inicia sesión al abrir la aplicación.

Dentro de la interfaz vas a encontrar varios complementos listos para usar:

• Plugin para que Codex maneje tu computadora.
• Integración con Google Chrome.
• Conexiones con Notion, GitHub, correo y Google Drive.
• Skills instalables como generación de imágenes.
• Automatizaciones programadas que ejecutan prompts cada cierto tiempo.
• Acceso desde el celular para seguir trabajando fuera del escritorio.

Para abrir un proyecto existente, ve a Trabajar en un proyecto, selecciona Usar una carpeta existente y otorga acceso completo a los permisos de esa ruta. Codex te mostrará todas las sesiones anteriores, así puedes retomar exactamente donde lo dejaste, por ejemplo después de añadir persistencia con Supabase [5:30].

¿Cómo generar una referencia visual antes de codificar el front-end?

Antes de pedir código, conviene tener una imagen guía. En el chat principal escribe un prompt claro pidiendo la referencia visual del producto, en este caso un dashboard técnico para un AI Reader con ranking de señales, evidencia, fuentes, modo lector y modo operador.

Codex usa automáticamente el skill de imágenes para producir la referencia. Y aquí viene lo interesante: no necesitas esperar a que termine. Mientras la imagen carga, abre un nuevo chat en paralelo y avanza con otra tarea.

¿Cómo crear un skill de desarrollo front-end en Codex?

En ese segundo chat pídele a Codex que cree una skill específica para desarrollo de front-end. Las reglas que debe exigir son concretas:

• APIs reales, no datos simulados.
• Manejo explícito de estados.
• Diseño responsive.
• Accesibilidad incorporada.
• Consola limpia y capturas de pantalla como evidencia.

Codex usa el Skill Creator para construir la estructura que espera el sistema y devuelve un skill que se activa cada vez que quieras modificar el front-end [7:45].

¿Qué es un skill en Codex? Es un complemento con reglas e instrucciones que el agente carga automáticamente cuando detecta una tarea relacionada, por ejemplo modificar un front-end o generar imágenes.

¿Cómo iterar el diseño visual con prompts de ajuste?

La primera imagen casi nunca queda perfecta. En el ejemplo, el dashboard generado mostraba demasiada información en los paneles laterales. La instrucción fue directa: modificar la imagen, quitar el panel izquierdo y el derecho, y mantener únicamente el panel de búsqueda, filtros, fecha y fuente.

Esa iteración por prompt es el flujo natural de trabajo: pides, revisas, ajustas. Cada cambio se aplica sobre la imagen anterior, no sobre una nueva desde cero.

¿Cómo convertir una imagen de referencia en código real?

Una vez que la imagen refleja lo que quieres, vuelves al chat del skill y escribes algo como: "Usando esta imagen de referencia y el skill que acabaste de crear, genérame el código front-end para esta aplicación usando el stack tecnológico especificado en el Readme".

Codex hace tres cosas en cadena [10:20]:

1. Abre el navegador interno automáticamente.
2. Genera pantallazos del resultado.
3. Detecta problemas y los corrige solo, por ejemplo cuando una tabla queda demasiado ancha o la evidencia se corta en escritorio.

Después de varios minutos iterando, la página queda lista para abrirse desde la URL que entrega el agente.

¿Cómo modificar elementos visuales directamente en Codex App?

Aquí está una de las funciones más potentes. Codex permite anotar sobre la pantalla y pedir cambios sobre un elemento específico. Si un botón no te gusta, lo señalas y escribes: "No me gustó este botón, mejóralo para que esté mejor ubicado dentro de la página".

Codex recibe la anotación junto con el pantallazo y procede a iterar. El mismo flujo sirve para problemas de responsive, por ejemplo cuando un botón desaparece en pantallas pequeñas o cuando un panel ocupa demasiado espacio y conviene hacerlo colapsable.

Con ese ciclo (anotar, pedir, revisar) llegas a una aplicación con filtros funcionales, paneles colapsables y un diseño que responde tanto a formato móvil como a escritorio sin reescribir nada manualmente.

Ahora te toca a ti: sigue iterando este diseño y comparte en los comentarios cómo quedó tu versión final.