Introducción

Si seleccionas en Figma exactamente lo que quieres implementar, Codex puede convertir esa selección en una interfaz cuidada que respete los patrones de tu proyecto.

Con la habilidad de Figma, Codex puede usar el servidor MCP de Figma para obtener el contexto estructurado del diseño, las variables, los recursos y la variante exacta que debe implementar.

Con la habilidad interactiva de Playwright, Codex puede abrir la aplicación en un navegador real, comparar la implementación con la referencia de Figma y ajustar la disposición de los elementos o su comportamiento hasta que el resultado se acerque más al diseño de referencia.

Prepara tu proyecto de Figma

Cuanto mejor organizado esté tu archivo de Figma, mejor será la primera implementación. Para facilitar el paso del diseño al desarrollo:

• Usa variables o tokens de diseño siempre que puedas, especialmente para los colores, la tipografía y el espaciado
• Crea componentes para los elementos reutilizables de la interfaz en lugar de duplicar capas desvinculadas
• Usa el diseño automático siempre que puedas en lugar de posicionar los elementos manualmente
• Asigna a los marcos y las capas nombres que permitan identificar con claridad la pantalla principal, el estado y las variantes
• Siempre que puedas, incluye en el archivo los íconos y las imágenes que se usarán para que Codex no tenga que adivinar cuáles son

Así, Codex cuenta con una estructura más clara para crear una interfaz robusta y lista para producción.

Da instrucciones precisas

Cuanto mejor describas los patrones de interacción que esperas y el estilo que buscas, mejor será el resultado.

Si algún estado, punto de quiebre o interacción es importante, menciónalo. Si el archivo contiene varias variantes similares, indica a Codex cuál debe tomar como referencia definitiva.

Si especificas qué debe coincidir exactamente con el diseño y cuándo deben prevalecer las convenciones del repositorio, a Codex le resultará más fácil decidir qué priorizar.

Prepara el sistema de diseño

Codex funciona mejor cuando el repositorio de destino ya tiene una capa de componentes bien definida. Puede usar automáticamente los componentes y el sistema de diseño existentes sin tener que recrearlos desde cero.

Si lo consideras necesario, indica a Codex qué componentes primitivos debe reutilizar, dónde se definen los tokens y qué implementaciones sirven de referencia en el repositorio para los botones, los campos de entrada, las tarjetas, la tipografía y los íconos.

Usa la salida del servidor MCP de Figma, que suele parecerse a código de React con Tailwind, como referencia para la estructura. El estilo del código final debe seguir el del proyecto. Pide a Codex que adapte esa salida a las utilidades, los componentes contenedores, el sistema de colores, la escala tipográfica, los tokens de espaciado, el enrutamiento, la gestión del estado y los patrones de obtención de datos que usa el proyecto.

Flujo de trabajo

Empieza con una selección de Figma

Copia el enlace al marco, componente o variante de Figma que quieres implementar. El flujo de trabajo con el servidor MCP de Figma se basa en enlaces, así que asegúrate de que el enlace apunte al nodo exacto que necesitas y no a un marco superior cercano.

Pide a Codex que use Figma

El diseño de Figma debe guiar la primera implementación. Pide a Codex que siga el flujo de trabajo con el servidor MCP de Figma antes de empezar a escribir el código.

Incluye estas instrucciones en tu prompt:

Una vez lista la primera implementación, Codex usará Playwright para verificar la interfaz en un navegador real y corregir las diferencias visuales o de interacción que aún queden respecto del diseño.