README

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



  
  
  
  
  
  
  



  






拼出屏幕、点一点走完流程、复制提示词，让 AI 编程工具把应用做出来。（mp4）

M3E Canvas 是一个免费、开源的应用界面草图工具，用的是真正的 Material 3 Expressive 组件。它完全在浏览器中运行：无需账号、无需服务器、无需安装。你画出的界面会变成一份精确的提示词，任何接受提示词的 AI 编程工具，例如 Claude Code、Codex、Gemini CLI 或 Cursor，都能据此做出能运行的应用。



  使用方式


  
  


1. 拼装：把组件拖到手机或桌面屏幕上。组件会彼此吸附，并对齐到 4dp 网格。
2. 点一点试试：把组件连到目标屏幕，按下预览即可连同过渡动画一起试用流程。
3. 复制提示词：整个设计会变成你所选语言的简短说明。粘贴到 AI 编程工具里即可。

  主要功能


  
  


 真正的 M3 Expressive 组件：按钮、FAB、各种栏、标签页、卡片、列表、底部面板、选择器、轮播、加载指示器等等。每个组件都有自己的面板，可设置文字、样式、尺寸以及点击后的行为。

 屏幕与流程：手机和桌面屏幕、可以滚动的长屏幕、通过点击或滑动以你选择的过渡打开其他屏幕，整个流程用箭头一目了然。

 一处调整主题：配色、形状、字体和动效：七套配色或你自己的基准色、浅色与深色、三档对比度、圆角风格、字体，以及富有表现力的弹簧动效。

 可选的 AI 辅助：使用自己的密钥让 AI 起草设计或撰写说明，或者复制给编程代理的指令，让它以分享链接回复。密钥不会离开你的浏览器。


全部功能

- 组件 – 按钮、图标按钮、FAB 与扩展 FAB、FAB 菜单、拆分按钮、标签片、顶部应用栏、导航栏与侧边导航栏、悬浮工具栏、标签页、搜索栏、卡片、列表项、容器框、底部面板、对话框、消息条、文本输入框、下拉菜单、开关、复选框、单选按钮、滑块、日期与时间选择器、文本、图片、轮播、相机和地图占位符、分割线、形状变化的加载指示器和波浪形进度条。每个组件都有设置文字、样式、尺寸和对齐的面板，以及设置点击行为的触发标签页。
- 磁吸连接 – 把按钮、标签片或列表项靠近，它们会合并成一个相连的组，相接处的圆角随之融合。
- 手机与桌面屏幕 – 想加多少个屏幕都可以。在屏幕标签上可在 412×892 的手机和 1280×800 的桌面之间切换：栏会拉伸，导航栏变为侧边导航栏（切回时又变回导航栏），组件会重新排列。同名屏幕会在提示词中写成“同一个屏幕的两种宽度”。
- 可滚动的屏幕 – 把屏幕设得比设备更长，预览中正文就会在栏下方滚动。拖动底部边框上的手柄，或在屏幕面板中选择 1x 到 3x。
- 点击与滑动跳转 – 给任意可点击的组件、应用栏图标或导航项目设置目标屏幕（或“返回”）和过渡：从任意方向滑入、淡入、放大或无动画。屏幕也可以通过滑动打开其他屏幕。预览会完整播放，返回时反向播放。
- 图层与编组 – 每个屏幕都有图层面板，可调整层叠顺序；编组后保持叠放关系并一起移动，还能把选中的组件整体复制粘贴到其他屏幕。
- 主题 – 七套配色，或用一个基准色生成整套可微调的 Material 3 配色；浅色与深色、三档对比度和动态配色。一次切换所有组件的圆角（方形／圆角／全圆）。Roboto、Roboto Flex、Roboto Serif 或系统字体。标准或富有表现力的弹簧动效，同时作用于预览。
- 提示词 – 把整个设计或单个屏幕写成简洁的说明，支持日文、英文、中文和韩文，并包含你为每个组件写的说明。横向排列、叠放以及对齐的卡片网格都会写明，让生成的布局不走样。目标平台可选 Android 或 Web，复制前可手动编辑，也可以把屏幕保存为 PNG。
- 整理 – 一键把栏贴到边缘、FAB 放到角落、相邻组件连成一组，其余组件按 16dp 边距重新堆叠。再按一次即可撤销。
- AI 辅助（可选） – 填入自己的 OpenAI、Claude、Gemini 或 DeepSeek 密钥，就能用一句话起草设计，或写出组件的行为说明和屏幕说明。每次改写都可以撤销。请求直接从浏览器发送给服务商。
- 分享链接 – 复制一个能在他人画布上打开你设计的链接；也可以复制给 Claude Code、Codex 等代理的指令，代理会阅读 agent.md、画出你描述的草图，并以这样的链接回复。
- 其他 – 对齐辅助线和 4dp 网格、撤销与重做、键盘快捷键、可用键盘操作的组件面板、收藏、安装为应用，以及自动保存在浏览器中。
- 在手机上 – 一个固定屏幕、只有按钮的编辑器，在底部面板中编辑。完整功能请在电脑浏览器中使用。



  键盘

| 按键 | 操作 |
| --- | --- |
| V / H | 选择 / 抓手工具（按住 Space 平移） |
| 滚轮、Ctrl + 滚轮 | 平移、缩放 |
| + - 0 | 放大、缩小、适应窗口 |
| Ctrl+Z / Ctrl+Shift+Z | 撤销 / 重做 |
| Ctrl+C / Ctrl+V | 复制 / 粘贴组件，也可跨屏幕 |
| Ctrl+D | 复制一份 |
| Ctrl+G / Ctrl+Shift+G | 编组 / 取消编组 |
| Shift + 点击 | 加入选择 |
| 方向键（Shift = 8dp） | 微移 |
| Ctrl + 拖动 | 不吸附地移动（无辅助线、无 4dp 网格） |
| Delete | 删除组件或屏幕 |
| P | 预览 |

  本地运行

bash
npm install
npm run dev         http://localhost:3000
npm run build       静态导出到 ./out


项目以静态站点方式导出。若要部署在子路径下（例如 GitHub Pages 的项目站点），请在构建时设置 NEXT_PUBLIC_BASE_PATH=/仓库名。.github/workflows/deploy.yml 会在每次推送到 main 时完成这一步并发布到 GitHub Pages。

  参与贡献

欢迎 Bug 报告、组件请求和 PR。步骤和约定（注释用英文，所有文案提供四种语言）见 CONTRIBUTING.md。提问请到 Discussions。

  支持

M3E Canvas 免费且采用 MIT 许可证，今后也不会改变。如果它为你节省了时间，欢迎在 GitHub Sponsors 上支持开发；这些支持将用于新组件、提示词的打磨和审阅贡献所花的时间。没有任何功能因赞助而受限。



感谢支持本项目的赞助者：





  感谢

感谢每一位贡献代码、想法和审阅的人：


           


  致谢

- 加载指示器的形状与动画模型：material-components-android（Apache-2.0），经由

Top issues

Discussions