Ir a la guía de uso
Figma Generate Librarypor OpenAI

Figma Generate Library Skill.

Empieza por el modelo de tokens y después construye componentes reutilizables en una secuencia controlada.

  • Figma
  • Sistemas de diseño
  • Bibliotecas de componentes
Revisión de la fuente · Figma Generate LibrarySKILL.md
Tarea Figma Produce • Colecciones de variables de Figma, alias semánticos y estilos de texto o de efectos • Componentes reutilizables documentados con conjuntos de variantes controlados • Un registro de estado y una revisión final de enlaces, nombres y aspecto visual Antes de empezar Figma MCP con acceso a archivos editables, acceso al repositorio y la Skill complementaria figma-use junto con sus referencias auxiliares.
Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Crea una biblioteca de Figma a partir de las bases del código

Crea variables y estilos de Figma antes que los componentes, con un registro de estado guardado y aprobación en cada fase.

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

El enfoque de trabajo

Figma Generate Library es un flujo de trabajo de sistema de diseño de varias fases, no un generador de pantallas de una sola vez. Compara el código, el archivo de Figma existente y las bibliotecas suscritas, y luego fija un alcance definido de tokens y componentes antes de escribir. Las variables y los estilos van antes que los componentes, de modo que las propiedades visuales puedan enlazarse a una base coherente.

La fuente presta especial atención al estado de larga duración: los ID creados, los nombres deterministas y un registro guardado permiten reanudar el trabajo sin duplicar nodos. El trabajo con componentes incluye la disposición de variantes, propiedades de texto y booleanas, intercambio de iconos y documentación. Los puntos de control humanos forman parte del flujo, sobre todo cuando el código y Figma no coinciden; la Skill no decide en silencio qué sistema debe prevalecer.

Entregables esperados

  • Colecciones de variables de Figma, alias semánticos y estilos de texto o de efectos
  • Componentes reutilizables documentados con conjuntos de variantes controlados
  • Un registro de estado y una revisión final de enlaces, nombres y aspecto visual
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Descubrir y fijar el alcance

    Inventaría los recursos del código y de Figma, busca en las bibliotecas y acuerda el conjunto inicial exacto de tokens y componentes antes de crear nada.

  2. 02
    Crear las bases

    Crea variables primitivas y semánticas, modos, ámbitos y sintaxis de código, seguidos de la tipografía y los efectos. Obtén la aprobación de las bases, luego crea la estructura de páginas y la documentación de las bases, y obtén una aprobación aparte antes de empezar con los componentes.

  3. 03
    Construir componentes de forma incremental

    Crea un componente a la vez con enlaces de variables, propiedades y documentación. Valida la estructura y el aspecto, muestra su captura de pantalla y obtén aprobación antes de empezar el siguiente componente.

  4. 04
    Reconciliar y auditar

    Revisa los nombres, los enlaces sin resolver y las asignaciones opcionales de Code Connect, usando los ID registrados en lugar de adivinar o hacer limpiezas generales.

02 Cuándo usarlo

Cuándo usarla

Figma MCP con acceso a archivos editables, acceso al repositorio y la Skill complementaria figma-use junto con sus referencias auxiliares.

Buen encaje

  • Alineación entre código y bibliotecaÚtil cuando los tokens y componentes implementados necesitan una contraparte mantenible en Figma.
  • Reparación controlada de la bibliotecaEncaja en un análisis de brechas donde algunos recursos pueden reutilizarse, otros envolverse y unos pocos reconstruirse.

Límites que conviene revisar

  • No es un generador de una sola llamadaLa fuente exige explícitamente un trabajo por etapas y puntos de aprobación. Una biblioteca de componentes grande no debe presentarse como creada de forma segura en una sola operación.
  • Los conflictos requieren decisiones de responsabilidadCuando el código y Figma difieren, un responsable de producto o de diseño debe decidir qué valor o contrato de componente prevalece.

Aporta estos insumos

  • Inventarios de código y de FigmaProporciona el repositorio y el archivo de destino editable, incluidas las convenciones de tokens existentes.
  • Alcance inicialNombra las colecciones de tokens, los modos y las familias de componentes necesarias para la primera versión utilizable.
  • Responsables de la revisiónIdentifica quién puede aprobar las bases, los componentes y los conflictos entre sistemas existentes.

03 Decisiones importantes

Decisiones importantes

  1. Alias semánticos

    La fuente separa los primitivos sin procesar de los tokens semánticos con reconocimiento de modo, en lugar de duplicar valores sin procesar en todos los componentes.

  2. Creación reanudable

    Un registro de nodos guardado y una nomenclatura determinista facilitan reanudar el trabajo interrumpido de la biblioteca sin crear duplicados.

04 Ejemplo de brief

Prueba un brief concreto

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

Revisa la configuración

Usa la carpeta curada completa, incluidos los scripts auxiliares y las referencias de fase. Estos materiales Beta se rigen por los Términos de desarrollador de Figma. Trata las escrituras en Figma y la publicación de bibliotecas como operaciones que se autorizan por separado.

Archivo fuente original
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

Figma MCP con acceso a archivos editables, acceso al repositorio y la Skill complementaria figma-use junto con sus referencias auxiliares.

Empieza con un solo entregable

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

Brief de ejemplo
Usa figma-generate-library para planificar una biblioteca pequeña que coincida con nuestro código: tokens de color con modos claro y oscuro, espaciado, tipografía, Button e Input. Empieza con un descubrimiento de solo lectura y muestra los conflictos entre el código y Figma. Espera la aprobación del alcance antes de escribir, construye primero las bases y conserva un registro de estado para que cada componente pueda revisarse y reanudarse de forma independiente.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Las variables semánticas son alias de los primitivos y llevan los modos y ámbitos previstos.
  • Las variantes de los componentes y los intercambios de iconos se ajustan al contrato acordado, sin combinaciones innecesarias.
  • Los ID registrados, las capturas de pantalla y las comprobaciones de enlaces respaldan cada fase completada.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que sus herramientas externas, credenciales y dependencias de software estén incluidas.

05 Fuente y licencia

Fuente y licencia

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

Propietario de la fuente
OpenAI
Repositorio
openai/skills
Versión revisada
2026-10-07 · 49f948faa925
Resumen editorial de la fuente
Crea variables y estilos de Figma antes que los componentes, con un registro de estado guardado y aprobación en cada fase.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿En qué se diferencia de generar una pantalla?

Construye las bases y los componentes reutilizables que usan las pantallas, incluidas las colecciones de tokens, las variantes y la documentación.

¿Pueden las escrituras en el lienzo ejecutarse en paralelo?

La fuente exige explícitamente que las mutaciones de Figma sean secuenciales para que el estado y los ID de nodo devueltos sigan siendo fiables.

¿Reemplaza automáticamente una biblioteca existente?

No. El descubrimiento y la aprobación del alcance preceden a la creación, y la estrategia de reutilización da prioridad a los recursos locales existentes antes que a las importaciones o los componentes nuevos.

OpenDesign

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

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

Archivo fuente original
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md