Introducción

Si tienes capturas de pantalla, una breve descripción del diseño o algunas referencias que te sirvan de inspiración, Codex puede usarlas para crear una interfaz que se adapte a distintos tamaños de pantalla y respete los patrones que ya usa tu proyecto.

Con la habilidad de Playwright, Codex puede abrir la aplicación en un navegador real, comparar la implementación con tus capturas en distintos tamaños de pantalla y ajustar la distribución de los elementos o su comportamiento hasta acercarse al resultado que buscas.

Empieza con referencias

Dale a Codex las referencias que mejor muestren la interfaz que quieres. Una sola captura puede bastar para una tarea puntual, pero Codex tendrá una idea más clara del diseño si incluyes varias vistas y estados. Por ejemplo, muestra el diseño para escritorio y para dispositivos móviles, cómo se ve un elemento al pasar el cursor sobre él o al seleccionarlo y, cuando sea relevante, qué aparece cuando no hay contenido o mientras se carga.

No necesitas materiales de diseño impecables. Basta con que las referencias muestren con suficiente claridad la jerarquía visual, el espaciado y el estilo que buscas para que Codex no tenga que adivinarlos.

Da instrucciones precisas

Cuanto mejor describas los patrones de interacción que esperas y el estilo que buscas, mejor será el resultado. El modelo suele recurrir a los patrones y estilos más comunes. Si tus referencias no dejan claro que buscas algo distinto, la interfaz podría verse genérica. Cuantas más referencias aportes o más precisas sean tus instrucciones, más probable será que consigas una interfaz que destaque.

Prepara el sistema de diseño

Codex funciona mejor cuando el repositorio en el que vas a trabajar ya tiene una capa de componentes bien definida. Puede reutilizar automáticamente los componentes y el sistema de diseño existentes sin tener que crearlos desde cero.

Si hace falta, por ejemplo, porque usas un conjunto de tecnologías poco habitual, indícale a Codex qué componentes básicos debe reutilizar, dónde están definidos los tokens y qué implementaciones toma el repositorio como referencia para botones, campos de entrada, tarjetas, tipografía e íconos.

Si partes de una base de código existente, es probable que Codex deduzca por su cuenta cómo usar tus componentes y tu sistema de diseño. Si empiezas desde cero, conviene darle instrucciones explícitas.

Pídele a Codex que tome las capturas como referencia visual y que implemente el diseño con las utilidades, los componentes envolventes, el sistema de colores, la escala tipográfica y los tokens de espaciado del proyecto. También debe seguir los patrones que usa el proyecto para el enrutamiento, la gestión del estado y la obtención de datos.

Usa Playwright

Playwright ayuda a Codex a refinar la interfaz. Con esta herramienta, Codex puede abrir la aplicación en un navegador real, comparar la implementación con las capturas que le diste y ajustar la distribución de los elementos o su comportamiento.

Puede cambiar el tamaño de la ventana del navegador para simular distintas pantallas y comprobar la distribución de los elementos en distintos puntos de quiebre.

Asegúrate de tener habilitada la habilidad interactiva de Playwright en Codex. Para obtener más información, consulta la documentación sobre habilidades.

Refina la implementación

La primera versión ya debería parecerse en líneas generales a las capturas. Si la distribución o las interacciones son complejas, o si la interfaz incluye muchas animaciones, es probable que necesites varias rondas de ajustes.

Pídele a Codex que, además de comprobar si la página compila, compare la implementación con las capturas. Si encuentra discrepancias, debe dar prioridad a los tokens del sistema de diseño del repositorio y ajustar el espaciado o las dimensiones solo lo indispensable para conservar el aspecto general del diseño.

Usa capturas adicionales o notas breves si ayudan a aclarar estados que no se distinguen bien en una sola imagen.

Prompt de seguimiento sugerido