Danila Poyarkov 52b9ebc5c2 Add Russian locale (ru) to docs

2026-03-08 11:40:19 +03:00

13 KiB

Raw Blame History

MCP-сервер

OpenPencil включает MCP-сервер (Model Context Protocol), который позволяет AI-инструментам — Claude Code, Cursor, Windsurf и др. — читать и редактировать .fig файлы в headless-режиме.

Два транспорта: stdio для MCP-клиентов, HTTP для всего остального.

Установка

bun add -g @open-pencil/mcp

Stdio (Claude Code, Cursor и др.)

Добавьте в конфигурацию MCP (например, ~/.claude/settings.json или .cursor/mcp.json):

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Или запустите из исходников без установки:

::: code-group

{
  "mcpServers": {
    "open-pencil": {
      "command": "bun",
      "args": ["/path/to/open-pencil/packages/mcp/src/index.ts"]
    }
  }
}

{
  "mcpServers": {
    "open-pencil": {
      "command": "npx",
      "args": ["tsx", "/path/to/open-pencil/packages/mcp/src/index.ts"]
    }
  }
}

:::

HTTP

Для браузерных расширений, скриптов, CI или любого HTTP-клиента:

openpencil-mcp-http

Или из исходников: bun packages/mcp/src/http.ts / npx tsx packages/mcp/src/http.ts

Настройки безопасности (HTTP-транспорт):

По умолчанию привязка к 127.0.0.1 (переопределяется через HOST)
Инструмент eval отключён
Файловые операции ограничены OPENPENCIL_MCP_ROOT (по умолчанию — текущий рабочий каталог)
CORS отключён по умолчанию; установите OPENPENCIL_MCP_CORS_ORIGIN для разрешения одного origin
Опциональный токен аутентификации: OPENPENCIL_MCP_AUTH_TOKEN (клиент отправляет Authorization: Bearer <token> или x-mcp-token)

Сервер запускается на порту 3100 (переопределяется через переменную окружения PORT). Эндпоинты:

GET /health — статус сервера
POST /mcp — MCP Streamable HTTP (SSE). Сессии через заголовок mcp-session-id.

Рабочий процесс

Открытие — open_file для загрузки существующего .fig, или new_document для чистого холста
Чтение — get_page_tree, find_nodes, get_node, list_pages
Создание — create_shape, render (JSX)
Изменение — set_fill, set_stroke, set_layout, update_node, set_effects
Структура — reparent_node, group_nodes, clone_node, delete_node
Сохранение — save_file для записи обратно в .fig

Навык для AI-агента

Научите вашего AI-агента использовать инструменты OpenPencil:

npx skills add open-pencil/skills@open-pencil

Работает с Claude Code, Cursor, Windsurf, Codex и любым агентом, поддерживающим skills. Навык охватывает CLI, MCP-инструменты, JSX-рендеринг, eval и мост автоматизации запущенного приложения.

Инструменты (90)

Документ

Инструмент	Описание
`open_file`	Открыть `.fig` файл для редактирования
`save_file`	Сохранить текущий документ в `.fig` файл
`new_document`	Создать новый пустой документ

Чтение

Инструмент	Описание
`get_selection`	Получить выделенные узлы
`get_page_tree`	Получить полное дерево узлов текущей страницы
`get_current_page`	Получить имя и ID текущей страницы
`get_node`	Получить свойства узла по ID
`find_nodes`	Найти узлы по шаблону имени и/или типу
`get_components`	Список всех компонентов в документе
`list_pages`	Список всех страниц
`list_variables`	Список дизайн-переменных
`list_collections`	Список коллекций переменных
`list_fonts`	Список шрифтов на текущей странице
`page_bounds`	Получить ограничивающий прямоугольник всех объектов на странице
`node_bounds`	Получить ограничивающий прямоугольник узла
`node_ancestors`	Получить цепочку предков узла
`node_children`	Получить прямых потомков узла
`node_tree`	Получить поддерево с корнем в узле
`node_bindings`	Получить привязки переменных к узлу

Создание

Инструмент	Описание
`create_shape`	Создать фигуру (FRAME, RECTANGLE, ELLIPSE, TEXT, LINE, STAR, POLYGON, SECTION)
`create_vector`	Создать векторный узел из строки пути
`create_slice`	Создать экспортную область
`create_page`	Создать новую страницу
`render`	Рендеринг JSX в узлы дизайна — создание целых деревьев компонентов за один вызов
`create_component`	Преобразовать фрейм/группу в компонент
`create_instance`	Создать экземпляр компонента
`node_to_component`	Преобразовать существующий узел в компонент на месте

