Sketch Context MCP

Nota: Este proyecto se encuentra actualmente en fase de prueba y es posible que no sea totalmente estable.

Contexto del boceto MCP

Un servidor de Protocolo de contexto de modelo (MCP) para integrar diseños de Sketch con IDE como Cursor, Cline o Windsurf.

Descripción general

Esta herramienta permite a Cursor IDE acceder e interpretar archivos de diseño de Sketch, lo que posibilita flujos de trabajo de diseño a código basados en IA. Funciona de la siguiente manera:

1. Proporcionar un servidor que analiza archivos Sketch (.sketch)
2. Implementar el protocolo MCP que Cursor u otros IDE utilizan para el contexto
3. Permitiéndole hacer referencia a componentes y capas específicos desde sus archivos de Sketch
4. Proporcionar una interfaz de usuario para Sketch que se comunica con Cursor
5. Habilitación de la comunicación bidireccional en tiempo real entre Sketch y Cursor

Componentes

Este proyecto consta de dos componentes principales:

1. Servidor MCP : un servidor Node.js que implementa el Protocolo de contexto de modelo para proporcionar datos de archivos Sketch a Cursor IDE
2. Complemento de Sketch : un complemento de Sketch con interfaz de usuario que se comunica con el servidor MCP a través de WebSockets

Herramientas MCP disponibles

El servidor proporciona las siguientes herramientas a Cursor:

• get_file : recupera el contenido de un archivo Sketch o un nodo específico dentro de él
• list_components : enumera todos los componentes/símbolos en un archivo Sketch
• get_selection : Obtener información sobre los elementos seleccionados actualmente
• create_rectangle : Crea nuevos rectángulos con dimensiones y propiedades especificadas
• create_text : crea nuevos elementos de texto con contenido y estilo personalizados

Estas herramientas permiten a Cursor:

• Acceder e inspeccionar archivos de diseño de Sketch
• Consultar componentes y capas específicos
• Crear y modificar elementos de diseño mediante comandos de lenguaje natural
• Mantener la sincronización en tiempo real con Sketch

Funciones compatibles

• Análisis de archivos de Sketch locales y en la nube
• Extracción de componentes/símbolos
• Gestión de activos y descargas automáticas
• Compatibilidad con enlaces de selección a través del complemento Sketch
• Actualizaciones en tiempo real a través de WebSockets y SSE
• Interfaz de usuario interactiva para conectar Sketch a Cursor
• Análisis de archivos locales y alojados en Sketch Cloud
• Extracción de la estructura del documento y la información de los componentes
• Acceso a nodos específicos por ID
• Listado de todos los componentes en un archivo Sketch
• Creación de rectángulos, texto y otros elementos mediante comandos del Cursor

Empezando

Prerrequisitos

• Node.js (v14 o posterior)
• Boceto (v70 o posterior)
• Cursor IDE, VS Code o similar
• Una cuenta de Sketch (local) o usar acceso API (archivos de Sketch Cloud)

Instalación

O ejecutar directamente con npx:

Instalación del complemento Sketch

1. Descargue la última versión del complemento desde la página de versiones
2. Haga doble clic en el archivo .sketchplugin para instalarlo en Sketch
3. El complemento estará disponible en Sketch en Complementos > Sketch Context MCP

Integración con Cursor

Para usar esto con Cursor:

1. Inicie el servidor MCP con su archivo Sketch:
   sketch-context-mcp --local-file=/path/to/your/file.sketch
2. En Sketch, abra el complemento:
   • Vaya a Complementos > Contexto de Sketch MCP > Abrir interfaz MCP
   • Introduzca el puerto del servidor (predeterminado: 3333)
   • Haga clic en "Conectar"
3. En Cursor, conéctese al servidor MCP:
   • Vaya a Configuración > Funciones > Contexto
   • Agregue un nuevo servidor MCP con la URL: http://localhost:3333/sse
   • Haga clic en "Conectar"
4. En el compositor de cursores, ahora puedes:
   • Componentes de referencia por ID: "Muéstrame el componente con ID 12345"
   • Listar todos los componentes: "Enumerar todos los componentes en el diseño"
   • Obtenga detalles sobre elementos específicos: "Describe el botón en el encabezado"
   • Crear nuevos elementos: "Crear un rectángulo con ancho 200 y alto 100"

Configuración

El servidor se puede configurar mediante variables de entorno (mediante el archivo .env ) o argumentos de la línea de comandos. Los argumentos de la línea de comandos tienen prioridad sobre las variables de entorno.

Variables de entorno

• SKETCH_API_KEY : Su token de acceso a la API de Sketch (necesario para los archivos de Sketch Cloud)
• PORT : El puerto donde se ejecutará el servidor (predeterminado: 3333)
• LOCAL_SKETCH_PATH : Ruta al archivo Sketch local (alternativa al argumento --local-file)
• DEBUG_LEVEL : Establece el nivel de detalle del registro (predeterminado: 'info')

Argumentos de la línea de comandos

• --version : Mostrar el número de versión
• --sketch-api-key : Su token de acceso a la API de Sketch
• --port : El puerto donde se ejecutará el servidor
• --stdio : ejecuta el servidor en modo de comando, en lugar del modo HTTP/SSE predeterminado
• --help : Mostrar el menú de ayuda

Uso del complemento Sketch

Pestaña de conexión

La pestaña Conexión le permite conectarse al servidor MCP de Sketch Context:

1. Introduzca el número de puerto (el predeterminado es 3333)
2. Haga clic en "Conectar" para establecer una conexión WebSocket
3. Una vez conectado, verás un mensaje de confirmación con el ID del canal.
4. Siga las instrucciones para conectar Cursor al servidor

Pestaña de selección

La pestaña Selección muestra información sobre las capas seleccionadas en su documento Sketch:

1. Seleccione una o más capas en su documento de Sketch
2. Las capas seleccionadas se mostrarán en la lista.
3. Haga clic en "Copiar ID de selección" para copiar los ID de capa a su portapapeles
4. Utilice estos ID en el cursor para hacer referencia a capas específicas

Pestaña Acerca de

La pestaña Acerca de proporciona información sobre el complemento y cómo usarlo.

Uso con cursor

Una vez que Sketch y Cursor estén conectados al servidor MCP:

1. Seleccionar elementos en Sketch
2. Copiar sus identificaciones usando el complemento MCP de Sketch Context
3. En Cursor, haga referencia a estos elementos por sus ID

Comandos de ejemplo en Cursor:

• "Muéstrame los detalles de la capa con ID 12345"
• "Crea un rectángulo azul con ancho 300 y alto 200"
• "Añadir una capa de texto con el contenido 'Hola mundo'"

Solución de problemas

Problemas comunes

• Errores de conexión : asegúrese de que su servidor esté en funcionamiento y que el puerto sea accesible
• Errores de autenticación : Verifique que su clave API de Sketch sea correcta
• Problemas de análisis de archivos : asegúrese de que su archivo Sketch sea válido y no esté dañado
• Error de conexión WebSocket : asegúrese de que el puerto no esté bloqueado por un firewall

Registros

Para habilitar el registro detallado, configure la variable de entorno DEBUG:

Contribuyendo

¡Agradecemos sus contribuciones! No dude en enviar una solicitud de incorporación de cambios.

Licencia

Este proyecto está licenciado bajo la licencia MIT: consulte el archivo de LICENCIA para obtener más detalles.