code-connect-components
✓Conecta los componentes de diseño de Figma a los componentes de código mediante Code Connect. Úselo cuando el usuario diga "conectar código", "conectar este componente al código", "conectar Figma al código", "asignar este componente", "vincular componente al código", "crear mapeo de conexión de código", "agregar conexión de código", "conectar diseño al código" o desea establecer asignaciones entre los diseños de Figma y las implementaciones de código. Requiere conexión al servidor Figma MCP.
Instalación
SKILL.md
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.
When the user provides a Figma URL with file key and node ID, first run getmetadata to fetch the node structure and identify all Figma components.
IMPORTANT: When extracting the node ID from a Figma URL, convert the format:
Conecta los componentes de diseño de Figma a los componentes de código mediante Code Connect. Úselo cuando el usuario diga "conectar código", "conectar este componente al código", "conectar Figma al código", "asignar este componente", "vincular componente al código", "crear mapeo de conexión de código", "agregar conexión de código", "conectar diseño al código" o desea establecer asignaciones entre los diseños de Figma y las implementaciones de código. Requiere conexión al servidor Figma MCP. Fuente: figma/mcp-server-guide.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components- Fuente
- figma/mcp-server-guide
- Categoría
- *Creatividad
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es code-connect-components?
Conecta los componentes de diseño de Figma a los componentes de código mediante Code Connect. Úselo cuando el usuario diga "conectar código", "conectar este componente al código", "conectar Figma al código", "asignar este componente", "vincular componente al código", "crear mapeo de conexión de código", "agregar conexión de código", "conectar diseño al código" o desea establecer asignaciones entre los diseños de Figma y las implementaciones de código. Requiere conexión al servidor Figma MCP. Fuente: figma/mcp-server-guide.
¿Cómo instalo code-connect-components?
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/figma/mcp-server-guide --skill code-connect-components 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 o Cursor
¿Dónde está el repositorio de origen?
https://github.com/figma/mcp-server-guide
Detalles
- Categoría
- *Creatividad
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01