Volver al lab

design-context-bridge

En producción

Para que la IA 'vea' tus diseños sin depender de imágenes. Pasa datos limpios de Figma (capas, espaciados, tokens) directo a tus agentes de IA a través de MCP.

design-context-bridge

$

Por qué lo construí

MCP (Model Context Protocol) es el protocolo que permite a los agentes de IA llamar a herramientas externas en lugar de interpretar capturas de pantalla. Cuando vi que nadie había conectado Figma con los agentes de forma que expusiera los tokens reales — no los píxeles — lo construí.

Qué hace

  • Cualquier agente compatible con MCP — Cursor, Claude, Windsurf, VS Code, OpenCode.
  • El agente accede a los datos reales de Figma
  • El agente recibe datos estructurados — tokens, capas, espaciado — y los usa para generar código que respeta el sistema de diseño desde el primer prompt.

Cómo funciona

  1. 01

    El servidor MCP se conecta al archivo de Figma vía API y expone su estructura — nodos, estilos, variables — como herramientas que cualquier agente compatible puede invocar.

  2. 02

    Cuando un agente de IA (Cursor, Claude) necesita contexto de diseño, llama a esas herramientas en vez de pedir una captura de pantalla.

  3. 03

    El agente recibe datos estructurados — tokens, capas, espaciado — y los usa para generar código que respeta el sistema de diseño desde el primer prompt.

Qué expone

Lectura de selecciónget_current_selection · get_selected_colors · get_selected_texts
Navegación del archivoget_all_pages · get_frame_by_name · get_node_info
Extracción del sistema de diseñoextract_design_system · get_variables
Extracción de assetsfind_assets · export_image
Análisis de estructuraanalyze_structure · get_component_variants

Modos de uso

Plugin ModeEnvía la selección de Figma en tiempo real desde el plugin de escritorio.
Se debe instalar el plugin en Figma en la aplicación de desktop para poder usarlo. Disponible en github.
REST API ModeLee cualquier URL de Figma usando un token de acceso personal.
Depende de la API de Figma. Y los limites de uso que tengas por tu cuenta.

Build y herramientas

TypeScriptMCPClaude CodeNode ≥ 18MIT LicenseCursorWindsurfVS CodeOpenCode

Enlaces

GitHubnpm

Independiente — no afiliado a Figma, Inc.