Guía de lectura localizada

figma-generate-designFinalidad, uso y origen

Utilice esta habilidad junto con figma-use cuando la tarea implique traducir una página de aplicación, una vista o un diseño de varias secciones a Figma. Activadores: 'escribir en Figma', 'crear en Figma desde código', 'enviar página a Figma', 'tomar estoapp/pagey crearlo en Figma', 'crear una pantalla', 'crear una página de inicio en Figma', 'actualizar la pantalla de Figma para que coincida con el código'. Esta es la habilidad de flujo de trabajo preferida cuando el usuario quiere crear o actualizar una página, pantalla o vista completa en Figma a partir de código o una descripción. Descubre componentes, variables y estilos del sistema de diseño mediante search_design_system, los importa y ensambla pantallas incrementalmente sección por sección utilizando tokens del sistema de diseño en lugar de valores codificados.

Fuente recuperada: 2026-10-29

Repositorio de origen: openai/skills
SKILL.md: skills/.curated/figma-generate-design/SKILL.md
Estrellas del repositorio: 28,420
Actualización del repositorio: 2026-10-29
Clasificación de habilidades: Diseño
Última recopilación: 2026-10-31 10:38 UTC+08:00

Licencia: No especificado

SKILL.md original

Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.

Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.

Lo que hace esta habilidad

Cómo funciona el flujo de trabajo ascendente

Flujo de trabajo paralelo con generate_figma_design (solo para aplicaciones web)

Al crear una pantalla desde una aplicación web que se puede renderizar en un navegador, los mejores resultados se obtienen ejecutando ambos enfoques en paralelo: Comience a crear la pantalla utilizando el flujo de trabajo de esta habilidad (use_figma + componentes del sistema de diseño) Ejecutargenerate_figma_designpara capturar una captura de pantalla perfecta de píxeles de la aplicación web en ejecución Una vez que ambos se completen: Actualice la salida de use_figma para que coincida con el diseño perfecto de píxeles de lagenerate_figma_designcaptura. La captura proporciona el espaciado, el tamaño y el tratamiento visual exactos que se deben buscar, mientras que la salida de use_figma tiene instancias de componentes adecuadas vinculadas al sistema de diseño.

Paso río arriba · L30 ↗

Flujo de trabajo requerido

Sigue estos pasos en orden. No te saltes ningún paso.

Paso río arriba · L44 ↗

Paso1: Entienda la pantalla

Antes de empezar a usar Figma, asegúrate de entender qué estás creando: si vas a crear desde el código, lee los archivos fuente correspondientes para comprender la estructura de la página, las secciones y los componentes que se utilizan. Identifica las secciones principales de la pantalla (por ejemplo, encabezado, sección principal, paneles de contenido, tabla de precios, acordeón de preguntas frecuentes, pie de página). Para cada sección, enumera los componentes de la interfaz de usuario que contiene (botones, campos de entrada, tarjetas, menús desplegables, acordeones, etc.).

Paso río arriba · L48 ↗

Paso río arriba · js ↗

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Requisitos y configuración

Requisitos previos

El servidor Figma MCP debe estar conectado. El archivo Figma de destino debe tener un sistema de diseño publicado con componentes (o acceso a una biblioteca de equipo).

Paso río arriba · L21 ↗

Límites y controles de calidad

No se seleccionó ningún pasaje con límites específicos en este archivo. Esto no significa que la habilidad sea segura para cualquier entrada o entorno. Revise el código fuente completo y valide su propio resultado.

Comience con una prueba segura.

Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.

Especificación del formato y directorio de habilidades ↗

Lea más en la fuente

Traducción y alcance

Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.

Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.

Fuente fijada: Lee el original ↗
Fuente recuperada: 2026-10-29T09:32:23Z
Confirmación de origen: 49f948faa9258a0c61caceaf225e179651397431
Fuente SHA-256: 45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9

Volver al catálogo completo de habilidades