GitHub-радар

Нарисуй свой интерфейс, получи вайб кода — M3E Canvas

Используй M3E Canvas, чтобы визуально создавать экраны в стиле Material 3 Expressive, связывать их анимациями по тапу/свайпу (slide, fade, expand) и генерировать описание на естественном языке, которое твой AI-генератор кода сможет использовать для создания настоящего приложения.

01lnkiai/m3e-canvas 318TypeScript

M3E Canvas — это визуальный редактор интерфейсов, который помогает создавать экраны Material 3 Expressive с помощью компонентов drag-and-drop, таких как кнопки, карточки, нав-бары, диалоги, поля ввода текста и так далее. Он также позволяет связывать экраны между собой анимациями по тапу/свайпу (slide, fade, expand) и описывать навигационный флоу, проходя по экранам тапами. Бэкенд-база данных не нужна — данные хранятся в localStorage, и приложение полностью клиентское (установка не требуется). Промпты можно генерировать на английском, японском и китайском. Загляни в живую версию приложения: lnkiai.github.io/m3e-canvas/. Пользуйся этим инструментом свободно, клонировать не обязательно.

Зачем это вайб-кодеру

Описывать макеты интерфейса — долго и чревато ошибками, ведь агенту приходится строить догадки насчёт размеров, иерархии, навигации и так далее. Вместо этого потрать тридцать секунд на то, чтобы нарисовать интерфейс и сгенерировать точное и понятное описание на естественном языке, которое агент поймёт без дополнительных уточнений.

Как поставить

Скопируйте и отправьте своему агенту — Claude Code, Codex, любому:

Открой https://lnkiai.github.io/m3e-canvas/ — это браузерный конструктор экранов. Набросай в нём простое приложение из 2–3 экранов, соедини их переходами и скопируй сгенерированный промпт на русском. Покажи мне результирующий промпт.

Запустится прямо в браузере — ничего устанавливать не нужно.

Открыть на GitHub