Холст pen.dev объединяет графический редактор и внешние нейросети в коде

Десять тысяч слоев, десять гигабайт растра и векторов на одном полотне — и курсор перемещается без малейшей задержки с честными шестьюдесятью кадрами в секунду. Знакомая боль любого арт-директора, когда разросшийся проект превращает рабочую вкладку в неповоротливое желе, здесь просто не предусмотрена. Команда проекта pen.dev, заручившаяся поддержкой программы a16z speedrun, показала агентскую среду проектирования, в которой привычный векторный редактор скрестили с живым кодом и автономными моделями.

Главная проблема современных дизайн-инструментов кроется в изоляции: макет существует отдельно, вёрстка — отдельно, а языковые модели до сих пор приходится кормить скриншотами. Создатели pen.dev подошли к вопросу с инженерной стороны. Они отказались от закрытых бинарных форматов в пользу собственного открытого расширения .pen, представляющего собой прозрачную схему JSON. Благодаря этому искусственный интеллект не просто угадывает пиксели по растровой картинке, а читает структуру фреймов напрямую, внося правки в разметку прямо во время вашей работы.

Движок и чистая производительность

В основу интерфейса лег специализированный графический конвейер WebGL. Он берет на себя весь рендеринг, избавляя браузер от привычных просадок при работе с тяжелым визуалом. Платформа официально рассчитана на тяжеловесные сборки: панорамирование, зум и трансформация векторных путей сохраняют плавность даже при одновременной загрузке до 10 000 слоев и общего массива контента объемом до 10 ГБ. Если верить демонстрации разработчиков, перегрузить этот холст стандартным мудбордом или дизайн-системой интернет-магазина практически невозможно.

Модели, протоколы и внешние агенты

Редактор не привязывает пользователя к одному вендору. На холст можно подключить практически любую актуальную нейросеть через собственные ключи API либо активные подписки Claude и ChatGPT. Список поддерживаемых систем внушительный:

• Claude от Anthropic
• Модели компании OpenAI
• Grok от xAI
• Gemini от Google
• Qwen от экосистемы Alibaba
• Kimi разработки Moonshot AI
• Deepseek
• Minimax

Интеграция устроена гибко. С макетами разрешено работать через встроенного виртуального помощника прямо на экране, а можно передать управление специализированным внешним агентам вроде Cursor, Claude Code, Codex, Hermes или Antigravity. Связка держится на протоколе Model Context Protocol (MCP), стандарте WebMCP или интерфейсе командной строки (CLI), причем последний позволяет запускать обработку файлов в фоновом headless-режиме без отрисовки интерфейса.

Инструментарий для реального продакшена

Нас подкупило, что pen.dev не ощущается компромиссным блокнотом для программистов: визуальная база здесь собрана основательно. Для векторной графики доступен полноценный Pen tool для построения контуров, сглаживания кривых и прямой вставки сырого SVG-кода. Работа с цветом выходит за рамки привычных заливок: помимо линейных, радиальных и угловых градиентов прямо на рабочей области можно крутить mesh-градиенты, а также накладывать Vibe Shaders — процедурные шейдеры для генерации текстур и фонов в реальном времени. Слои эффектов вроде размытия фона, теней и размытия объектов настраиваются независимо и меняются местами в произвольном порядке.

Верстка опирается на принципы Flex layout с заполнением контейнеров, подгонкой под размеры контента и абсолютным позиционированием. Сетка настраивается с точностью до полупикселя, а система прилипания аккуратно ловит края, геометрические центры и одинаковые промежутки между объектами. Для масштабируемых интерфейсов предусмотрены библиотеки компонентов, переиспользуемые символы с оверрайдами, переменные цветов, отступов и типографики, а также слоты (Component Slots) под динамическую замену содержимого. Для защиты концептов перед клиентом встроен режим презентации Slides, превращающий фреймы в структурированное слайд-шоу, а переход на платформу упрощают знакомые горячие клавиши из Figma и Sketch.

Бесшовный импорт и готовый экспорт

Перенос готовых проектов не требует ручной перерисовки с нуля. Платформа понимает исходные файлы формата .fig с полным сохранением структуры макетов, стилей и растровых исходников, поддерживает прямое копирование элементов через буфер обмена, а также умеет вытягивать страницы из сети. За это отвечают встроенный браузер и плагин для Chrome, превращающие любой живой сайт в набор редактируемых слоев. Результат работы отдается наружу в растровых форматах PNG, JPEG, WEBP с масштабированием 1x, 2x или 3x, векторе PDF, а также в чистом коде — разметке HTML с классами CSS или Tailwind.

Пожалуй, именно так и должна выглядеть естественная эволюция интерфейсных сред: вместо генерации разрозненных картинок дизайнер получает рабочее пространство, где код и вектор стали одним целым. Для совместного согласования достаточно отправить ссылку на актуальный холст коллегам. Рутина ручной верстки макетов под фронтенд окончательно превращается в пережиток прошлого.