OpenPencil

Первый в мире AI-нативный инструмент векторного дизайна с открытым исходным кодом.
_{Параллельные команды агентов • Дизайн как код • Встроенный MCP-сервер • Мультимодельный интеллект}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{Нажмите на изображение, чтобы посмотреть демо-видео}

`), плюс работающий HTTP-эндпоинт (`127.0.0.1:/mcp`) из запущенного приложения - Автоматизация дизайна из терминала: чтение, создание и изменение файлов `.op` через любой MCP-совместимый агент - **Послойный рабочий процесс** — `design_skeleton` → `design_content` → `design_refine` для дизайнов высокого качества с несколькими секциями - **Сегментированное получение промптов** — загружайте только нужные знания о дизайне (schema, layout, roles, icons, planning и т.д.) - Поддержка нескольких страниц — создание, переименование, переупорядочивание и дублирование страниц через инструменты MCP **Генерация кода** - React + Tailwind CSS, HTML + CSS, CSS Variables - Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native ## CLI — `op` Установите глобально и управляйте инструментом дизайна из терминала: ```bash brew install zseven-w/openpencil/op ``` ```bash op start # Запустить десктопное приложение op design @landing.txt # Пакетный дизайн из файла op insert '{"type":"RECT"}' # Вставить узел op import:figma design.fig # Импортировать файл Figma cat design.dsl | op design - # Передача через stdin ``` Поддерживает три метода ввода: строка, `@filepath` (чтение из файла) или `-` (чтение из stdin). Работает с десктопным приложением или веб-сервером разработки. Подробнее в [CLI README](./crates/op-cli). **LLM-навык** — установите плагин [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill), чтобы научить ИИ-агентов (Claude Code, Cursor, Codex, Gemini CLI и др.) проектировать с помощью `op`. ## Возможности **Холст и рисование** - Бесконечный холст с панорамированием, масштабированием, умными направляющими и привязкой - Прямоугольник, Эллипс, Линия, Многоугольник, Перо (Безье), Frame, Текст - Булевы операции — объединение, вычитание, пересечение с контекстной панелью инструментов - Выбор иконок (Iconify) и импорт изображений (PNG/JPEG/SVG/WebP/GIF) - Авто-раскладка — вертикальная/горизонтальная с gap, padding, justify, align - Многостраничные документы с навигацией по вкладкам **Система дизайна** - Переменные дизайна — цветовые, числовые и строковые токены со ссылками `$variable` - Поддержка нескольких тем — несколько осей, каждая с вариантами (Светлая/Тёмная, Компактная/Комфортная) - Система компонентов — переиспользуемые компоненты с экземплярами и переопределениями - CSS-синхронизация — автоматически генерируемые пользовательские свойства, `var(--name)` в выводе кода - Переиспользуемые UIKit — импорт/экспорт наборов компонентов из файлов `.pen` **AI и агенты** - Prompt-to-canvas с потоковой генерацией и разбиением пространства под управлением оркестратора - Параллельные команды агентов — несколько дизайнеров одновременно работают над разными секциями с индикаторами на холсте по каждому участнику - Послойный рабочий процесс — `design_skeleton` → `design_content` → `design_refine` со сфокусированными промптами на каждой фазе - Руководства по стилю — 50+ встроенных стилей (glassmorphism, brutalist, retro и т. д.) с нечётким сопоставлением по тегам, интегрированным в планирование и генерацию - Профили возможностей мультимодели — автоматически подстраивает режим размышления, уровень усилий и форму промпта в зависимости от уровня модели - Встроенный рантайм агентов (Rust) + провайдеры Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini - Проброс формата Anthropic для китайских провайдеров LLM — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans **Интеграция с Git** - Мастер клонирования с аутентификацией SSH / HTTPS и управлением SSH-ключами - Выбор ветки — создание, переключение, удаление, слияние — всё прямо из панели Git - Каскады pull / push с повтором аутентификации и обработкой non-fast-forward - Трёхстороннее слияние в режиме папки с отслеживанием состояния `MERGE_HEAD` на диске - Панель конфликтов с трёхсторонними карточками по узлам/полям, встроенным редактором JSON, массовыми действиями и встроенным блоком diff - Интерфейс настроек удалённых репозиториев и SSH-ключей; i18n на 15 языков по всей поверхности Git **Экспорт** - Экспорт холста — PNG, JPEG, WEBP, PDF (`Cmd+Shift+P`) - Экспорт кода — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native - Инкрементальный конвейер генерации кода MCP — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean` **Импорт из Figma** - Импорт файлов `.fig` с сохранением раскладки, заливок, обводок, эффектов, текста, изображений и векторов **Десктопное приложение** - Нативная поддержка macOS, Windows и Linux — единый самодостаточный бинарный файл (winit + GPU Skia, без Electron) - Ассоциация файлов `.op` — двойной клик для открытия, блокировка единственного экземпляра - Фоновая проверка обновлений через GitHub Releases - Нативное меню приложения с пунктами «Сохранить как», «Открыть недавние» и диалогом несохранённых изменений при закрытии - Сохранение списка недавних файлов ## Технологический стек | | | | -------------------- | -------------------------------------------------------------------------------- | | **Ядро** | Rust-пространство (`crates/`) — состояние редактора, виджеты, хосты, MCP, AI, кодген | | **Рендеринг** | GPU Skia везде — `skia-safe` (GL) на нативных платформах, CanvasKit (WASM/WebGL2) в браузере | | **UI-инструментарий** | jian — вендоренный Rust-инструментарий виджетов/рендеринга/событий (`vendor/jian`) | | **Оконная система** | winit (вендоренный форк `casement`) | | **Десктоп** | Нативный бинарный файл `openpencil-desktop` — без браузерного движка | | **Веб-SDK** | `op-web-sdk` + адаптеры React 19 / Vue 3 — SDK для просмотра `.op` только для чтения (TypeScript) | | **CLI** | `op` — управление из терминала, пакетный DSL дизайна | | **AI** | Встроенный рантайм агентов (Rust) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Линтинг** | clippy · rustfmt (Rust) · oxlint · oxfmt (веб-SDK) | | **Формат файла** | `.op` — на основе JSON, удобочитаемый, дружественный к Git | ## Почему Rust OpenPencil переписан с нуля на **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Переписывание завершено — редактор на TypeScript + Electron был выведен из эксплуатации в `v0.7.5`, и Rust-пространство в этом репозитории — это и есть продукт: единое нативное ядро, значительно меньшее и быстрее, работающее на большем количестве платформ из единой кодовой базы. | | TypeScript + Electron (устарел, `v0.7.5`) | Rust (сегодня) | | ------------------------ | ---------------------------------------------- | ----------------------------------------------------------------------------- | | **Рантайм на десктопе** | Electron — включает Chromium + Node.js | Нативное окно (`winit` + GPU Skia), без браузерного движка | | **Размер на десктопе** | Полный рантайм Chromium при каждой установке | Один самодостаточный бинарный файл — **55.5 MB** | | **Объём для веба** | JS + WASM бандл | **8.2 MB** wasm / **2.18 MB** gzip по сети | | **Рендеринг** | CanvasKit/Skia на вебе | Единый GPU-ускоренный Skia бэкенд на **каждой** платформе | | **Память** | Паузы JavaScript GC | Без GC — владение Rust, предсказуемая задержка | | **Кодовая база** | Веб-стек + Electron | Одно Rust-пространство: редактор · CLI · MCP · AI · кодген · Figma · Git | | **Платформы** | Веб + десктоп, два раздельных стека | Десктоп (macOS/Win/Linux) · мобильные (iOS/Android) · браузер — одно ядро | **Измеренные улучшения** - **Минимальный размер** — всё десктопное приложение представляет собой один нативный бинарный файл **55.5 MB** вместо встроенного браузерного движка плюс Node-рантайм. Веб-сборка составляет **8.2 MB** в несжатом виде / **2.18 MB** gzip после разбивки каталога иконок (−48% по сети). - **Масштабируется на больших документах** — холст с **10,000 узлами** в реальном времени (вложенный авто-layout, четыре уровня глубины) записывает, читает и делает снимок раскладки **без паник и при ~0% CPU в режиме ожидания**; полный снимок раскладки всех 10k узлов возвращается за **~0.68 с**. - **Быстрое взаимодействие** — панорамирование/зум больше не сериализует документ заново на каждом кадре (одно исправление горячего пути снизило CPU при зуме колесом с **~69% до ~0%**); перетаскивание обновляет сцену инкрементально, измерение текста кэшируется, а перерисовки объединяются в одну на кадр. - **Одно ядро, каждый экран** — одно и то же состояние редактора и один и тот же рендер-бэкенд компилируются в нативный десктоп, мобильные устройства и браузер через WASM — без параллельных реализаций, которые нужно синхронизировать. - **GPU Skia везде** — нативный рендеринг через `skia-safe` на GL-контексте; браузер рендерит через CanvasKit на WebGL2 — один и тот же код рисования, один и тот же вывод. - **Нативная доступность** — AccessKit на macOS, Windows и Linux, плюс DOM-зеркало на вебе, вместо опоры на дерево доступности браузера. - **Одно типизированное пространство** — хост MCP, CLI, AI-провайдеры, генерация кода, импорт Figma и интеграция с Git — всё в одном Rust-пространстве с контролем цепочки поставок через `cargo-deny` в CI. > **Статус:** редактор на TypeScript был выведен из эксплуатации в `v0.7.5` и сохранился только в истории git; этот репозиторий — это Rust-пространство. Релиз `v0.8.0` на Rust находится в активной разработке (см. [Дорожная карта](#дорожная-карта) ниже). ## Структура проекта ```text openpencil/ ├── crates/ Rust-пространство — продукт │ ├── op-editor-core/ Каноническое состояние редактора `.op` (PenDocument) + EditorCommand + переменные дизайна │ ├── op-editor-ui/ Платформонезависимые виджеты + фасад RenderBackend (wasm32-clean) │ ├── op-editor-host-core/ Транспортонезависимые state machine хостов, общие для всех хостов │ ├── op-host-native/ Библиотека нативного хоста — winit + skia-safe GL (десктоп + мобильные) │ ├── op-host-web/ Браузерный бандл — wasm32 cdylib, рендерер CanvasKit │ ├── op-host-desktop/ Десктопный бинарный файл `openpencil-desktop`; также демон `--serve-web` │ ├── op-host-services/ Библиотека headless-демона serve-web / MCP │ ├── op-host-web-server/ Тонкий веб-серверный бинарный файл без GL │ ├── op-cli/ CLI-инструмент — команда `op` │ ├── op-mcp/ MCP-сервер — инструменты, пакетный дизайн, послойный рабочий процесс │ ├── op-ai/ AI-провайдеры, рантайм чата, стриминг │ ├── op-ai-skills/ Движок AI-навыков (фазовая загрузка промптов) │ ├── op-orchestrator/ Оркестрация параллельных команд агентов │ ├── op-codegen/ Генераторы кода (React, HTML, Vue, Flutter, ...) │ ├── op-figma/ Парсер и конвертер файлов Figma .fig │ ├── op-git/ Интеграция с Git — клонирование, ветки, push/pull, слияние │ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n / │ op-config-store / op-process-io / op-acp / op-smoke / ... ├── packages/ Пространство веб-SDK (Bun) │ ├── op-web-sdk/ SDK веб-просмотрщика `.op` только для чтения (обёртка wasm-бандла) │ ├── op-web-sdk-react/ Адаптер React 19 │ └── op-web-sdk-vue/ Адаптер Vue 3 ├── vendor/ Вендоренные подсистемы (git submodules) │ ├── jian/ Инструментарий виджетов/рендеринга/событий Skia │ ├── casement/ Форк winit │ └── agent/ Кроссплатформенный Rust-рантайм агентов (agent-rs) └── .githooks/ Pre-commit синхронизация версий из имени ветки ``` ## Горячие клавиши | Клавиша | Действие | | Клавиша | Действие | | ----------- | ------------------ | --- | ------------- | ---------------------------------------- | | `V` | Выбор | | `Cmd+S` | Сохранить | | `R` | Прямоугольник | | `Cmd+Z` | Отменить | | `O` | Эллипс | | `Cmd+Shift+Z` | Повторить | | `L` | Линия | | `Cmd+C/X/V/D` | Копировать/Вырезать/Вставить/Дублировать | | `T` | Текст | | `Cmd+G` | Сгруппировать | | `F` | Frame | | `Cmd+Shift+G` | Разгруппировать | | `P` | Инструмент пера | | `Cmd+Shift+P` | Экспорт (PNG/JPG/WEBP/PDF) | | `H` | Рука (панорама) | | `Cmd+Shift+C` | Панель кода | | `Del` | Удалить | | `Cmd+Shift+V` | Панель переменных | | `[ / ]` | Изменить порядок | | `Cmd+J` | AI-чат | | Стрелки | Сдвиг на 1px | | `Cmd+,` | Настройки агента | | `Cmd+Alt+U` | Булево объединение | | `Cmd+Alt+S` | Булево вычитание | | `Cmd+Alt+I` | Булево пересечение | | `Cmd+Shift+S` | Сохранить как | ## Скрипты ```bash # Product (Rust — run from the repo root) cargo build --workspace # Build all crates (add --release for prod) cargo test --workspace # Run all tests cargo check --workspace # Type check cargo clippy --workspace --all-targets -- -D warnings # Lint cargo fmt --all # Format bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host) cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop) cargo run -p op-cli -- # CLI (binary: op) # Web SDK / JS tooling (run from packages/) cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets cd packages && bun run bump # Sync SDK package.json versions ``` ## Участие в разработке Мы приветствуем вклад в проект! Подробности об архитектуре и стиле кода смотрите в [CLAUDE.md](./CLAUDE.md). 1. Сделайте форк и клонируйте репозиторий 2. Настройте синхронизацию версий: `git config core.hooksPath .githooks` 3. Создайте ветку: `git checkout -b feat/my-feature` 4. Запустите проверки: `cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings` 5. Сделайте коммит в формате [Conventional Commits](https://www.conventionalcommits.org/): `feat(canvas): add rotation snapping` 6. Откройте PR в ветку `main` ## Дорожная карта - [x] Переменные и токены дизайна с CSS-синхронизацией - [x] Система компонентов (экземпляры и переопределения) - [x] Генерация дизайна с помощью AI и оркестратора - [x] Интеграция с MCP-сервером и послойный рабочий процесс - [x] Поддержка нескольких страниц - [x] Импорт Figma `.fig` - [x] Булевы операции (объединение, вычитание, пересечение) - [x] Мультимодельные профили возможностей - [x] Реструктуризация в монорепозиторий с переиспользуемыми пакетами - [x] CLI-инструмент (`op`) для управления из терминала - [x] Встроенный SDK AI-агента с поддержкой нескольких провайдеров - [x] i18n — 15 языков - [x] Интеграция с Git (клон, ветки, push/pull, трёхстороннее слияние в режиме папки) - [x] Растровый экспорт холста (PNG / JPEG / WEBP / PDF) - [ ] Совместное редактирование - [ ] Система плагинов ## Участники ## Спонсоры OpenPencil бесплатен и open source. Разработка финансируется теми, кому он полезен — спасибо, что держите холст открытым. Спасибо **[MrQyun](https://github.com/mrqyun)** — хотите видеть здесь своё имя? **[Стать спонсором →](https://github.com/sponsors/ZSeven-W)** ## Сообщество Присоединяйтесь к нашему Discord — Задавайте вопросы, делитесь дизайнами, предлагайте функции. ## Star History ## Оценки [](https://mseep.ai/app/zseven-w-openpencil) ## Лицензия [MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W