mcp-sketch

English | 中文

Локальный инструмент, предоставляющий MCP-сервис и CLI для разбора ZIP-архивов HTML, экспортированных из Sketch-Meaxure, и извлечения информации о структуре дизайна.

Функции

• Разбор ZIP-архивов HTML, экспортированных из Sketch, и извлечение структуры дизайна

  • Поддержка фильтрации по страницам (page) и артбордам (artboard)

  • Поддержка разбора по указанной прямоугольной области

  • Вывод JSON-структуры дизайна и изображения для предварительного просмотра для использования ИИ

• Предоставление двух способов использования: MCP-сервис и CLI

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

Способ 1: Прямое использование через CLI

Использование совместно с npx:

npx -y mcp-sketch analyze -p /path/to/export.zip

Параметры команды

Пример CLI

Если параметры содержат пробелы, их необходимо заключить в кавычки

# 分析 zip 中第一个页面第一个画板
npx -y mcp-sketch analyze -p "/path/to/export .zip"

# 分析指定页面
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页

# 分析指定页面指定画板
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页 --an 用户管理

# 分析指定区域
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页 --an 用户管理 -r "[0,0,1920,64]"

Способ 2: MCP-сервис

Для включения MCP-сервиса необходимо установить переменную окружения MCP_MODE=1. Настройте его как локальный MCP-сервис, чтобы инструменты ИИ могли вызывать его напрямую.

• opencode:

{
  "mcp": {
    "mcp-sketch": {
      "type": "local",
      "command": ["npx", "-y", "mcp-sketch"],
      "enabled": true,
      "environment": {
        "MCP_MODE": "1",
        "LOG_LEVEL": "debug"
      }
    }
  }
}

• Trae:

{
  "mcpServers": {
    "mcp-sketch": {
      "command": "npx",
      "args": ["-y", "mcp-sketch"],
      "env": {
        "MCP_MODE": "1"
      }
    }
  }
}

Параметры MCP

Используйте инструмент sketch_html_analyze для анализа ZIP-архива HTML, экспортированного из Sketch:

Пример вызова MCP

• Анализ первого артборда на первой странице в ZIP-архиве Sketch HTML:

sketch_html_analyze({ file_path: "/path/to/export.zip" })

• Анализ первого артборда на указанной странице:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页" })

• Анализ указанного артборда на указанной странице:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页", artboard_name: "用户管理" })

• Анализ указанной области указанного артборда на указанной странице, например, разбор верхней панели навигации артборда управления пользователями:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页", artboard_name: "用户管理", rect: [0, 0, 1920, 64] })

Приоритет параметров

• page: page_id > page_name > первая страница

• artboard: artboard_id > artboard_name > первый артборд

• rect: Указывает прямоугольную область разбора; правило фильтрации заключается в том, что элемент будет разобран, если его x,y,x+width,y+height находятся внутри прямоугольника.

Результаты

Инструмент возвращает текст: {artboard: {результат разбора}, previewPath: "путь к изображению предпросмотра"}

• artboard

  • Данные артборда, включая информацию о слоях, стилях, изображениях и т.д.

• previewPath

  • Использует sharp в качестве optionalDependencies для обработки изображений.

  • Если установка не удалась (в крайнем случае, так как sharp зависит от libvips), будет возвращено исходное полное изображение артборда.

  • Если установка прошла успешно, размер будет изменен, область rect (если указана) будет вырезана и сжата в формат webp.

  • Обрабатывается только изображение предпросмотра, нарезка sketch не затрагивается.

Расположение выходных файлов

• Разобранные нарезанные изображения по умолчанию сохраняются в директории src/assets/sketch/ (можно настроить через assets_path)

• Разобранное содержимое дизайна по умолчанию сохраняется в локальный JSON-файл (для ручной проверки), папка хранения по умолчанию находится на том же уровне, что и ZIP-архив, и имеет то же имя.

Рекомендации по использованию

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

• Объем данных, передаваемых ИИ, не должен превышать 50 КБ для повышения точности анализа ИИ (локально сохраненный JSON-файл отформатирован, а для ИИ передается компактный формат).

• Рекомендуется использовать параметр rect для разбора конкретных областей артборда, модульной разработки и повышения детализации.

SKILL

Вы можете использовать сопутствующий навык sketch-html для анализа ZIP-файлов, экспортированных из Sketch Meaxure.