m3e-canvas README

The project's README from github.com/lnkiai/m3e-canvas. As one markdown file: README.md.

M3E Canvas

Sketch Material 3 Expressive screens in the browser, link them, tap through them, and copy a prompt for your AI coding tool.

Live demo Deploy GitHub stars MIT License Sponsor Next.js React Material 3 Expressive No backend

Trendshift: #1 repository of the day

日本語 · 中文 · 한국어 · Open the app

Sketching a recipes app in M3E Canvas, changing its theme, copying the prompt, an AI coding tool building it, and the app running on Android

Sketch a recipes app, retheme it, copy the prompt, hand it to an AI coding tool, and run the result on Android. (mp4)

Works with any AI coding tool that takes a prompt, such as Claude Code, Codex, Gemini CLI or Cursor: copy the prompt, paste it into the tool, and ask for the app.

What it does

Tap-through preview
Preview: tap a part and the linked screen slides in.		 Prompt panel
Prompt: the design as a concise brief in the selected language.

Phone version
Phone: one screen, buttons only, edited in a bottom sheet.

Keyboard

Key Action
V / H Select / hand tool (hold Space to pan)
Wheel, Ctrl + wheel Pan, zoom
+ - 0 Zoom in, zoom out, fit
Ctrl+Z / Ctrl+Shift+Z Undo / redo
Ctrl+D Duplicate
Arrows (Shift = 8dp) Nudge
Ctrl + drag Move without snapping (no guides, no 4dp grid)
Delete Delete part or screen
P Preview

Develop

npm install
npm run dev        # http://localhost:3000
npm run build      # static export to ./out

The app is a static Next.js export. To host it under a sub-path (for example a GitHub Pages project site), set NEXT_PUBLIC_BASE_PATH=/your-repo at build time. .github/workflows/deploy.yml does this automatically and publishes out/ to GitHub Pages on every push to main.

Contributing

Bug reports, part requests and pull requests are welcome. CONTRIBUTING.md explains the setup, the conventions (English comments, four languages for every string) and where each kind of change lives. Questions go to Discussions.

Support

M3E Canvas is free and MIT-licensed, and stays that way. If it saves you time, you can sponsor the work on GitHub; it pays for the hours that go into new parts, the prompt, and reviewing contributions. No feature is behind sponsorship.

Thanks to the sponsors who keep this going:

Credits

See also

License

MIT © lnkiai

日本語

Material 3 Expressive の画面をブラウザで組み立てて、画面同士をつなぎ、タップして確かめ、そのまま AI コーディング用のプロンプトにするツールです。

公開版: https://lnkiai.github.io/m3e-canvas/

M3E Canvas でレシピアプリを組み、テーマを変え、プロンプトをコピーして AI コーディングツールに渡し、Android で動かすまで

レシピアプリを組み、テーマを変え、プロンプトをコピーして AI コーディングツールに渡し、できたアプリを Android で動かすまで。（mp4）

Claude Code、Codex、Gemini CLI、Cursor など、プロンプトを受け取れる AI コーディングツールならどれでも使えます。プロンプトをコピーしてツールに貼り、アプリを作ってと頼むだけです。

できること

開発

npm install
npm run dev        # http://localhost:3000
npm run build      # ./out に静的書き出し

静的サイトとして書き出す構成です。サブパス（GitHub Pages のプロジェクトサイトなど）で配信するときはビルド時に NEXT_PUBLIC_BASE_PATH=/リポジトリ名 を指定してください。.github/workflows/deploy.yml が main への push ごとにこれを行い、GitHub Pages に公開します。

貢献

バグ報告、部品のリクエスト、PR を歓迎します。手順と約束事は CONTRIBUTING.md にまとめています。質問は Discussions へどうぞ。

支援

M3E Canvas は無料で MIT ライセンスのまま続けます。時間の節約になったら、GitHub Sponsors で開発を支えてもらえると助かります。新しい部品、プロンプトの調整、貢献のレビューにかかる時間に充てます。支援の有無で使える機能は変わりません。

開発を支えてくださっているスポンサーの方々に感謝します。

ライセンス

MIT © lnkiai

中文

