OpenPencil — бесплатный конкурент Figma, который превращает дизайн в код и понимает AI-команды
За последние годы мы привыкли воспринимать дизайн-файлы как закрытые артефакты: открыть можно только в нужном редакторе, автоматизировать сложно, а интеграция с AI обычно ограничивается генерацией картинок.
Но появляется новое поколение инструментов, где дизайн рассматривается не как изображение, а как структура данных.
Именно таким проектом стал OpenPencil — open-source редактор, который уже собрал более 6200 звёзд на GitHub и предлагает довольно необычный взгляд на работу с дизайном.
Чем он отличается от привычных редакторов
Главная идея OpenPencil — представлять дизайн как дерево узлов, аналогично DOM в браузере. Это позволяет не только рисовать интерфейсы, но и программно работать с ними через CLI, AI-агентов и скрипты.
Возможности проекта:
✅ Нативно открывает файлы Figma (.fig)
✅ Работает в браузере, macOS, Windows и Linux
✅ Весит около 7 МБ
✅ Полностью open-source (MIT License)
✅ Поддерживает совместную работу через WebRTC без собственного сервера
✅ Не требует отправки файлов в облако — всё может работать локально
AI внутри редактора
Самая интересная часть — встроенный AI Assistant.
Вместо ручного редактирования можно писать команды на естественном языке:
Добавь тень 16px всем кнопкам
Создай карточку для тёмной темы
Экспортируй все фреймы в 2x
По документации проект предоставляет более 90 AI-инструментов для работы с объектами, стилями, Auto Layout, экспортом и анализом дизайн-систем.
При этом используется собственный API-ключ пользователя — поддерживаются OpenAI, Anthropic, Google AI, OpenRouter, MiniMax и другие провайдеры.
CLI для дизайна
Одна из самых необычных возможностей — полноценный headless CLI.
Например:
openpencil export design.fig--format png --scale2 openpencil analyze spacing design.fig--grid8
Можно:
- экспортировать ассеты в CI/CD;
- анализировать цвета и типографику;
- искать повторяющиеся компоненты;
- получать структуру документа;
- выполнять JavaScript над дизайн-файлом.
Для разработчиков это уже не просто редактор макетов, а инструмент автоматизации.
MCP и AI-агенты
Отдельного внимания заслуживает MCP-сервер.
Он позволяет подключать Claude Code, Cursor, Windsurf и другие AI-инструменты напрямую к открытому документу. AI получает доступ к десяткам инструментов для анализа и изменения дизайна.
Фактически появляется сценарий, где агент может:
- изучить дизайн;
- создать новые элементы;
- проверить консистентность интерфейса;
- подготовить экспорт ресурсов;
- внести изменения по текстовому описанию.
И всё это без ручного открытия десятков панелей.
Почему проект выглядит перспективным
OpenPencil интересен не потому, что пытается стать ещё одной заменой Figma.
Интереснее другое: проект делает дизайн программируемым.
Если раньше автоматизация заканчивалась на экспорте PNG, то теперь дизайн-файл становится объектом, которым могут управлять скрипты, CI/CD-пайплайны и AI-агенты.
Для продуктовых команд, разработчиков и AI-first компаний это может оказаться гораздо важнее очередного набора инструментов рисования.
🚀 Попробовать: https://app.openpencil.dev
📚 Полная документация и подробный разбор возможностей OpenPencil в Telegram: