·figma-design-extraction
*

figma-design-extraction

Extraiga tokens de diseño, estructura de pantalla y referencias visuales de archivos Figma. Úselo siempre que aparezca una URL de figma.com en la conversación, cuando alguien mencione tokens, variables, extracción del sistema de diseño o capturas de pantalla de Figma. Úselo también al llamar a get_variable_defs, get_design_context, get_metadata o get_screenshot; esta habilidad define cómo usarlos de manera efectiva. Activador de frases como "obtener de Figma", "extraer diseño", "variables de Figma", "tokens de diseño de Figma", "capturar pantallas" o cualquier enlace figma.com/design. Incluso si el usuario simplemente pega un enlace de Figma sin instrucciones, use esta habilidad para analizarlo y decidir qué extraer.

10Instalaciones·2Tendencia·@petbrains

Instalación

$npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction

Cómo instalar figma-design-extraction

Instala rápidamente el skill de IA figma-design-extraction en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction
  3. Verificar instalación: Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

Fuente: petbrains/mvp-builder.

SKILL.md

Ver original

Extract design tokens, screen structure, and visual references from Figma files.

Process: CHECK → PARSE → DISCOVER → EXTRACT → ORGANIZE

The goal is to pull structured, source-tracked design data from Figma for use in design-setup pipelines, conflict resolution, and downstream code generation. Every extracted value carries its source tag — this matters because downstream consumers (like design-setup Phase 3) need to know whether a token came from an explicit Figma Variable definition or was inferred from applied styles, since that affects conflict...

Extraiga tokens de diseño, estructura de pantalla y referencias visuales de archivos Figma. Úselo siempre que aparezca una URL de figma.com en la conversación, cuando alguien mencione tokens, variables, extracción del sistema de diseño o capturas de pantalla de Figma. Úselo también al llamar a get_variable_defs, get_design_context, get_metadata o get_screenshot; esta habilidad define cómo usarlos de manera efectiva. Activador de frases como "obtener de Figma", "extraer diseño", "variables de Figma", "tokens de diseño de Figma", "capturar pantallas" o cualquier enlace figma.com/design. Incluso si el usuario simplemente pega un enlace de Figma sin instrucciones, use esta habilidad para analizarlo y decidir qué extraer. Fuente: petbrains/mvp-builder.

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction
Categoría
*Creatividad
Verificado
Primera vez visto
2026-03-10
Actualizado
2026-03-10

Browse more skills from petbrains/mvp-builder

Respuestas rápidas

¿Qué es figma-design-extraction?

Extraiga tokens de diseño, estructura de pantalla y referencias visuales de archivos Figma. Úselo siempre que aparezca una URL de figma.com en la conversación, cuando alguien mencione tokens, variables, extracción del sistema de diseño o capturas de pantalla de Figma. Úselo también al llamar a get_variable_defs, get_design_context, get_metadata o get_screenshot; esta habilidad define cómo usarlos de manera efectiva. Activador de frases como "obtener de Figma", "extraer diseño", "variables de Figma", "tokens de diseño de Figma", "capturar pantallas" o cualquier enlace figma.com/design. Incluso si el usuario simplemente pega un enlace de Figma sin instrucciones, use esta habilidad para analizarlo y decidir qué extraer. Fuente: petbrains/mvp-builder.

¿Cómo instalo figma-design-extraction?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

https://github.com/petbrains/mvp-builder