Нарисовать интерфейс и отдать нейросети: как работает открытый конструктор M3E Canvas

Среди разработчиков и сторонников так называемого вайб-кодинга набирает популярность M3E Canvas — бесплатный браузерный конструктор интерфейсов с открытым исходным кодом. Инструмент решает классическую проблему работы с ИИ: вместо долгих попыток описать желаемый дизайн словами пользователь собирает экран мышкой из готовых блоков, а сервис переводит визуальный прототип в структурированный технический промпт для Cursor, Claude Code, Codex или Gemini CLI.

Дизайн по стандартам Google и живой прототип

Проект опубликован в репозитории на GitHub под свободной лицензией MIT. Вся библиотека компонентов опирается на принципы дизайн-системы Google Material 3 Expressive. На рабочее полотно можно перетаскивать кнопки, списки, карточки, диалоговые окна, поля ввода, вкладки и навигационные панели с автоматическим выравниванием и управлением слоями.

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

Локальная работа и экспорт спецификаций

Сам M3E Canvas программный код приложения не пишет — и в этом заключается его главное отличие от генераторов верстки. Программа выполняет роль архитектора: она сканирует визуальное расположение элементов, текстовые метки, связи между экранами и генерирует исчерпывающее техническое задание для автономных ИИ-кодеров с таргетингом под веб или нативный Android.

Конструктор выделяется аккуратным отношением к данным:

• Сервис полностью автономен: у него нет серверного бэкенда, системы учетных записей и трекеров;
• Вся работа и проекты сохраняются исключительно в локальной памяти браузера;
• Для генерации текстовых описаний к элементам можно подключить личный ключ API от OpenAI, Anthropic, Gemini или DeepSeek — обращения отправляются напрямую от клиента к провайдеру без посредников.

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

新しいAI機能を追加しました！🎉

デザインやUI組み立てが苦手でも、作りたいアプリを一言で伝えると画面が完成します！

また、作成したデザイン案は共有リンクで、友達やチームに配布することもできます👇️https://t.co/N3Ehb5ORjZ pic.twitter.com/HBDWqKLv7k

— いのり (@lnkiai) September 5, 2026

Опробовать редактор в действии можно без регистрации на официальной странице M3E Canvas.