b9753aa016
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.
13 KiB
| layout | title | description |
|---|---|---|
| doc | ИИ и автоматизация | Чат с ИИ, CLI, JSX, сервер MCP и другие средства автоматизации на базе движка OpenPencil. |
ИИ и автоматизация
OpenPencil позволяет работать с файлами дизайна как с данными. Все операции редактора — создание фигур, настройка заливок, управление автоматической компоновкой и экспорт ресурсов — доступны также из терминала, агентам ИИ и программному коду.
Интерфейс редактора и средства автоматизации используют один движок. Любое действие, которое можно выполнить в интерфейсе, можно выполнить и из сценария.
Чат с ИИ
Встроенный помощник использует более 90 инструментов. Опишите задачу обычным языком, например: «добавь всем кнопкам тень 16 пикселей», «создай компонент карточки с вариантом для тёмной темы» или «экспортируй все фреймы на этой странице в масштабе 2×».
Совместная работа
Документ синхронизируется напрямую между участниками через WebRTC. Центральный сервер и учётная запись не нужны. Указатели участников и режим слежения показывают их присутствие, а Yjs CRDT объединяет одновременные изменения.
Vue SDK
Создавайте редакторы на базе OpenPencil с помощью того же Vue SDK, который используется в приложении. SDK предоставляет контекст редактора, подключение холста, состояние выделения, модели команд, composables для панелей свойств и компоненты без встроенного оформления.
JSX
Описывайте интерфейс с помощью JSX. Один вызов может создать дерево компонентов с фреймами, текстом, автоматической компоновкой, заливками и обводками.
В обратную сторону OpenPencil экспортирует выделение в JSX или HTML с классами Tailwind. Результат можно использовать как основу для реализации, проверки кода или следующего шага с ИИ.
CLI
Просматривайте, экспортируйте и анализируйте документы без запуска редактора. CLI позволяет получить список страниц, найти объекты, извлечь токены дизайна, обнаружить проблемы компоновки и выполнить экспорт в PNG. Все команды поддерживают вывод JSON.
CLI также подключается по RPC к запущенному настольному приложению и управляет открытым документом: открывать, сохранять и переключать документы, отменять изменения, менять настройки и вызывать любой инструмент MCP.
Просмотр файлов · Экспорт · Анализ · Сценарии · Controlling the App
Сервер MCP
Claude Code, Cursor, Windsurf и другие клиенты MCP могут использовать те же 90 инструментов, что и чат с ИИ. Сервер поддерживает stdio и HTTP с сеансами.
Схема URL
Настольное приложение регистрирует схему 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 и передавать языковой модели без привязки к определённому поставщику размещения.