Sketch Context MCP

Примечание: данный проект в настоящее время находится на стадии тестирования и может быть не полностью стабильным.

Эскиз Контекст MCP

Сервер протокола контекста модели (MCP) для интеграции проектов Sketch с такими IDE, как Cursor, Cline или Windsurf.

Обзор

Этот инструмент позволяет Cursor IDE получать доступ к файлам дизайна Sketch и интерпретировать их, обеспечивая рабочие процессы проектирования и кодирования на базе ИИ. Он работает следующим образом:

1. Предоставление сервера, который анализирует файлы Sketch (.sketch)
2. Реализация протокола MCP, который Cursor или другие IDE используют для контекста
3. Позволяет ссылаться на определенные компоненты и слои из файлов Sketch.
4. Предоставление пользовательского интерфейса для Sketch, взаимодействующего с курсором
5. Обеспечение двунаправленной связи в реальном времени между Sketch и Cursor

Компоненты

Этот проект состоит из двух основных компонентов:

1. MCP Server : сервер Node.js, реализующий протокол контекста модели для предоставления данных Sketch-файла в Cursor IDE.
2. Плагин Sketch : плагин Sketch с пользовательским интерфейсом, который взаимодействует с сервером MCP через WebSockets.

Доступные инструменты MCP

Сервер предоставляет следующие инструменты для Курсора:

• get_file : Извлечение содержимого файла Sketch или определенного узла внутри него
• list_components : Список всех компонентов/символов в файле Sketch
• get_selection : Получить информацию о выбранных в данный момент элементах
• create_rectangle : Создание новых прямоугольников с указанными размерами и свойствами.
• create_text : создание новых текстовых элементов с пользовательским содержимым и стилем

Эти инструменты позволяют Cursor:

• Доступ и проверка файлов дизайна Sketch
• Запрос определенных компонентов и слоев
• Создавайте и изменяйте элементы дизайна с помощью команд естественного языка.
• Поддерживайте синхронизацию в реальном времени со Sketch

Поддерживаемые функции

• Анализ локальных и облачных файлов Sketch
• Извлечение компонентов/символов
• Управление активами и автоматические загрузки
• Поддержка ссылок выбора через плагин Sketch
• Обновления в реальном времени через WebSockets и SSE
• Интерактивный пользовательский интерфейс для подключения Sketch к Cursor
• Анализ как локальных, так и размещенных в облаке Sketch файлов
• Извлечение информации о структуре и компонентах документа
• Доступ к определенным узлам по идентификатору
• Перечисление всех компонентов в файле Sketch
• Создание прямоугольников, текста и других элементов с помощью команд Курсора

Начиная

Предпосылки

• Node.js (v14 или более поздняя версия)
• Эскиз (v70 или более поздняя версия)
• Курсор IDE, VS Code или аналогичный
• Учетная запись Sketch (локальная) или использование API-доступа (файлы Sketch Cloud)

Установка

Или запустить напрямую с помощью npx:

Установка плагина Sketch

1. Загрузите последнюю версию плагина со страницы релизов.
2. Дважды щелкните файл .sketchplugin , чтобы установить его в Sketch.
3. Плагин будет доступен в Sketch в разделе Плагины > Sketch Context MCP.

Интеграция с курсором

Чтобы использовать это с курсором:

1. Запустите сервер MCP с вашим файлом Sketch:
   sketch-context-mcp --local-file=/path/to/your/file.sketch
2. В Sketch откройте плагин:
   • Перейдите в раздел Плагины > Sketch Context MCP > Открытый интерфейс MCP.
   • Введите порт сервера (по умолчанию: 3333)
   • Нажмите «Подключиться».
3. В Курсоре подключитесь к серверу MCP:
   • Перейдите в Настройки > Функции > Контекст.
   • Добавьте новый сервер MCP с URL-адресом: http://localhost:3333/sse
   • Нажмите «Подключиться».
4. В редакторе курсоров теперь можно:
   • Ссылка на компоненты по идентификатору: «Покажите мне компонент с идентификатором 12345»
   • Перечислите все компоненты: «Перечислите все компоненты в проекте»
   • Получите подробную информацию о конкретных элементах: «Опишите кнопку в заголовке»
   • Создать новые элементы: «Создать прямоугольник шириной 200 и высотой 100»

Получение ключа API Sketch

Ключ API Sketch — это токен доступа OAuth, необходимый для доступа к файлам, размещенным в облаке Sketch. Чтобы получить и использовать токен, выполните следующие действия:

Шаг 1: Авторизуйтесь с помощью Sketch Cloud

Используйте свои учетные данные Sketch Cloud (адрес электронной почты и пароль) для генерации токена доступа, отправив запрос POST к конечной точке аутентификации:

Замените YOUR_EMAIL и YOUR_PASSWORD на данные вашей учетной записи Sketch Cloud.

Шаг 2: Токен доступа

