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

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 auxiliar de selección de Sketch : un complemento de Sketch que le ayuda a copiar los identificadores de selección para usarlos con el servidor MCP

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 Selection Helper
• Actualizaciones en tiempo real a través de SSE
• 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

Empezando

Prerrequisitos

• Node.js (v14 o posterior)
• Una cuenta de Sketch con acceso a la API (solo necesaria para archivos de Sketch Cloud)

Instalación

O ejecutar directamente con npx:

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 Cursor, conéctese al servidor MCP:
   • Vaya a Configuración > Funciones > Contexto
   • Introduzca la URL: http://localhost:3333
   • Haga clic en "Conectar"
3. 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"

Trabajar con archivos de boceto

Dado que Sketch no tiene una función incorporada "Copiar enlace a la selección" como Figma, puedes:

1. Utilice la herramienta list_components para ver todos los componentes disponibles
2. Hacer referencia a componentes específicos por su ID
3. Utilice la API del complemento Sketch para exportar los ID de selección (consulte la sección Complemento Sketch a continuación)

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

Conectando al cursor

Iniciar el servidor

Debería ver un resultado similar a este:

Conectar el cursor al servidor MCP

1. Abrir cursor IDE
2. Vaya a Configuración (⚙️)
3. Vaya a la pestaña Características
4. Encuentra la sección "Contexto"
5. Introduzca la URL de su servidor MCP: http://localhost:3333
6. Haga clic en "Conectar"

Una vez conectado el servidor, debería ver un indicador de estado verde en la configuración de Cursor.

Uso con cursor

Una vez conectado el servidor MCP, puedes comenzar a usarlo con Cursor:

1. Asegúrate de estar usando Cursor en modo agente
2. Coloque un enlace a un archivo de Sketch en el compositor del cursor
3. Pídale a Cursor que analice o trabaje con el diseño

Por ejemplo, podrías decir: "Analiza este diseño de Sketch y crea un componente de React que coincida con el diseño".

Trabajar con enlaces de selección

Para hacer referencia a elementos específicos en su archivo Sketch:

1. Instalar el complemento Sketch Selection Helper (ver a continuación)
2. Seleccionar elementos en Sketch
3. Ejecute el complemento desde el menú Complementos (o utilice el atajo de teclado)
4. Los ID se copiarán a su portapapeles.
5. Utilice estos ID cuando hable con Cursor sobre elementos específicos

Instalación del complemento Sketch Selection Helper

El complemento le ayuda a obtener los ID de elementos seleccionados en Sketch para usar con el servidor MCP.

Instalación automática

Ejecute el script de instalación:

Instalación manual

1. Copie la carpeta sketch-selection-helper.sketchplugin a su directorio de complementos de Sketch:
   ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/
2. Reiniciar Sketch si ya se está ejecutando

Usando el Plugin

1. Abrir un documento de Sketch
2. Seleccione una o más capas
3. Vaya a Complementos > Asistente de selección de bocetos > Copiar ID de selección
4. Los ID se copiarán a su portapapeles.
5. Utilice estos ID con el servidor MCP para hacer referencia a elementos específicos

Por ejemplo, después de copiar los ID, podría preguntarle a Cursor: "Analice el botón con ID 12345 del diseño de Sketch".

Trabajar con componentes

Para hacer referencia a componentes específicos en su archivo Sketch:

1. Abra su archivo Sketch
2. Seleccione el componente al que desea hacer referencia
3. Copia su ID o crea un enlace a él
4. Utilice este ID/enlace cuando hable con Cursor

Gestión de activos

Los activos se gestionan automáticamente cuando:

• Acceder a componentes con imágenes
• Trabajando con símbolos
• Manejo de activos exportados

El servidor automáticamente:

• Descargar los recursos necesarios
• Administrar versiones de activos
• Manejar referencias de activos en componentes

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

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.