Presenta Design, созданная студией Craftwork, представляет собой не требующий регистрации инструмент для создания 3D-мокапов устройств и тизеров продуктов. Он обрабатывает все графические ресурсы непосредственно на стороне клиента с помощью Three.js, WebGL и HTML5 Canvas, исключая передачу изображений на удаленные серверы. Помимо экспорта статичных PNG, JPG или WebP, сервис генерирует WebM-видео с помощью встроенной шкалы времени камеры и предоставляет локальный сервер Playwright MCP для AI-агентов (Claude Code, Cursor), встраивая создание мокапов напрямую в консольный рабочий процесс.
Инженерный обзор
В отличие от традиционных облачных SaaS-сервисов, Presenta Design полностью исключает очереди рендеринга на сервере. Скриншоты обрабатываются непосредственно в памяти GPU браузера. Трехмерные трансформации рассчитываются матрицами Three.js, а интерполяции камеры (Orbit Right, Punch In, Slow Zoom Out, Scan Left to Right) кодируются в WebM прямо на клиенте. Более того, вместо внешнего REST API инструмент поставляет локальный серверный скрипт MCP на базе Playwright (presenta-mcp.mjs), что дает возможность AI-агентам собирать 3D-мокапы через headless-браузер.
Почему сервис попал в поле зрения: реальный опыт
Продуктовые команды и разработчики сталкиваются с двумя трудностями при презентации веб-приложений: ручное создание 3D-ракурсов в Figma занимает много времени, а для видеотизеров требуются ресурсоемкие программы вроде After Effects или Premiere. Большинство веб-сервисов загружают файлы в облако, что создает риски для конфиденциальности и увеличивает время ожидания. Как мы отмечали в нашем обзоре Shots.so, клиентский рендеринг решает эти проблемы, а Presenta Design развивает этот подход еще дальше.
Инструмент от Craftwork готов к работе сразу после открытия страницы без какой-либо регистрации. Дизайнеры могут перетаскивать компоненты из корпоративных UI/UX дизайн-систем на холст, проецировать их на 3D-корпуса устройств, настраивать углы падения теней и за считанные секунды экспортировать микроанимированные WebM-ролики. Самым радикальным инженерным решением стал выпуск модуля Model Context Protocol (MCP) на базе Playwright для таких AI-инструментов, как Claude Code, Codex CLI и Cursor.
Под капотом: архитектура, стек и принципы взаимодействия
Архитектура Presenta базируется на трех инженерных слоях: движке рендеринга WebGL, покадровом видеокодере и локальном headless-слое автоматизации.
- Сцена WebGL / Three.js в браузере: Скриншоты пользователя преобразуются в локальные Blob-URL и накладываются как текстуры на сетки Three.js. Корпуса устройств (iPhone, MacBook, iPad, мониторы) представляют собой низкополигональные оптимизированные 3D-модели; отражения и тени рассчитываются в реальном времени с аппаратным ускорением в контексте WebGL.
- Таймлайн камеры и экспорт WebM: Сервис не ограничен статикой. В нем доступны готовые траектории движения камеры: Orbit Right, Punch In, Slow Zoom Out и Scan Left to Right. На протяжении анимации матрицы виртуальной камеры Three.js интерполируются, а кадры HTML5 Canvas захватываются через API MediaRecorder и компилируются в поток WebM прямо в браузере.
- AI Site Shots и сервер Playwright MCP: Вместо ключей облачного API сервис предоставляет локальный скрипт Node.js (https://presenta.design/agents/presenta-mcp.mjs). Разработчики подключают инструмент к Claude Code или Cursor командой
. Сервер MCP запускает фоновую сессию Chromium через Playwright, делает скриншот указанного URL, передает его на холст Presenta и сохраняет готовый 3D-мокап на локальный диск.claude mcp add --scope user presenta -- node ~/.presenta/presenta-mcp.mjs - Оценка производительности: Команды, желающие оптимизировать время рендеринга и скорость захвата экранов, могут использовать наш анализатор скорости для аудита веса страниц, что ускоряет захват через Presenta MCP.
| Технический параметр | Архитектура Presenta Design | Традиционные облачные сервисы |
|---|---|---|
| Безопасность данных | Без отправки на сервер; локальная память Blob и WebGL | Скриншоты загружаются и обрабатываются в облаке |
| Генерация видео | Рендеринг WebM на клиенте с интерполяцией камеры | Чаще всего только статичные PNG или GIF |
| Интеграция агентов | Официальный локальный Playwright MCP (presenta-mcp.mjs) | Ограниченные REST API или внешние вебхуки |
| Модель доступа | Без регистрации (No-signup), без водяных знаков ($0) | Обязательная регистрация и лимиты freemium |
| Мин. разрешение | Ширина от 1200 px (холст блокируется на узких экранах) | Адаптивные или урезанные мобильные интерфейсы |
Когда внедрять в продакшн, а когда избегать?
Presenta Design демонстрирует высокую производительность в определенных рабочих процессах, но ее архитектура накладывает явные ограничения:
- Рекомендуемые сценарии: Быстрое создание тизеров к релизам ПО, добавление 3D-мокапов в changelog и списки обновлений, автоматическая генерация скриншотов документации через CI/CD или AI-агентов (Claude Code и др.).
- Когда избегать: Работа на экранах с шириной менее 1200 пикселей или мобильных устройствах (редактор блокируется сообщением 'Presenta needs a wider screen'). Корпоративные окружения, требующие только MP4 без возможности внешней конвертации через ffmpeg.
Архитектурная заметка Kling Digital
С точки зрения инженеров Kling Digital, ключевое конкурентное преимущество Presenta — локальный headless-сервер Playwright MCP. Подключив его к вашему CI/CD пайплайну или терминалу Cursor/Claude, вы сможете автоматически генерировать свежие 3D-мокапы при каждом фронтенд-деплое без участия дизайнера.