在浏览器中拼装 Material 3 Expressive 界面，把屏幕连起来、点一点试试，然后直接变成给 AI 编程工具的提示词。

在线版本：https://lnkiai.github.io/m3e-canvas/

在 M3E Canvas 中拼装食谱应用、更换主题、复制提示词、交给 AI 编程工具构建，最后在 Android 上运行

拼装一个食谱应用、更换主题、复制提示词、交给 AI 编程工具，然后在 Android 上运行成品。（mp4）

可配合任何接受提示词的 AI 编程工具使用，例如 Claude Code、Codex、Gemini CLI 或 Cursor：复制提示词，粘贴到工具里，让它把应用做出来。

功能

m3e-canvas (lnkiai/m3e-canvas)

Searching Database…

9.5K ·GitHub
M3e-canvas
Что это такое?M3E Canvas позволяет набрасывать экраны в стиле Material 3 Expressive прямо в браузере, связывать их и переходить между ними по нажатию, а затем превращать весь дизайн в текстовый промпт на естественном языке для инструмента ИИ-программирования.
Это дизайн-инструмент или он сам пишет код приложения?Это визуальный инструмент для набросков в браузере, а не генератор кода: он выдаёт короткий текстовый промпт с описанием вашего дизайна, который затем передаётся инструменту ИИ-программирования, например Claude Code, Codex, Gemini CLI или Cursor, чтобы тот действительно собрал приложение.
Как начать пользоваться?Откройте размещённое веб-приложение и начните перетаскивать детали на холст; чтобы запустить его локально, клонируйте репозиторий и используйте скрипты Next.js (npm run dev / npm run build), так как приложение представляет собой просто статический экспорт Next.js.
Нужен ли мне API-ключ для использования?Нет, для работы холста и вывода промпта ничего не нужно. Ключ требуется только для необязательного ИИ-помощника, где вы подставляете собственный ключ OpenAI, Claude, Gemini или DeepSeek, чтобы автоматически написать описание поведения детали или описание экрана.
Он собирает приложение за меня или только дизайн?Он только создаёт промпт и кликабельный предпросмотр; промпт нужно самостоятельно вставить в инструмент ИИ-программирования и запустить сгенерированное приложение. На телефоне доступен только упрощённый редактор одного экрана с одними кнопками вместо полноценного многоэкранного инструмента для компьютера.
Куда попадают мой дизайн и любой ИИ-ключ?Всё сохраняется только в localStorage вашего браузера; если вы используете необязательного ИИ-помощника, ваш ключ никогда не покидает браузер — запросы идут напрямую к провайдеру без промежуточного сервера.
Это бесплатно?Да, инструмент распространяется по лицензии MIT и останется бесплатным, а никакие функции не закрыты за спонсорством.
Что такое Material 3 Expressive?Это последний стиль Google из семейства Material Design 3 с более упругими формами, движением на основе пружин и расширенной системой тем; этот инструмент позволяет визуально прототипировать его до написания какого-либо кода.
Можно ли нацелиться на веб вместо Android?Да, при создании промпта можно выбрать в качестве цели Android (по умолчанию) или веб, и промпт будет составлен с запросом на соответствующий стек.
Как поделиться дизайном с кем-то?Можно скопировать ссылку для общего доступа, которая открывает ваш дизайн на холсте любого другого пользователя, или скопировать инструкцию для ИИ-черновика, по которой агент для программирования прочитает agent.md, набросает описанное вами и ответит такой ссылкой.
Что происходит, когда я перетаскиваю две кнопки близко друг к другу?Они магнитно срастаются в одну связанную группу, а углы в месте стыка сглаживаются; это группирование явно описывается в сгенерированном промпте, чтобы компоновка не терялась.
What are similar projects?onlook, ui-ux-pro-max-skill, tweakcn, vivi-music, MaterialDesign, material-ui, awesome-design-md, rubrictrail
Which topics is it in?design-tool, material3, design-tools, ui-design, vibe-coding, prompt, material-design, ai-tools, i18n, design, nextjs, local-first
Creator
lnkiai
Size
28.6 MB
Stars
9.5K
Updated
CommitOct 16
Age
1mo
Commits · 90 Days