Дизайн без привязки к вендору.
Графический редактор с открытым исходным кодом: открывает файлы Figma, работает на вашем компьютере и позволяет вам или вашему ИИ-агенту управлять каждым слоем.
Открывайте то, что у вас уже есть
OpenPencil читает файлы .fig напрямую: страницы, компоненты, экземпляры, переменные и автораскладка приходят как редактируемые слои, а сохранить можно снова в .fig. Вставьте SVG или откройте HTML и CSS — они тоже станут слоями, расположенными так, как их располагает браузер.
Это собственный тур приложения — настоящий файл .fig. Откройте главу в слоях и пощёлкайте.
Настоящие инструменты дизайна
Автораскладка, ограничения, заливки, обводки, эффекты и типографика — с настройками там, где вы их ждёте. У компонентов есть слоты: экземпляр сохраняет дизайн и приносит своё содержимое. Всё отменяется, и ничто не ждёт сервера.
Наведите курсор на выделенную обложку и потяните за угол, чтобы скруглить его. Остальные плееры приносят свои обложки через слот Artwork.
Компоненты, которые работают
Задайте компоненту поведение — переключатель, чекбокс, слайдер, вкладки или текстовое поле, — и превью запустит его как настоящий элемент Reka UI. Варианты становятся его состояниями, а те же компоненты экспортируются в Storybook с кликабельными контролами.
Этот холст в режиме просмотра: нажмите play, потяните прогресс, включите перемешивание. Выйдите из просмотра, чтобы редактировать.
Переменные — это дизайн-токены
Цвета, отступы и шрифты хранятся в коллекциях с режимами и редактируются как токены. Экспортированный код записывает привязанные значения как CSS-переменные, поэтому в коде те же имена, что и в дизайне.
Каждый плеер читает коллекцию Theme в своём режиме. Измените значение токена — и оба последуют.
Заливки, которые движутся
Шейдер — такая же заливка, как любая другая: выберите его в палитре заливок, складывайте эффекты, крутите их ползунки или вставьте пресет с shaders.com. Файлы хранят его неподвижный кадр, поэтому открываются где угодно, а в режиме просмотра он играет.
Этот холст в режиме просмотра, поэтому шейдеры движутся. Выйдите из просмотра, выделите квадрат и откройте его заливку.
Линтинг
OpenPencil проверяет макет по ходу работы: контраст, слишком мелкий текст, имена по умолчанию, скрытые и пустые слои, лишние группы. Проблемы отмечаются на холсте, многие исправляются в один клик, а те же правила работают в CLI и для агентов.
Щёлкните метку на холсте или примените исправление из списка.
Дизайн с ИИ на ваших ключах
Опишите задачу обычным языком, и агент отредактирует документ теми же инструментами, что и вы, показывая результат на холсте прямо по ходу генерации. Подключите любого провайдера со своим ключом или используйте привычного агента для программирования.
Записанный диалог проходит через настоящий цикл агента. Смотрите, как холст собирается по ходу генерации.
Работает с
- Claude Code
- Cursor
- Windsurf
- Codex
- Gemini CLI
- и любым MCP-клиентом
Работайте вместе — с людьми и агентами
Поделитесь ссылкой — и все редактируют один документ, напрямую между участниками, с живыми курсорами, режимом следования, комментариями, прикреплёнными к слоям, и голосовыми звонками. ИИ-агенты подключаются так же: все в комнате видят, как они строят, пока идёт поток.
Оба экрана ваши. Перетащите слой на одном и посмотрите, как он движется на другом, а потом попросите агента.
От дизайна к коду
Любое выделение — это компонент Vue или React, с вариантами в виде props и Reka UI или Radix за интерактивными, либо HTML, Tailwind и design JSX с переменными в виде токенов. Компоненты экспортируются как истории Storybook, а design JSX остаётся связанным с холстом: измените его — и холст последует.
Переключитесь на React, HTML или design JSX либо выделите другой слой.
Автоматизируйте всё
CLI openpencil работает с файлом без запущенного приложения или управляет открытым приложением. Изучайте документ, делайте запросы через XPath, проверяйте линтером, экспортируйте или выполняйте код плагинов Figma через eval. Сервер MCP даёт агентам те же возможности через stdio или HTTP.
Запустите команду и следите за холстом.
Команд CLI: 24
- analyze
- convert
- diff
- documents
- eval
- export
- find
- fonts
- formats
- import
- info
- libraries
- lint
- node
- pages
- query
- redo
- selection
- settings
- tokens
- tool
- tree
- undo
- variables
Инструментов MCP: 122
Создание, стилизация, раскладка, инспекция и экспорт. Каждый инструмент доступен и встроенному агенту.
Встройте в свой продукт
OpenPencil — это не только приложение, но и набор инструментов: движок, не зависящий от фреймворка, headless Vue SDK и отдельные пакеты для графа сцены и форматов файлов. Встройте холст в свой продукт, рендерите и проверяйте макеты в CI или соберите другой редактор на том же движке. Каждый холст на этой странице — это тот самый SDK, работающий внутри сайта документации.
Кода рядом с холстом достаточно, чтобы подключить такой же.
Ваши файлы остаются вашими
- Сначала локально
- Документы — это файлы на вашем диске. Без аккаунта, без сервера, без интернета.
- Ваше хранилище
- Синхронизируйте через собственный S3-совместимый бакет, когда это нужно.
- Открытые форматы
- Экспорт в .fig, PDF, PPTX, SVG, HTML и JSX. Уйти можно в любой момент.
- Лицензия MIT
- Редактор, движок рендеринга, кодек .fig и CLI.
OpenPencil Cloud
Рабочее пространство вашей команды, которое мы размещаем за вас. Все редактируют одни и те же файлы в реальном времени, делятся ими по ссылке и проектируют вместе с ИИ — ничего не нужно устанавливать и поддерживать. Файлы остаются открытыми: экспортируйте их в .fig когда угодно.
OpenPencil Cloud оплачивается в $OPENPENCIL — места, живая синхронизация, общие библиотеки и ИИ идут из одного баланса токенов. Оплата откроется вместе с адресом контракта в полосе $OPENPENCIL.
- Синхронизация команды в реальном времени
- Каждое изменение сразу видят все участники, на любом устройстве.
- Ссылки и комментарии
- Отправьте ссылку на ревью и обсуждайте макет прямо на холсте.
- Командные библиотеки
- Публикуйте компоненты, стили и токены один раз и используйте их в любом файле.
- ИИ без своих ключей
- Агенты проектируют вместе с вами, без управления API-ключами.
- SSO и администрирование
- Единый вход, роли и контроль над тем, кто что видит.
Планы
- Выпущено
Интерактивные компоненты и превью
Переменные как дизайн-токены
Линтинг с исправлением в один клик
ИИ-агенты как участники, с режимом следования
Отмена, повторная генерация и правка ходов ИИ
Код, связанный со слоями
Визуальный diff и патчи
Комментарии и голосовые звонки в общих комнатах
Компоненты Vue и React во вкладке «Код»
Импорт SVG и HTML как редактируемых слоёв
Заливки шейдерами
Дизайн-токены W3C
Тур по редактору
Списки и стили для любого фрагмента текста
- Сейчас
Storybook из настоящих компонентов
Истории на Reka UI для Vue и Radix UI для React.
Создание компонентов
Быстрее правка вариантов и выделение внутри компонентов.
- Далее
OpenPencil на своём сервере
Всё рабочее пространство внутри вашей сети: синхронизация, совместный доступ, комментарии и командные библиотеки без отправки файлов кому-либо ещё.
- Ваше хранилище
- Документы остаются в вашем бакете, в вашем регионе.
- Ваша авторизация
- Вход через вашего провайдера OIDC или SSO, с ролями.
- Ваша сеть
- Ретранслятор совместной работы, который работает за вашим файрволом.
- Ваше сопровождение
- Пошаговое развёртывание, обновления, резервные копии и сроки хранения.
OpenPencil Cloud
Облачное пространство для команд: синхронизация в реальном времени, общий доступ, библиотеки и ИИ без своей инфраструктуры.
OpenPencil Cloud оплачивается в $OPENPENCIL — места, живая синхронизация, общие библиотеки и ИИ идут из одного баланса токенов. Оплата откроется вместе с адресом контракта в полосе $OPENPENCIL.
История версий
Автоматические снимки, именованные контрольные точки и восстановление.
- Позже
Управляемые дизайн-системы
Предложение, ревью, публикация и миграция.
Встраиваемый редактор
Перенесите редактор с этой страницы в свой продукт.
Токен $OPENPENCIL
OpenPencil — открытый исходный код, но сеть, на которой он работает, не бесплатна. Ходы ИИ, облачные рендеры и реестр плагинов — платные рельсы, и $OPENPENCIL — единственная валюта, которой за них платят. Запуск на Solana.
Скоро — запуск на Solana- Ходы ИИ и облачные рендеры
- Каждая платная задача в OpenPencil Cloud — ходы ИИ, headless-рендеры, экспорт — оценивается и оплачивается в $OPENPENCIL. Без фиатной оплаты и лицензий на место.
- Рынок плагинов и шаблонов
- Плагины, наборы иконок и шаблоны документов рассчитываются в $OPENPENCIL: покупатель платит токеном, автор получает его on-chain.
- Стейкинг для управляемых библиотек
- Стейкайте $OPENPENCIL, чтобы открыть управляемые дизайн-системы: процессы ревью и публикации, аудит, общие библиотеки команды.
- Комиссии выкупают токен
- Все комиссии сети идут на on-chain выкуп $OPENPENCIL — использование редактора указывает на токен, который за него платит.
Solana · токен SPL. Запуск совсем скоро — это не предложение и не ценная бумага; $OPENPENCIL оплачивает использование сети. Адрес контракта появится в полосе выше в день запуска.