Guía de lectura localizada
figma-implement-designFinalidad, uso y origen
Traduce los diseños de Figma a código de aplicación listo para producción con1:1fidelidad visual. Úselo al implementar código de interfaz de usuario desde archivos de Figma, cuando el usuario menciona "implementar diseño", "generar código", "implementar componente", proporciona URL de Figma o solicita crear componentes que coincidan con las especificaciones de Figma. Para Figma canvas escribe a través deuse_figma, usarfigma-use.
Fuente recuperada:
- Repositorio de origen
- openai/skills
- SKILL.md
skills/.curated/figma-implement-design/SKILL.md- Estrellas del repositorio
- 28,420
- Actualización del repositorio
- 2026-10-29
- Clasificación de habilidades
- Diseño
- Última recopilación
Licencia: Documentos de licencia pendientes de verificación
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
Traduce los diseños de Figma a código de aplicación listo para producción con1:1fidelidad visual. Úselo al implementar código de interfaz de usuario desde archivos de Figma, cuando el usuario menciona "implementar diseño", "generar código", "implementar componente", proporciona URL de Figma o solicita crear componentes que coincidan con las especificaciones de Figma. Para Figma canvas escribe a través deuse_figma, usarfigma-use.
Cómo funciona el flujo de trabajo ascendente
Flujo de trabajo requerido
Sigue estos pasos en orden. No te saltes ningún paso.
Paso río arriba · L29 ↗Descripción general
Esta habilidad proporciona un flujo de trabajo estructurado para traducir diseños de Figma en código listo para producción con una precisión de píxel perfecta. Garantiza una integración consistente con el servidor Figma MCP, el uso adecuado de los tokens de diseño y1:1Paridad visual con los diseños.
Paso río arriba · L8 ↗Paso2: Obtener contexto de diseño
Correrget_design_contextcon la clave de archivo extraída y el ID del nodo. Esto proporciona los datos estructurados que incluyen: Propiedades de diseño (Auto Layout, restricciones, tamaño) Valores de color y tokens de diseño
get_design_context(fileKey=":fileKey", nodeId="1-2")Requisitos y configuración
Requisitos previos
El servidor Figma MCP debe estar conectado y accesible. El usuario debe proporcionar una URL de Figma en el formato:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Límites y controles de calidad
Calidad del código
Evite los valores codificados directamente en el código; extráigalos a constantes o tokens de diseño. Mantenga los componentes componibles y reutilizables.
Paso río arriba · L156 ↗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.
Lea más en la fuente
- Descripción general
- Límites de habilidad
- Requisitos previos
- Flujo de trabajo requerido
- Opción A: Analizar desde la URL de Figma
- Opción B: Usar la selección actual de la aplicación de escritorio de Figma (solo en el panel de control de Figma Desktop).
- Paso2: Obtener contexto de diseño
- Paso3: Capturar referencia visual
- Paso4: Descargar los recursos necesarios
- Paso5: Traducir a las convenciones del proyecto
- Paso6: Lograr1:1Paridad visual
- Paso7: Validar con Figma
- Organización de componentes
- Integración del sistema de diseño
- Calidad del código
- Ejemplo1Implementación de un componente de botón
- Ejemplo2Creación de un diseño de panel de control
- Siempre empieza con el contexto.
- Validación incremental
- Desviaciones de documentos
- Reutilizar en lugar de recrear.
- Diseño del sistema primero
- Problema: La salida de Figma aparece truncada.
- Problema: El diseño no coincide después de la implementación.
- Problema: Los recursos no se cargan
- Problema: Los valores de los tokens de diseño difieren de los de Figma.
- Comprensión de la implementación del diseño
- Recursos adicionales
Habilidades relacionadas
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
- Confirmación de origen
49f948faa9258a0c61caceaf225e179651397431- Fuente SHA-256
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad