Eleven translated pages changed in English since the last release without matching updates: system requirements, the Lint tab, AI chat diff tools, collaboration with agents, design JSX imports and export fidelity, Storybook and live-app export, lint fixes, page navigation, and Checking Designs. Bring de, es, fr, it, pl, and ru up to date, add the sections the abridged translations lacked where a change landed, use each language's UI labels, and point the export page at documents list.
82 lines
13 KiB
Markdown
82 lines
13 KiB
Markdown
---
|
||
layout: doc
|
||
title: ИИ и автоматизация
|
||
description: Чат с ИИ, CLI, JSX, сервер MCP и другие средства автоматизации на базе движка OpenPencil.
|
||
---
|
||
|
||
# ИИ и автоматизация
|
||
|
||
OpenPencil позволяет работать с файлами дизайна как с данными. Все операции редактора — создание фигур, настройка заливок, управление автоматической компоновкой и экспорт ресурсов — доступны также из терминала, агентам ИИ и программному коду.
|
||
|
||
Интерфейс редактора и средства автоматизации используют один движок. Любое действие, которое можно выполнить в интерфейсе, можно выполнить и из сценария.
|
||
|
||
## Чат с ИИ
|
||
|
||
Встроенный помощник использует более 90 инструментов. Опишите задачу обычным языком, например: «добавь всем кнопкам тень 16 пикселей», «создай компонент карточки с вариантом для тёмной темы» или «экспортируй все фреймы на этой странице в масштабе 2×».
|
||
|
||
[Чат с ИИ →](./ai-chat)
|
||
|
||
## Совместная работа
|
||
|
||
Документ синхронизируется напрямую между участниками через WebRTC. Центральный сервер и учётная запись не нужны. Указатели участников и режим слежения показывают их присутствие, а Yjs CRDT объединяет одновременные изменения.
|
||
|
||
[Совместная работа →](./collaboration)
|
||
|
||
## Vue SDK
|
||
|
||
Создавайте редакторы на базе OpenPencil с помощью того же Vue SDK, который используется в приложении. SDK предоставляет контекст редактора, подключение холста, состояние выделения, модели команд, composables для панелей свойств и компоненты без встроенного оформления.
|
||
|
||
[Vue SDK →](./sdk/)
|
||
|
||
## JSX
|
||
|
||
Описывайте интерфейс с помощью JSX. Один вызов может создать дерево компонентов с фреймами, текстом, автоматической компоновкой, заливками и обводками.
|
||
|
||
В обратную сторону OpenPencil экспортирует выделение в JSX или HTML с классами Tailwind. Результат можно использовать как основу для реализации, проверки кода или следующего шага с ИИ.
|
||
|
||
[JSX →](./jsx-renderer)
|
||
|
||
## CLI
|
||
|
||
Просматривайте, экспортируйте и анализируйте документы без запуска редактора. CLI позволяет получить список страниц, найти объекты, извлечь токены дизайна, обнаружить проблемы компоновки и выполнить экспорт в PNG. Все команды поддерживают вывод JSON.
|
||
|
||
CLI также подключается по RPC к запущенному настольному приложению и управляет открытым документом: открывать, сохранять и переключать документы, отменять изменения, менять настройки и вызывать любой инструмент MCP.
|
||
|
||
[Просмотр файлов](./cli/inspecting) · [Экспорт](./cli/exporting) · [Анализ](./cli/analyzing) · [Сценарии](./cli/scripting) · [Controlling the App](/programmable/cli/app-control)
|
||
|
||
## Сервер MCP
|
||
|
||
Claude Code, Cursor, Windsurf и другие клиенты MCP могут использовать те же 90 инструментов, что и чат с ИИ. Сервер поддерживает stdio и HTTP с сеансами.
|
||
|
||
[Сервер MCP →](/programmable/mcp-server)
|
||
|
||
## Схема URL {#url-scheme}
|
||
|
||
Настольное приложение регистрирует схему `openpencil://`, поэтому опубликованная страница — история Storybook, обзор дизайна, README — может ссылаться прямо на слой:
|
||
|
||
```
|
||
openpencil://open?file=web/design/hikyo.pen&node=Button/Large/Default
|
||
```
|
||
|
||
`file` — путь относительно репозитория, оканчивающийся на `.pen` или `.fig`; абсолютные пути и сегменты `.` или `..` отклоняются. `node` необязателен. Оба значения кодируются как URL: разделители пути можно оставить как есть, но символ `+` нужно передавать как `%2B`; если ключ повторяется, используется последнее значение.
|
||
|
||
Приложение сопоставляет `file` с путями открытых вкладок как с целой конечной последовательностью сегментов и переключается на эту вкладку, не перечитывая документ, поэтому слой выделяется, даже если файл с момента открытия переместили или он стал нечитаемым. Побеждает первая открытая вкладка, путь которой оканчивается запрошенным путём, — это важно, когда один и тот же файл открыт из двух копий репозитория. Сегменты сравниваются так же, как это делает файловая система платформы: без учёта регистра ASCII в macOS и Windows и точно в Linux, поэтому `Web/Design/hikyo.pen` и `web/design/hikyo.pen` — один файл на Mac и два разных в Linux. Если подходящей вкладки нет, окно выбора файла один раз запрашивает файл; выбранный файл должен оканчиваться тем же относительным путём, иначе ссылка отменяется. Путь не присоединяется ни к какому корню, и доступ к файловой системе не выдаётся сверх того, что вернёт окно выбора. Файл, который ссылка действительно открывает (выбранный), попадает в список недавних файлов, как любой другой открытый файл; переход на уже открытую вкладку список не меняет, потому что ничего не открывалось.
|
||
|
||
Если указано имя объекта, приложение выделяет все слои с точно таким именем на текущей странице и подбирает масштаб так, чтобы в кадр попало всё выделение. Если на текущей странице таких слоёв нет, приложение переключается на первую страницу, где они есть, загружая страницы по мере необходимости. Неизвестное имя вызывает уведомление, а документ остаётся открытым. Схема умеет только открывать файл и выделять слои.
|
||
|
||
Веб-версия принимает такую же ссылку в адресной строке:
|
||
|
||
```
|
||
https://app.openpencil.dev/?file=https://raw.githubusercontent.com/open-pencil/open-pencil/master/tests/fixtures/pencil_button.pen&node=Button/Large/Default
|
||
```
|
||
|
||
Здесь `file` — абсолютный URL с `https:`, оканчивающийся на `.pen` или `.fig`. В веб-версии нет файловой системы, поэтому относительный путь, URL с `http:` и любое другое расширение отклоняются с предупреждением в консоли и больше ничего не происходит. Расширение определяется по пути URL, так что строка запроса у файла ничего не меняет. Фрагмент отбрасывается до загрузки: на сервер он не попадает, поэтому `…/hikyo.pen#a` и `…/hikyo.pen#b` открывают одну вкладку, а не две. `node` работает точно так же, как выше: то же выделение по точному имени и тот же масштаб, то же уведомление, если слоя с таким именем нет. Оба значения кодируются как URL, символ `+` нужно передавать как `%2B`, а при повторе ключа берётся последнее значение, как и в настольной версии. Ссылка обрабатывается на любом маршруте, поэтому `/share/<room>?file=…` и `/demo?file=…` работают так же, как `/?file=…`.
|
||
|
||
Браузер загружает файл с другого источника, поэтому хост должен это разрешать: `raw.githubusercontent.com` отправляет `Access-Control-Allow-Origin: *` и подходит. Запрос не содержит учётных данных и не следует перенаправлениям, чтобы ссылка с `https:` не могла перенаправить на незащищённую: URL вида `https://github.com/<owner>/<repo>/raw/...` перенаправляет на `raw.githubusercontent.com` и потому отклоняется, так что ссылайтесь сразу на хост raw. `file` и `node` удаляются из адресной строки через маршрутизатор сразу после чтения — до загрузки, а также если ссылка была отклонена, — поэтому перезагрузка не откроет документ заново, а скопированный URL или последующая навигация внутри приложения не несут данных ссылки. Размер загружаемого документа ограничен 64 МиБ: тело считается по мере поступления, значению `Content-Length` не доверяют, а запрос прерывается, как только лимит превышен; ссылка сообщает, что файл больше 64 МиБ. Если приложение развёрнуто с политикой Content-Security-Policy, она должна разрешать хост ссылки в `connect-src`, иначе загрузка блокируется, и ссылка сообщает, что не удалось открыть файл.
|
||
|
||
В macOS схема принадлежит установленному пакету приложения, поэтому ссылки доходят до установленной сборки, а не до процесса `tauri dev`. В Windows и Linux ссылка приходит через плагин deep-link, в том числе когда приложение ещё не запущено: при запуске она ставится в очередь и обрабатывается, когда редактор готов; в Linux встроенный файл рабочего стола передаёт ссылку через `%U`.
|
||
|
||
## Открытая платформа
|
||
|
||
OpenPencil распространяется по лицензии MIT, хранит документы локально и предоставляет программный доступ к операциям. Файлы `.fig` можно проверять, преобразовывать, обрабатывать в CI и передавать языковой модели без привязки к определённому поставщику размещения.
|