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

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

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

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

Обзор

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

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

Компоненты

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

MCP Server : сервер Node.js, реализующий протокол контекста модели для предоставления данных Sketch-файла в Cursor IDE.
Плагин 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)

Установка

# Install globally
npm install -g sketch-context-mcp

# Run with a local Sketch file
sketch-context-mcp --local-file=/path/to/your/file.sketch

# Run with Sketch Cloud access
sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

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

npx sketch-context-mcp --local-file=/path/to/your/file.sketch

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

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

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

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

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

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

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

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

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

curl -X "POST" "https://auth.sketch.cloud/oauth/token" \
  -H 'Content-Type: application/json' \
  -d '{
    "email": "YOUR_EMAIL",
    "password": "YOUR_PASSWORD",
    "grant_type": "password"
  }'

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

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

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

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

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

export SKETCH_API_KEY=<your-access-token>

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

sketch-context-mcp --sketch-api-key=<your-access-token>

Шаг 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:

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

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

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

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

О вкладке

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

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

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

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

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

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

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

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

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

Журналы

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

DEBUG=sketch-mcp:* npx sketch-context-mcp

Внося вклад

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

Лицензия

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

Sketch Context MCP

Integrations