M3E Canvas — набрасываем экраны Material 3 Expressive и получаем промпт для ИИ

M3E Canvas — браузерный редактор, в котором экран для Android можно собрать из готовых элементов интерфейса, а потом превратить в текстовый промпт. Этот промпт вставляется в Claude Code, Codex, Gemini CLI или Cursor. Дальше ИИ-инструмент пишет по нему приложение. Проект написан на TypeScript, построен на Next.js и React, работает без сервера и распространяется под лицензией MIT. На GitHub у него больше восьми тысяч звёзд.

Зачем это нужно

Привычный вайб-кодинг начинается со слов: «сделай экран со списком рецептов». Модель выдаёт нечто похожее на задуманное, вы правите руками. Через три-четыре итерации половина времени уходит на споры об отступах и выравнивании.

M3E Canvas меняет порядок шагов. Сначала вы рисуете: кладёте кнопки, карточки и списки на холст, соединяете экраны стрелками, проверяете результат в предпросмотре. И только потом нажимаете «скопировать промпт». Описанию предшествует картинка, которую вы нарисовали сами.

При этом инструмент не пытается быть Figma. Это одна страница приложения. На ней есть ровно то, что нужно для мобильного экрана, и кнопка, которая делает главное дело.

Как всё устроено

Страница работает целиком в браузере: сервера у проекта нет, вся работа хранится в localStorage. Деплой — это статическая выгрузка Next.js в папку out, которую GitHub Actions выкладывает на GitHub Pages при каждом пуше в ветку main. Открыть можно и живую версию.

Отсюда важный вывод про ключи: браузер не пересылает их никому, кроме выбранного вами провайдера. Промежуточного сервера между вами и моделью нет.

Что можно нарисовать

Палитра компонентов закрывает почти весь стандартный экран Android: кнопки, кнопки-иконки, FAB, составные кнопки, меню на FAB, чипы, верхние панели, панели навигации, всплывающие панели инструментов, вкладки, поисковые панели, карточки, списки, диалоги, всплывающие уведомления, текстовые поля, выпадающие списки, переключатели, флажки, radio-кнопки, ползунки, текст, изображения, заглушки для камеры и карты, значки, блоки и разделители. Всё это рисуется по правилам Material 3 Expressive.

Отдельные детали, ради которых инструмент и затевался:

• Магнитное соединение. Два рядом стоящих элемента списка или две кнопки сами сливаются в одну группу, а углы в месте стыка сглаживаются. Раскладка получается ровно такой, какую задаёт сам Material 3 Expressive.
• Настоящая анимация загрузки. Фигурный индикатор загрузки, который меняет форму, перенесён прямо из material-components-android, плюс волнистые линейный и круговой индикаторы прогресса.
• Два размера экрана. Телефон 412×892 и десколтоп 1280×800 переключаются прямо на ярлыке экрана. Полосы растягиваются, панель навигации превращается в боковую рейку, а на телефоне рейка снова становится полосой. Оба размера можно держать в одном макете: экраны с одинаковым именем попадают в промпт как один экран в двух ширинах.
• Переходы по тапу и по свайпу. Любому кликабельному элементу, иконке в верхней панели или пункту навигации можно назначить экран-цель либо «назад», а также способ перехода: свайп с любой из четырёх сторон, затухание, разворачивание или ничего. На холсте появляются стрелки. В предпросмотре по ним можно пройти как по готовому приложению, а «назад» проигрывает переход в обратную сторону. Для свайпов то же самое: экран следует за пальцем, обратный свайп возвращает назад.
• Кнопки-переключатели. Любая кнопка может менять иконку и стиль при нажатии.
• Слои и группы. Панель слоёв показывает порядок перекрытия для каждого экрана. Строку можно перетащить, и элемент уедет вперёд или назад по порядку отрисовки. Несколько элементов можно объединить в группу — тогда они двигаются вместе и сохраняют взаимное перекрытие. Промпт отдельно проговаривает, что какие-то элементы лежат друг на друге, а какие-то стоят в ряд, чтобы сгенерированная вёрстка не разъехалась.

Тема: четыре оси Material 3 Expressive

