⁠Construcción de Front-end con Codex App

Contenido del curso

Fundamentos y Configuración de Codex

Optimización de Contexto

Persistencia e Integración de Datos

Desarrollo y Despliegue en Codex

Plugins y Control Remoto

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:55

⁠Construcción de Front-end con Codex App

Curso de Codex

Clase 10 de 14

Clase 10 / 14

Recursos

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]:

Abre el navegador interno automáticamente.
Genera pantallazos del resultado.
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.

Daniel Alfredo García Serna

Hace 17 días

📚 CLASE: FRONT-END REAL CON CODEX APP Y SU NAVEGADOR

━━━━━━━━━━━━━━━━━━

🎯 IDEA PRINCIPAL

Codex puede trabajar sobre un front-end real usando su navegador para interactuar con la aplicación como lo haría un usuario.

La idea clave es cerrar el ciclo: código → navegador → comportamiento real → detección → corrección → verificación.

━━━━━━━━━━━━━━━━━━

⚡ RESUMEN ULTRA RÁPIDO

🔵 Codex App permite trabajar sobre un proyecto y utilizar herramientas de navegación.
🔵 El navegador permite comprobar el comportamiento de la aplicación más allá del código.
🟡 Esto permite detectar problemas visuales y funcionales que los tests tradicionales pueden no cubrir.
🟡 El agente puede interactuar con formularios, botones, navegación y otros elementos de la interfaz.
🔴 Que el código compile no significa que la experiencia real funcione correctamente.

━━━━━━━━━━━━━━━━━━

🔑 LO IMPORTANTE

🔵 Prueba funcional: verifica que una acción produzca el comportamiento esperado.
🔵 Prueba visual: comprueba que la interfaz se presente correctamente al usuario.
🟡 El navegador proporciona al agente una perspectiva diferente a la inspección estática del código.
🟡 Un flujo completo puede comprobar tanto la implementación como el resultado visible.
🔴 No confíes exclusivamente en screenshots para validar una aplicación.
🔴 Una interfaz puede verse correcta y aun así tener errores de navegación o lógica.
🟢 Define escenarios concretos: iniciar sesión → navegar → completar formulario → guardar → verificar resultado.
🟢 Haz que Codex compruebe el resultado después de cada modificación relevante.
🟣 Combinar tests automatizados con interacción real del navegador proporciona mayor cobertura.

━━━━━━━━━━━━━━━━━━

🧩 MODELO MENTAL

Código → Ejecutar → Navegar → Interactuar → Observar → Corregir → Verificar

🟢 Primero implementa la funcionalidad.
🟢 Después ejecuta la aplicación en un entorno controlado.
🟢 Reproduce el flujo que realizaría un usuario real.
🟢 Observa errores funcionales y visuales.
🟢 Corrige y repite hasta cumplir los criterios definidos.

━━━━━━━━━━━━━━━━━━

🚀 ACCIONES PARA HOY

🟢 Elige una pantalla real de uno de tus proyectos.
🟢 Define un flujo completo que un usuario pueda realizar en ella.
🟢 Pídele a Codex que ejecute la aplicación y reproduzca ese flujo.
🟢 Haz que compruebe navegación, formularios, mensajes y estados de la interfaz.
🟢 Pídele que identifique problemas antes de realizar modificaciones.
🟢 Permite una corrección y vuelve a ejecutar exactamente el mismo escenario.
🟢 Documenta los escenarios que deberían repetirse después de cada cambio importante.

━━━━━━━━━━━━━━━━━━

🟣 VENTAJA PROFESIONAL

🟣 El navegador convierte a Codex en algo más cercano a un QA agent además de asistente de desarrollo.
🟣 Puedes delegar ciclos completos de implementar → probar → detectar → corregir → volver a probar.
🟣 Combina pruebas unitarias, integración y navegador: cada una detecta categorías diferentes de problemas.
🟣 Hack: escribe escenarios como criterios de aceptación antes de pedirle al agente que implemente.
🟣 Hack: después de una modificación de front-end, haz que el agente pruebe primero el flujo afectado antes de explorar otros problemas.

━━━━━━━━━━━━━━━━━━

📝 CIERRE

Un principiante valida preguntando: “¿El código quedó bien?”.

Un profesional valida preguntando: “¿La aplicación funciona correctamente cuando alguien realmente la utiliza?”.

El navegador añade una capa fundamental: validar el resultado desde la perspectiva del usuario.

Comentarios (20)20 comentarios

Carlos Orozco

Hace 4 meses

Kendy Valladolid

Heliot Querales

Carlos Alberto De Avila Suro

Hace 21 días

Alejandra Oliva Rangel

Hace 3 meses

Orlando Reyes

Hace 2 meses

Alvaro Hernandez

Ivan Acosta

Paulo Sergio Martinez Ricardez

MARLON CHUQUINO CAPA

Hace un mes

Luis Enrique Medina Laguna

Johann Enrique Hurtado Salas

David Horacio Duarte Angulo

JESUS DANIEL MALMA MONTAÑO

Ulqernesh Karvenae

Carlos Andrés Obando Villarreal

Kenneth Angulo L

Anthony Fernández

Jose Luis Ayala Pinto

Cesar Coronel

Fundamentos y Configuración de Codex

Qué puede hacer un agente de IA en tu repositorio

Cómo configurar agents.md en Codex CLI

⁠ ⁠Estructuración de datos

Creación de Skills y lógica reutilizable

Optimización de Contexto

Eficiencia en ejecución y gestión de Tokens

Arquitectura de Subagentes y razonamiento avanzado

Persistencia e Integración de Datos

Comandos fast y goal en Codex

Conecta Codex con Notion sin tocar código

Persistencia de datos relacionales con Supabase

Desarrollo y Despliegue en Codex

⁠Construcción de Front-end con Codex App

Automatización de Pruebas y Reportes en GitHub

Despliega AI Radar en Vercel con Codex

Plugins y Control Remoto

Cómo controlar Codex desde tu celular

Demo visual con Hyperframes en Codex

⁠Construcción de Front-end con Codex App

Progreso del curso

Fundamentos y Configuración de Codex

Optimización de Contexto

Persistencia e Integración de Datos

Desarrollo y Despliegue en Codex

Plugins y Control Remoto

Recursos

Recursos