Ответ будет включать access_token . Этот токен служит вашим ключом API для доступа к файлам, размещенным в облаке Sketch.

Шаг 3: Использование токена

В целях безопасности рекомендуется передавать токен как переменную среды:

Или включите его в качестве аргумента командной строки:

Шаг 4: Обновление токена

Если срок действия вашего токена истек, используйте refresh_token , предоставленный в первоначальном ответе, чтобы получить новый токен доступа.

Лучшие практики безопасности

Чтобы обеспечить безопасность вашего ключа API, следуйте следующим рекомендациям:

• Не закодируйте ключ хард-кодом : Никогда не закодируйте ключ API в приложении или исходном коде. Вместо этого используйте переменные среды или секретные инструменты управления.
• Используйте файлы .env для локальной разработки : сохраните свой ключ API в файле .env и загрузите его с помощью библиотеки, например dotenv :
  SKETCH_API_KEY=<your-access-token>
  Убедитесь, что файл .env добавлен в .gitignore , чтобы избежать случайного раскрытия.
• Регулярно проводите ротацию токенов : если ваш токен был скомпрометирован или украден, немедленно отзовите его и сгенерируйте новый.
• Мониторинг и аудит : используйте инструменты для сканирования вашего репозитория на предмет раскрытых учетных данных (например, функция секретного сканирования GitHub).
• Используйте токены с коротким сроком жизни : если возможно, используйте токены с коротким сроком жизни и обновляйте их по мере необходимости, чтобы свести к минимуму влияние утечки токена.

Как это работает в Sketch-Context-MCP

Ключ API Sketch необходим для доступа к файлам, размещенным в облаке Sketch. Сервер использует этот ключ для аутентификации запросов к облаку Sketch и получения необходимых данных дизайна. Ключ передается по защищенному каналу через заголовок Authorization при выполнении запросов API.

Конфигурация

Сервер можно настроить с помощью переменных среды (через файл .env ) или аргументов командной строки. Аргументы командной строки имеют приоритет над переменными среды.

Переменные среды

• SKETCH_API_KEY : Ваш токен доступа к API Sketch (требуется для файлов Sketch Cloud)
• PORT : Порт, на котором будет работать сервер (по умолчанию: 3333)
• LOCAL_SKETCH_PATH : Путь к локальному файлу Sketch (альтернатива аргументу --local-file)
• DEBUG_LEVEL : Установить уровень детализации журнала (по умолчанию: «info»)

Аргументы командной строки

• --version : Показать номер версии
• --sketch-api-key : Ваш токен доступа к API Sketch
• --port : Порт, на котором будет запущен сервер.
• --stdio : запустить сервер в командном режиме вместо HTTP/SSE по умолчанию
• --help : Показать меню справки

Использование плагина Sketch

Вкладка «Подключение»

Вкладка «Подключение» позволяет подключиться к серверу Sketch Context MCP:

1. Введите номер порта (по умолчанию 3333)
2. Нажмите «Подключиться», чтобы установить соединение WebSocket.
3. После подключения вы увидите подтверждающее сообщение с идентификатором канала.
4. Следуйте инструкциям по подключению Курсора к серверу.

Вкладка «Выбор»

На вкладке «Выделение» отображается информация о выбранных слоях в документе Sketch:

1. Выберите один или несколько слоев в документе Sketch.
2. Выбранные слои будут отображены в списке.
3. Нажмите «Копировать идентификаторы выделенных слоев», чтобы скопировать идентификаторы слоев в буфер обмена.
4. Используйте эти идентификаторы в курсоре для ссылки на определенные слои.

О вкладке

Вкладка «О плагине» содержит информацию о плагине и о том, как его использовать.

Использование с курсором

После подключения Sketch и Cursor к серверу MCP:

1. Выбрать элементы в Sketch
2. Скопируйте их идентификаторы с помощью плагина Sketch Context MCP.
3. В курсоре ссылайтесь на эти элементы по их идентификаторам.

Примеры команд в курсоре:

• «Покажите мне подробности слоя с идентификатором 12345»
• «Создайте синий прямоугольник шириной 300 и высотой 200»
• «Добавить текстовый слой с содержимым «Hello World»»

Поиск неисправностей

Общие проблемы

• Ошибки подключения : убедитесь, что ваш сервер работает и порт доступен.
• Ошибки аутентификации : проверьте правильность ключа API Sketch.
• Проблемы с анализом файлов : убедитесь, что ваш файл Sketch действителен и не поврежден.
• Ошибка подключения WebSocket : убедитесь, что порт не заблокирован брандмауэром.

Журналы

Чтобы включить подробное ведение журнала, установите переменную среды DEBUG:

Внося вклад

Вклады приветствуются! Пожалуйста, не стесняйтесь отправлять запрос на включение.

Лицензия

Данный проект лицензирован по лицензии MIT — подробности см. в файле LICENSE .