Repolode
Предложить
lnkiai

lnkiai/m3e-canvas

Браузерный скетчпад для экранов приложений на Material 3 Expressive, который превращает макет в промпт для AI-инструментов разработки.

Open source альтернатива:Figma

Открыть на GitHubСайт
Звёзды
9,510
Форки
1,028
Открытые issues
9
Последний коммит
4 дня назад

Что это?

M3E Canvas — браузерный инструмент для набросков экранов приложений из компонентов Material 3 Expressive. Перетаскивайте кнопки, карточки, панели, вкладки и пикеры на экраны телефона или компьютера, связывайте экраны переходами и просматривайте сценарий, нажимая на элементы. Инструмент работает прямо в браузере, без аккаунта и сервера, и автоматически сохраняет данные локально.

Главный результат — промпт. Весь макет или отдельный экран преобразуется в краткое описание на японском, английском, китайском или корейском языке с пояснениями о назначении каждого элемента и расположении строк и сеток. Можно выбрать Android или веб, отредактировать текст, а затем вставить его в AI-инструмент разработки, например Claude Code, Codex, Gemini CLI или Cursor, чтобы сгенерировать работающее приложение.

Дополнительные AI-функции позволяют использовать собственный API key для OpenAI, Claude, Gemini или DeepSeek, чтобы создавать черновики дизайна или писать заметки. Запросы отправляются провайдеру напрямую из браузера. Проект представляет собой статическую сборку Next.js на React и TypeScript и распространяется по лицензии MIT.

Ключевые возможности

  • 01Перетаскивайте настоящие компоненты Material 3 Expressive на экраны телефона или компьютера; они выравниваются по сетке с шагом 4dp.
  • 02Связывайте элементы с другими экранами переходами с выездом, затуханием или раскрытием и просматривайте сценарий.
  • 03Создавайте описание макета на одном из четырёх языков для Android или веба — для AI-инструментов разработки.
  • 04Настраивайте цвета темы, форму, типографику и светлый или тёмный режим в одной панели.
  • 05Используйте дополнительные AI-функции со своим API key для OpenAI, Claude, Gemini или DeepSeek.
  • 06Делитесь макетом по ссылке; данные автоматически сохраняются в браузере.

Сценарии использования

  • Набросать сценарий экранов приложения, прежде чем передать его AI-агенту для разработки.
  • Создать прототип макета на Material 3 для мобильного или веб-проекта без лицензии на инструмент для дизайна.
  • Объяснить разработчикам идею интерфейса с помощью кликабельного сценария и текстового описания.
  • Подобрать палитры темы и изучить светлые или тёмные варианты интерфейса на Material 3.

Быстрый старт

  1. 1

    Установите зависимости

    npm install
  2. 2

    Запустите сервер разработки на localhost:3000

    npm run dev
  3. 3

    Соберите статический экспорт в ./out (необязательно)

    npm run build

Что важно знать

  • Для локального запуска нужны Node.js и npm, чтобы установить и собрать приложение Next.js.
  • Для функций ИИ-помощника требуется собственный API-ключ OpenAI, Claude, Gemini или DeepSeek.

Темы

#material-design#design-tool#prompt#vibe-coding#react#typescript#ui-prototyping#material-3-expressive#material3#nextjs

Частые вопросы

Что такое m3e-canvas?
Браузерный скетчпад для экранов приложений на Material 3 Expressive, который превращает макет в промпт для AI-инструментов разработки. M3E Canvas — браузерный инструмент для набросков экранов приложений из компонентов Material 3 Expressive. Перетаскивайте кнопки, карточки, панели, вкладки и пикеры на экраны телефона или компьютера, связывайте экраны переходами и просматривайте сценарий, нажимая на элементы. Инструмент работает прямо в браузере, без аккаунта и сервера, и автоматически сохраняет данные локально.
m3e-canvas можно использовать бесплатно? Какая у него лицензия?
m3e-canvas распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
m3e-canvas всё ещё поддерживается?
Активно поддерживается. Последний коммит в m3e-canvas — 16 окт. 2026 г..
Для чего можно использовать m3e-canvas?
Набросать сценарий экранов приложения, прежде чем передать его AI-агенту для разработки. Создать прототип макета на Material 3 для мобильного или веб-проекта без лицензии на инструмент для дизайна. Объяснить разработчикам идею интерфейса с помощью кликабельного сценария и текстового описания. Подобрать палитры темы и изучить светлые или тёмные варианты интерфейса на Material 3.
Как установить m3e-canvas?
Установите зависимости: npm install Запустите сервер разработки на localhost:3000: npm run dev Соберите статический экспорт в ./out (необязательно): npm run build
Где скачать m3e-canvas?
Исходный код и инструкции по установке — на GitHub: https://github.com/lnkiai/m3e-canvas

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты