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

在 M3E Canvas 中拼出食谱应用 Pantry、点击浏览各屏幕、复制提示词、由终端里的 Claude Code 构建，最后成品应用在手机上运行

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

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

使用方式


拼装把组件拖到手机或桌面屏幕上。组件会彼此吸附，并对齐到 4dp 网格。	点一点试试把组件连到目标屏幕，按下预览即可连同过渡动画一起试用流程。	复制提示词整个设计会变成你所选语言的简短说明。粘贴到 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](public/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](CONTRIBUTING.md)。提问请到 [Discussions](https://github.com/lnkiai/m3e-canvas/discussions)。 ##

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

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

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

致谢 - 加载指示器的形状与动画模型：[material-components-android](https://github.com/material-components/material-components-android)（Apache-2.0），经由 [Aler1x/m3-loading-indicator](https://github.com/Aler1x/m3-loading-indicator)。详见 `NOTICE`。 - 图标：[Material Symbols](https://fonts.google.com/icons)（Apache-2.0）。字体从 Google Fonts 加载。 ##

相关项目 - [matraic/m3e](https://github.com/matraic/m3e) – 以 Lit Web Components 实现的 Material 3 Expressive（MIT），附带 React 绑定和图标包。很适合用来实现你在这里画的界面。 - [Beer CSS](https://www.beercss.com/) – 纯 CSS 的 Material Design 3 框架（MIT）。用 Web 实现草图的另一种选择。 ##

联系方式合作、媒体采访等不适合发 Issue 的事宜，请通过以下方式联系：

真正的 M3 Expressive 组件按钮、FAB、各种栏、标签页、卡片、列表、底部面板、选择器、轮播、加载指示器等等。每个组件都有自己的面板，可设置文字、样式、尺寸以及点击后的行为。	屏幕与流程手机和桌面屏幕、可以滚动的长屏幕、通过点击或滑动以你选择的过渡打开其他屏幕，整个流程用箭头一目了然。
一处调整主题配色、形状、字体和动效：七套配色或你自己的基准色、浅色与深色、三档对比度、圆角风格、字体，以及富有表现力的弹簧动效。	可选的 AI 辅助使用自己的密钥让 AI 起草设计或撰写说明，或者复制给编程代理的指令，让它以分享链接回复。密钥不会离开你的浏览器。

真正的 M3 Expressive 组件

屏幕与流程

一处调整主题

可选的 AI 辅助