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

Эскиз Контекст 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 .