Всё оформление собирается в одной панели по четырём осям, которые сам Material и описывает именно так:

Промпт на выходе

Готовый дизайн — или отдельный его экран — превращается в короткое текстовое описание на японском, английском, китайском или корейском. В текст попадают и ваши собственные заметки о том, что делает каждый элемент. Целевая платформа выбирается: Android (по умолчанию) или веб, и промпт сразу просит подходящий стек.

Кнопка «Разложить»

Одна кнопка с английским названием Tidy приводит макет в порядок: полосы прижимаются к краям, FAB уезжает в угол, соседние элементы списка и кнопки сливаются в группы, а всё остальное складывается на отступах 16dp. Повторное нажатие возвращает всё как было. Это экономит кучу времени на выравнивании вручную.

Свой ИИ-помощник

Помощник включается по желанию и работает на вашем ключе — OpenAI, Claude, Gemini или DeepSeek. Он пишет заметку о поведении элемента или описание экрана на языке интерфейса. Каждую переписанную фразу можно отменить. Ключ хранится только в браузере, запрос уходит провайдеру напрямую.

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

Ссылки и черновики от агента

Отдельная функция в бета-версии — обмен результатом. Можно скопировать ссылку, которая откроет ваш дизайн на холсте у другого человека. А можно скопировать инструкцию для Claude Code, Codex или другого ИИ-агента: он прочитает agent.md, нарисует то, что вы описали, и ответит такой же ссылкой.

Под капотом это простой приём. Дизайн — один JSON-документ, который сжимается и кодируется прямо в адрес ссылки, поэтому сервер для хранения не нужен. В agent.md описано, как собрать ссылку вручную:

import sys, zlib, base64
data = open(sys.argv[1], "rb").read()
c = zlib.compressobj(9, zlib.DEFLATED, -15)          # raw deflate, no header
raw = c.compress(data) + c.flush()
print("https://lnkiai.github.io/m3e-canvas/#docz=" + base64.urlsafe_b64encode(raw).decode().rstrip("="))

Агент, который пишет такой документ, расставляет экраны по координатам на холсте. Элементы списка и кнопки собираются в группы с осью x или y, а переходы описываются полем action. Документ советуют держать в пределах 100 КБ. Картинки задаются ссылкой на файл в интернете, а не данными внутри.

Раскладка по клавиатуре

Устройство репозитория

Проект небольшой и разложен по назначению файлов. Вкладчикам это полезно знать — CONTRIBUTING.md описывает, где что менять:

Добавление нового элемента затрагивает все эти места сразу, а тесты лежат рядом с кодом в файлах *.test.ts и запускаются на Vitest.

Локальный запуск и деплой

Нужен Node 22.12 или новее.

npm install
npm run dev        # http://localhost:3000
npm run typecheck  # проверка типов через tsc
npm test           # юнит-тесты на Vitest
npm run build      # статическая выгрузка в ./out

Если нужно положить сайт не в корень домена, а в подпапку (например, на страницу проекта GitHub Pages), задайте при сборке переменную NEXT_PUBLIC_BASE_PATH с именем репозитория. Это делает workflow деплоя.

Чего пока нет

На телефоне редактор работает в урезанном виде: доступен один закреплённый экран и только кнопки — добавить кнопку, передвинуть её, поправить текст, иконку и стиль в нижней панели. Полноценный редактор с несколькими экранами рассчитан на десктопные браузеры.

Формат документа для агента помечен как бета-версия: поля могут добавляться, а существующие сохраняют смысл. Новые элементы и крупные изменения сначала обсуждаются в обсуждениях — авторы отдельно предупреждают, что словарь Material 3 Expressive и формулировки промпта настроены вручную и требуют аккуратности.

Чем пользоваться дальше

Если нарисованный экран нужно превратить в живой веб, автор рекомендует matraic/m3e — набор веб-компонентов Material 3 Expressive с привязками к React. Для веба есть и Beer CSS — та же дизайн-система, но обычный CSS-фреймворк. Иконки взяты из Material Symbols.

Лицензия — MIT. Спонсирование разработки доступно на GitHub Sponsors, и ни одна функция от него не зависит.