Saltar al contenido

Capa de agente

Servidores MCP

Qué es un servidor MCP, cómo conectar el de Figma y el de Storybook a Claude Code y cómo compartir la configuración con el equipo.

Última revisión:

Un servidor MCP da al agente acceso en vivo a una herramienta. Con el de Figma, el agente lee tus diseños, tus variables y tus conexiones de Code Connect; con el de Storybook, tus componentes y sus props. Esta página explica cómo conectarlos a Claude Code.

En esta página

Qué es MCP

El Model Context Protocol es un estándar abierto para conectar herramientas de IA con fuentes de datos externas (Claude Code: Overview). Un servidor MCP expone herramientas que el agente puede llamar, como las de lectura de Figma que viste en Comprobar con el MCP.

El servidor de Figma

Figma recomienda el servidor remoto, en https://mcp.figma.com/mcp: no necesita la aplicación de escritorio y tiene el conjunto de funciones más amplio. El servidor de escritorio queda para necesidades concretas de organizaciones (Figma: Figma MCP server).

En Claude Code, Figma propone dos formas de conectarlo (Figma: Remote server installation):

Con el plugin de Figma (recomendada). Instala el servidor y las skills de Figma:

Terminal

claude plugin install figma@claude-plugins-official

Después, reinicia Claude Code, abre /plugin, ve a la pestaña Installed, elige figma y sigue el inicio de sesión en el navegador con Allow access.

A mano. Añade solo el servidor, sin las skills:

Terminal

claude mcp add --transport http figma https://mcp.figma.com/mcp

Después, en una sesión nueva, abre /mcp, elige figma y Authenticate.

El servidor de Storybook

Con el servidor de desarrollo de Storybook en marcha y el addon instalado (Storybook y su MCP), el servidor está en http://localhost:6006/mcp. Se añade a Claude Code igual que cualquier servidor HTTP (Claude Code: MCP):

Terminal

claude mcp add --transport http storybook http://localhost:6006/mcp

Compartir la configuración con el equipo

Claude Code guarda cada servidor en uno de tres ámbitos (Claude Code: MCP):

ÁmbitoDónde se guardaSe comparte
Local (por defecto)~/.claude.json, para el proyecto actualNo
Proyecto.mcp.json, en la raíz del repositorioSí, con el control de versiones
Usuario~/.claude.json, para todos tus proyectosNo

Con --scope project, el servidor queda en .mcp.json y todo el equipo lo tiene al clonar el repositorio. Por seguridad, Claude Code pide aprobación antes de usar los servidores de un .mcp.json.

Terminal

claude mcp add --transport http storybook --scope project http://localhost:6006/mcp

Recomendación

En el repositorio del sistema de diseño, guarda Storybook en el ámbito de proyecto, porque es parte del repositorio. El de Figma, con el plugin o en el ámbito de usuario: cada persona inicia sesión con su propia cuenta de Figma.

En resumen

  • El servidor MCP de Figma da acceso en vivo a diseños, variables y Code Connect; el de Storybook, a componentes y props.
  • Figma recomienda el servidor remoto, instalado con el plugin de Figma para tener también sus skills.
  • El ámbito de proyecto guarda la configuración en .mcp.json para todo el equipo.

Fuentes