lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

configuración intermedio mcpfigmaclaude-code

Plumb: lleva Figma o una web a un grafo de diseño

Extrae estructura visual para construir una interfaz y comparar después el resultado con el diseño de referencia.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: comprueba los requisitos

Comprueba que Node.js ≥20 y npm están disponibles, que tu editor admite MCP y que Figma Desktop abre el archivo de ensayo. Deja la carga del plugin para después de instalar el paquete.

Paso 2: instalación según el README

npm install -g plumb-mcp
plumb-mcp init

Paso 3: carga el plugin y empareja

Localiza plumb-mcp/figma-plugin/manifest.json dentro del directorio que devuelve npm root -g, como indica el README. En Figma Desktop abre Plugins → Development → Import plugin from manifest, selecciona ese archivo, ejecuta Plumb y pulsa Pair with Plumb. Mantén el plugin abierto.

Comprobación

Pide al agente llamar plumb_status y leer una pantalla de prueba. Comprueba que sus nodos corresponden al lienzo.

Si algo falla

Si falla el emparejamiento, revisa que el plugin siga abierto y el cliente use el servidor configurado por init. Sigue el quick start del README para localizar el manifest.

Procedimiento oficial.

ver en .md ¿Prefieres el recurso entero?

Qué es

Plumb es un servidor MCP para trabajar con diseños y páginas web. Normaliza sus elementos en un grafo semántico que el agente puede consultar, transformar y verificar.

Para qué te sirve

  • Cuando una pantalla de Figma debe convertirse en componentes.
  • Cuando quieres comparar la implementación con el diseño.
  • Cuando una web existente sirve de referencia para organizar una interfaz.

Cómo funciona

El plugin de Figma conecta el lienzo con el servidor local. Las herramientas extraen nodos, tokens y capturas; plumb_verify y plumb_fit comparan resultados. También existen importación de páginas web y generación de React desde el grafo.

Antes de empezar

Un cliente MCP y Node.js ≥20 con npm, según el package.json del paquete. Para leer un lienzo necesitas Figma Desktop y cargar el plugin. Las operaciones sobre diseños requieren acceso legítimo al archivo.

Límites y alternativas

La comparación automatizada no garantiza accesibilidad ni calidad del código. La lectura del lienzo evita ciertas restricciones de REST, pero no convierte toda integración en ilimitada. El MCP oficial de Figma es otra opción si prefieres la conexión del proveedor.

Recursos