mcp-sketch

English | 中文

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

SKILL

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

• Также можно использовать инструмент skills для загрузки.

npx skills@latest add YamadaAoi/mcp-sketch -s sketch-html

Related MCP server: codesign-mcp

Заявление

• Чтобы не сбивать с толку AI, данный инструмент отфильтровывает часть бессмысленных слоев, однако не исключено, что некоторые полезные слои также могут быть отфильтрованы.

• Рекомендуется общаться с UI-дизайнерами: сложные эффекты лучше нарезать как изображения; для простых эффектов используйте скругление углов (radius) для акцента, даже если это 1.

Функции

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

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

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

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

• Предоставление двух способов использования: сервис 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, чтобы инструменты AI могли вызывать его напрямую.

• 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-архив, и имеет то же имя.

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

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

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

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

Руководство