Need
Fuente del diseño
Default options
Why it's needed
Seleccionar un frame o componente concreto da una base sólida a la implementación.
Codex use case
Convierte diseños de Figma en código
Convierte selecciones de Figma en interfaces pulidas con contexto de diseño estructurado y comprobaciones visuales.
Difficulty Intermedio
Time horizon 1 h
Usa Codex para obtener de Figma el contexto de diseño, los recursos y las variantes, convertirlos en código que se ajuste al sistema de diseño del repositorio y luego usar Playwright para comparar la implementación con la referencia de Figma e iterar hasta que el resultado se vea bien.
Ideal para
- Implementar en una base de código existente pantallas o flujos ya diseñados en Figma
- Equipos que quieren que Codex trabaje a partir de un contexto de diseño estructurado
Contents
Convierte diseños de Figma en código
Convierte selecciones de Figma en interfaces pulidas con contexto de diseño estructurado y comprobaciones visuales.
Usa Codex para obtener de Figma el contexto de diseño, los recursos y las variantes, convertirlos en código que se ajuste al sistema de diseño del repositorio y luego usar Playwright para comparar la implementación con la referencia de Figma e iterar hasta que el resultado se vea bien.
Intermedio
1 h
Usa Codex para obtener de Figma el contexto de diseño, los recursos y las variantes, convertirlos en código que se ajuste al sistema de diseño del repositorio y luego usar Playwright para comparar la implementación con la referencia de Figma e iterar hasta que el resultado se vea bien.
Intermedio
1 h
Enlaces relacionados
Ideal para
- Implementar en una base de código existente pantallas o flujos ya diseñados en Figma
- Equipos que quieren que Codex trabaje a partir de un contexto de diseño estructurado
Habilidades y complementos
- Implementa diseños en código, crea asignaciones de Code Connect entre componentes publicados y archivos de código fuente, y genera reglas del sistema de diseño específicas del proyecto para convertir diseños de Figma en código de forma repetible.
- Comprueba el comportamiento responsivo y verifica la interfaz implementada en un navegador real.
| Skill | Why use it |
|---|---|
| Figma | Implementa diseños en código, crea asignaciones de Code Connect entre componentes publicados y archivos de código fuente, y genera reglas del sistema de diseño específicas del proyecto para convertir diseños de Figma en código de forma repetible. |
| Playwright | Comprueba el comportamiento responsivo y verifica la interfaz implementada en un navegador real. |
Prompt inicial
Implementa este diseño de Figma en el proyecto actual usando la habilidad de Figma.
Requisitos:
- Empieza por `get_design_context` para obtener el nodo o frame exacto.
- Si la respuesta está truncada, usa `get_metadata` para mapear el archivo y luego vuelve a obtener solo los nodos necesarios con `get_design_context`.
- Ejecuta `get_screenshot` para la variante exacta antes de comenzar a programar.
- Reutiliza los componentes y tokens del sistema de diseño existente.
- Adapta el resultado de Figma a las utilidades y los patrones de componentes de este repositorio, en lugar de inventar un sistema paralelo.
- Reproduce fielmente el espaciado, la disposición, la jerarquía y el comportamiento responsivo.
- Respeta los patrones de enrutamiento, estado y obtención de datos del repositorio.
- Haz que la página sea responsiva en computadoras de escritorio y dispositivos móviles.
- Si Figma devuelve rutas de localhost para imágenes o archivos SVG, úsalas directamente y no crees marcadores de posición ni agregues nuevos paquetes de íconos.
Validación:
- Compara la interfaz terminada con la referencia de Figma, tanto en apariencia como en comportamiento.
- Usa Playwright para comprobar que la interfaz coincida con la referencia e itera según sea necesario hasta lograrlo.
Implementa este diseño de Figma en el proyecto actual usando la habilidad de Figma.
Requisitos:
- Empieza por `get_design_context` para obtener el nodo o frame exacto.
- Si la respuesta está truncada, usa `get_metadata` para mapear el archivo y luego vuelve a obtener solo los nodos necesarios con `get_design_context`.
- Ejecuta `get_screenshot` para la variante exacta antes de comenzar a programar.
- Reutiliza los componentes y tokens del sistema de diseño existente.
- Adapta el resultado de Figma a las utilidades y los patrones de componentes de este repositorio, en lugar de inventar un sistema paralelo.
- Reproduce fielmente el espaciado, la disposición, la jerarquía y el comportamiento responsivo.
- Respeta los patrones de enrutamiento, estado y obtención de datos del repositorio.
- Haz que la página sea responsiva en computadoras de escritorio y dispositivos móviles.
- Si Figma devuelve rutas de localhost para imágenes o archivos SVG, úsalas directamente y no crees marcadores de posición ni agregues nuevos paquetes de íconos.
Validación:
- Compara la interfaz terminada con la referencia de Figma, tanto en apariencia como en comportamiento.
- Usa Playwright para comprobar que la interfaz coincida con la referencia e itera según sea necesario hasta lograrlo.
Introducción
Cuando tienes una selección exacta de Figma, Codex puede convertirla en una interfaz pulida sin ignorar los patrones ya establecidos en tu proyecto.
Con la habilidad de Figma, Codex puede usar el servidor MCP de Figma para obtener contexto de diseño estructurado, variables, 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 hacer ajustes iterativos en la disposición o el comportamiento hasta acercar el resultado al objetivo.
Configura tu proyecto de Figma
Cuanto más ordenado esté tu archivo de Figma, mejor será la primera implementación. Para facilitar el traspaso:
- Usa variables o tokens de diseño siempre que sea posible, en especial para colores, tipografía y espaciado
- Crea componentes para los elementos reutilizables de la interfaz en lugar de repetir capas sueltas
- Usa el diseño automático siempre que sea posible en lugar del posicionamiento manual
- Mantén los nombres de los frames y las capas lo suficientemente claros para que la pantalla principal, el estado y las variantes sean evidentes
- Conserva los íconos y las imágenes reales en el archivo cuando sea posible para que Codex no tenga que adivinar
Así, Codex tendrá una estructura más adecuada para convertirla en una interfaz sólida y lista para producción.
Sé específico
Cuanto más específico seas sobre los patrones de interacción esperados y el estilo que buscas, mejor será el resultado.
Si un estado, breakpoint o interacción es importante, indícalo expresamente. Si el archivo contiene varias variantes muy similares, dile a Codex cuál debe tomar como referencia definitiva.
Cuanto más claramente indiques qué debe coincidir exactamente y en qué casos deben prevalecer las convenciones del repositorio, más fácil le resultará a Codex decidir qué priorizar.
Prepara el sistema de diseño
Codex funciona mejor cuando el repositorio de destino ya cuenta con una capa de componentes bien definida. Codex puede usar automáticamente tus componentes y tu sistema de diseño existentes en lugar de recrearlos desde cero.
Si lo consideras necesario, indícale a Codex qué componentes base debe reutilizar, dónde están tus tokens y qué considera canónico el repositorio en cuanto a botones, campos de entrada, tarjetas, tipografía e íconos.
Trata el resultado del MCP de Figma, que suele tener el aspecto de código de React con Tailwind, como una referencia estructural y no como el estilo de código definitivo. Pídele a Codex que adapte ese resultado a la implementación real del proyecto: sus utilidades, wrappers de componentes, sistema de colores, escala tipográfica, tokens de espaciado, enrutamiento, gestión del estado y patrones de obtención de datos.
Flujo de trabajo
Comienza con una selección de Figma
Copia un enlace al frame, componente o variante exactos de Figma que quieres implementar. El flujo del MCP de Figma funciona mediante enlaces, por lo que el enlace debe apuntar al nodo exacto que quieres y no a un frame padre cercano.
Pídele a Codex que use Figma
Figma debe guiar la primera iteración. Pídele a Codex que siga el flujo del MCP de Figma antes de comenzar a implementar.
Incluye lo siguiente en tu prompt:
1. Primero, ejecuta `get_design_context` para el nodo o frame exacto.
2. Si la respuesta es demasiado grande o está truncada, ejecuta `get_metadata` para mapear el archivo y luego vuelve a ejecutar `get_design_context` únicamente para los nodos que necesitas.
3. Ejecuta `get_screenshot` para la variante exacta que vas a implementar.
4. Solo después de tener tanto el contexto de diseño como la variante exacta, descarga los recursos necesarios y comienza la implementación.
5. Adapta el resultado a las convenciones del repositorio: reutiliza los componentes existentes, sustituye las clases de utilidad sin adaptar por el sistema del proyecto cuando sea posible y mantén el espaciado, la jerarquía y el comportamiento responsivo alineados con el diseño.
6. Si Figma devuelve una ruta de localhost para una imagen o un archivo SVG, úsala directamente. No crees marcadores de posición ni agregues un paquete de íconos nuevo si el recurso ya viene incluido en la respuesta.
Una vez lista la primera implementación, Codex usará Playwright para verificar la interfaz en un navegador real y corregir cualquier diferencia visual o de interacción que aún quede.
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| Fuente del diseño | Figma | Seleccionar un frame o componente concreto da una base sólida a la implementación. |
Casos de uso relacionados
Crea diseños de front-end responsivos
Usa Codex para convertir capturas de pantalla y documentos de diseño en código que se ajuste...
Front-end Diseño
Pasa de una idea a una prueba de concepto
Usa Codex junto con ImageGen para convertir una idea preliminar en una dirección visual...
Front-end Ingeniería
Crea un sitio web estudiantil
Usa Sites para definir el alcance, crear y probar un sitio web sencillo a partir del...
Front-end Código