Figma Generate Designpor OpenAI

Figma Generate Design Skill.

Crea una pantalla de Figma editable que siga conectada a su sistema de diseño.

Figma
Diseño de UI
Sistemas de diseño

Revisión de la fuente · Figma Generate DesignSKILL.md

Tarea Figma Produce • Una pantalla de Figma nueva o actualizada, compuesta por instancias de componentes • Colores, espaciados y radios vinculados a variables, con estilos reutilizables • Comprobaciones visuales por sección y de pantalla completa frente a la fuente Antes de empezar Figma MCP conectado, acceso al archivo de destino, un sistema de diseño publicado y el Skill complementario figma-use para las operaciones en el lienzo.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Ensambla pantallas de Figma a partir de recursos existentes del sistema de diseño

Crea pantallas de Figma a partir de componentes y variables existentes de la biblioteca, comprobando cada sección a medida que se ensambla.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Figma Generate Design funciona en la dirección del código al diseño: el entregable es una pantalla dentro de Figma, no código de aplicación. Descubre instancias de componentes, variables de biblioteca y estilos de texto o efectos existentes antes de ensamblar la página. La fuente prefiere reutilizar en lugar de dibujar cajas parecidas con valores fijos.

Su estrategia de ensamblaje es incremental. Primero se crea un marco contenedor, y luego cada sección se construye dentro de él y se inspecciona. Las propiedades de texto de los componentes y las variantes predeterminadas se comprueban con el código fuente, mientras que las capturas por sección detectan texto recortado y marcadores sin sustituir que pueden desaparecer en una vista reducida de la página completa. El resultado debe ser instancias editables del sistema de diseño, no solo una captura de la aplicación.

Entregables esperados

Una pantalla de Figma nueva o actualizada, compuesta por instancias de componentes
Colores, espaciados y radios vinculados a variables, con estilos reutilizables
Comprobaciones visuales por sección y de pantalla completa frente a la fuente

Ver el brief de ejemplo

Del brief a la revisión

01
Analiza la pantalla de origen
Lee sus secciones, componentes y valores predeterminados de props. Identifica el archivo de Figma de destino y las convenciones del sistema existente.
02
Descubre y reutiliza recursos
Inspecciona las pantallas existentes y busca componentes, variables y estilos en las bibliotecas vinculadas. Que no haya variables locales no demuestra que no existan tokens remotos.
03
Construye y valida las secciones
Crea primero el contenedor, ensambla una sección cada vez e inspecciona texto, variantes y diseño antes de continuar.

02 Cuándo usarlo

Cuándo usarlo

Figma MCP conectado, acceso al archivo de destino, un sistema de diseño publicado y el Skill complementario figma-use para las operaciones en el lienzo.

Buen encaje

Traspaso de código a FigmaÚtil cuando una pantalla de una aplicación en funcionamiento necesita una versión de diseño editable conectada a su biblioteca de componentes.
Actualización de pantallas existentesSirve para cambios puntuales de contenido o variantes sin reconstruir toda la página de Figma.

Límites que conviene revisar

Se necesita acceso al sistema de diseñoEl flujo documentado supone acceso a componentes publicados o a una biblioteca de equipo, y una conexión de Figma MCP disponible.
No es de Figma a códigoGenerar la implementación de una aplicación a partir de un diseño queda explícitamente fuera de la dirección principal de este Skill.

Aporta estos datos

Archivo de Figma de destinoIndica el archivo o la página donde se debe crear o actualizar la pantalla.
Origen de la pantallaProporciona el código de la aplicación o un brief concreto, sección por sección, con texto real.
Contexto de la bibliotecaIdentifica las pantallas existentes o las bibliotecas publicadas cuyos componentes y tokens deban reutilizarse.

03 Decisiones importantes

Decisiones importantes

Los tokens remotos se pueden descubrir
La fuente distingue entre variables locales y variables de bibliotecas vinculadas, lo que evita sistemas de tokens duplicados innecesarios.
Inspección por secciones
Revisar cada sección permite detectar variantes incorrectas y texto recortado con más facilidad que una sola miniatura de toda la página.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Mantén figma-use y sus referencias de API disponibles junto a este flujo de trabajo. Estos materiales Beta se rigen por los Términos para desarrolladores de Figma. Instalar el Skill por sí solo no conecta ni autoriza un archivo de Figma.

Archivo de la fuente original

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-design/SKILL.md

Figma MCP conectado, acceso al archivo de destino, un sistema de diseño publicado y el Skill complementario figma-use para las operaciones en el lienzo.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa figma-generate-design para recrear nuestra pantalla de ajustes de cuenta en el archivo de Figma indicado. Reutiliza sus componentes y variables publicados, inspecciona las props predeterminadas del código y conserva las etiquetas reales. Crea primero el contenedor y luego una sección cada vez. Muestra capturas de cada sección y corrige el texto recortado o el contenido de marcador antes de dar la pantalla por terminada.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Los controles son instancias de componentes vinculados, no sustitutos dibujados a mano.
El texto y las variantes coinciden con la pantalla proporcionada, incluidas las props predeterminadas.
Las capturas por sección no muestran etiquetas recortadas, solapamientos ni marcadores sin sustituir.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Esta ficha no significa que el skill incluya sus herramientas externas, credenciales ni dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: OpenAI
Repositorio: openai/skills
Archivo del skill: skills/.curated/figma-generate-design/SKILL.md
Licencia: Términos de Figma
Versión revisada: 2026-10-07 · 49f948faa925

Resumen editorial de la fuente

Crea pantallas de Figma a partir de componentes y variables existentes de la biblioteca, comprobando cada sección a medida que se ensambla.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no una medida de uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿El resultado es una captura de pantalla?

El flujo principal crea nodos e instancias editables de Figma. Una página web capturada puede servir de referencia, pero no es la estructura final prevista de la pantalla.

¿Qué pasa si no se encuentran variables locales?

La fuente indica que también hay que revisar las bibliotecas vinculadas. Las variables remotas publicadas no las devuelve la API de variables locales.

¿Puede actualizar solo una parte de una pantalla?

Sí. Puede localizar secciones existentes y cambiar su texto, variantes o diseño, conservando las áreas no afectadas.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén tu brief, el material de origen y tu trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño