Намалювати інтерфейс і передати нейромережі: як працює відкритий конструктор 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.