Изменение

Инструмент	Описание
`set_fill`	Установить цвет заливки (hex)
`set_stroke`	Установить цвет, толщину и выравнивание обводки
`set_effects`	Добавить тень или размытие
`update_node`	Обновить позицию, размер, непрозрачность, радиус скругления, текст, шрифт
`set_layout`	Установить auto-layout (flexbox) — направление, отступы, выравнивание
`set_constraints`	Установить ограничения масштабирования
`set_rotation`	Установить угол поворота в градусах
`set_opacity`	Установить непрозрачность (0–1)
`set_radius`	Установить радиус скругления (единый или для каждого угла)
`set_minmax`	Установить ограничения мин./макс. ширины и высоты
`set_text`	Установить текстовое содержимое узла TEXT
`set_font`	Установить семейство и начертание шрифта
`set_font_range`	Установить свойства шрифта для диапазона символов
`set_text_resize`	Установить режим авторазмера текста (fixed/auto-width/auto-height)
`set_visible`	Показать или скрыть узел
`set_blend`	Установить режим наложения
`set_locked`	Заблокировать или разблокировать узел
`set_stroke_align`	Установить выравнивание обводки (inside/center/outside)
`set_text_properties`	Установить свойства текста: выравнивание, авторазмер, регистр, декор, обрезка
`set_layout_child`	Настроить дочерний элемент auto-layout: размер, grow, выравнивание, абсолютное позиционирование
`node_move`	Переместить узел на новую позицию
`node_resize`	Изменить размер узла
`node_replace_with`	Заменить узел другим узлом
`arrange`	Выровнять или распределить выделенные узлы

Структура

Инструмент	Описание
`delete_node`	Удалить узел
`clone_node`	Дублировать узел
`rename_node`	Переименовать узел
`reparent_node`	Переместить узел в другой родительский элемент
`select_nodes`	Выделить узлы по ID
`group_nodes`	Сгруппировать узлы
`ungroup_node`	Разгруппировать группу
`flatten_nodes`	Объединить узлы в один вектор
`boolean_union`	Булево объединение двух и более узлов
`boolean_subtract`	Булево вычитание
`boolean_intersect`	Булево пересечение
`boolean_exclude`	Булево исключение

Векторный путь

Инструмент	Описание
`path_get`	Получить данные пути векторного узла
`path_set`	Установить данные пути векторного узла
`path_scale`	Масштабировать векторный путь
`path_flip`	Отразить векторный путь по горизонтали или вертикали
`path_move`	Сдвинуть векторный путь

Экспорт

Инструмент	Описание
`export_image`	Экспортировать узлы в PNG, JPG или WEBP. Возвращает base64-кодированные данные
`export_svg`	Экспортировать узлы как SVG-разметку

Область просмотра

Инструмент	Описание
`viewport_get`	Получить текущую позицию и масштаб области просмотра
`viewport_set`	Установить позицию и масштаб области просмотра
`viewport_zoom_to_fit`	Масштабировать область просмотра по указанным узлам

Переменные

Инструмент	Описание
`get_variable`	Получить переменную по ID или имени
`find_variables`	Найти переменные по шаблону имени или типу
`create_variable`	Создать новую переменную в коллекции
`set_variable`	Установить значение переменной в режиме
`delete_variable`	Удалить переменную
`bind_variable`	Привязать переменную к свойству узла
`get_collection`	Получить коллекцию переменных по ID или имени
`create_collection`	Создать новую коллекцию переменных
`delete_collection`	Удалить коллекцию переменных

Анализ

Инструмент	Описание
`analyze_colors`	Анализ использования цветовой палитры в документе
`analyze_typography`	Анализ распределения шрифтов/размеров/начертаний
`analyze_spacing`	Анализ значений gap и padding
`analyze_clusters`	Обнаружение повторяющихся паттернов (потенциальных компонентов)

Сравнение

Инструмент	Описание
`diff_create`	Создать снимок текущего состояния документа
`diff_show`	Показать различия между текущим состоянием и снимком

Инструмент	Описание
`switch_page`	Переключиться на страницу по имени или ID

Произвольный код

Инструмент	Описание
`eval`	Выполнить JavaScript с полным доступом к Figma Plugin API

Примечание: eval доступен через stdio, но отключён в HTTP-режиме из соображений безопасности.

13 KiB Raw Blame History Unescape Escape