M3E Canvas

在浏览器中绘制 Material 3 Expressive 界面，把屏幕连接起来、点击体验，并复制一段提示词给你的 AI 编程工具。

日文版 · 中文版 · 打开应用

它能做什么

• 拖放组件 – 按钮、图标按钮、FAB、拆分按钮、FAB 菜单、标签片、应用栏、导航栏、悬浮工具栏、标签页、搜索栏、卡片、列表、对话框、消息条、文本输入框、开关、复选框、单选按钮、滑块、文本、图片、徽标、容器框和分割线，全部按 Material 3 Expressive 风格绘制。
• 磁吸连接 – 把两个按钮或列表项靠近，它们会融合成一个相连的组，圆角随之软化衔接。
• 真正的 M3 Expressive 加载动画 – 形状渐变的 Loading Indicator（移植自 material-components-android）以及波浪形线性／圆形进度指示器。
• 手机屏幕 – 想加多少个屏幕都可以，可以为屏幕命名、选择背景，拖动屏幕即可整体移动其上的内容。
• 点击跳转 – 给任意可点击组件、应用栏图标或导航栏项目设置目标屏幕（或“返回”）和过渡动画：从四个方向滑入、淡入、放大或无动画。画布上会显示流程箭头，预览中可以真实点击跳转，返回时会反向播放过渡。
• 滑动跳转 – 一个屏幕可以设置在左／右／上／下滑动时打开另一个屏幕。预览中屏幕会跟随手指移动，反向滑动即可返回。
• 切换按钮 – 任何按钮都可以设置为点击切换，开启时改变其图标和样式。
• 图层与编组 – 图层面板列出每个屏幕的层叠顺序，可拖动或用箭头调整前后；多选组件后可编组，保持叠放关系并整体移动。提示词会明确描述叠放和横向排列，确保生成的布局不走样。
• 主题 – 在一个面板中调整 M3 Expressive 的四个维度。颜色：七套预设，或用一个基准色生成完整的 Material 3 配色方案并微调，支持浅色／深色、三档对比度和动态取色（跟随手机壁纸）。形状：一次性为所有组件设置方形、圆角或全圆角。字体：Roboto、Roboto Flex、Roboto Serif 或系统字体，并提供强调样式。动效：标准或富有表现力的弹簧方案，同时驱动预览过渡。
• 提示词输出 – 整个设计（或单个屏幕）可转化为简洁的自然语言提示词，支持日文、英文或中文，并包含你为每个组件写的用途说明。
• 导出 – 复制提示词，或将屏幕保存为 PNG。
• 对齐辅助线、撤销/重做、键盘快捷键、七套配色主题、组件面板中的收藏栏，所有内容都自动保存在浏览器中。
• 手机友好 – 在手机上是一个固定屏幕、仅按钮的简易编辑器：点加号添加按钮，点按钮移动位置，并在底部面板中编辑文字、图标和样式。完整的多屏幕编辑器面向桌面浏览器。

预览：点击组件，相连的屏幕随即滑入。

提示词：整个设计化为一份简洁的需求说明，支持日文或英文。

_{手机版：单屏幕、仅按钮，在底部面板中编辑。}

键盘快捷键

开发

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

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

致谢

• Loading indicator 的形状与动画模型：material-components-android（Apache-2.0），经 Aler1x/m3-loading-indicator。详见 NOTICE。
• 图标：Material Symbols（Apache-2.0）。字体从 Google Fonts 加载。

相关项目

• matraic/m3e – 以 Lit web 组件实现的 Material 3 Expressive（MIT），附带 React 绑定和图标包。适合作为在此绘制的界面的最终落地家园。

许可证

MIT © lnkiai

日文版

这是一款在浏览器中拼装 Material 3 Expressive 界面、把屏幕相互连接、点击验证，并直接生成 AI 编程用提示词的工具。

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

功能

• 拖放组件 – 按钮、图标按钮、FAB、拆分按钮、FAB 菜单、标签片、应用栏、导航栏、悬浮工具栏、标签页、搜索栏、卡片、列表、对话框、消息条、文本输入框、开关、复选框、单选按钮、滑块、文本、图片、徽标、容器框和分割线。
• 磁吸连接 – 把按钮或列表项靠近，它们会吸附成一个组，圆角随之融合。
• 真正的 M3 Expressive 加载动画 – 形状渐变的 Loading Indicator（移植自 Android 实现）以及波浪形线性／圆形进度条。
• 手机屏幕 – 屏幕想加多少张都可以，可命名、设置背景色，拖动屏幕可整体移动。
• 点击跳转 – 为组件、应用栏图标或导航栏项目设置目标屏幕（或“返回”）和过渡：上下左右四个方向滑入，另有淡入／放大／无动画。画布上显示箭头，预览中可真实点击验证，返回时过渡反向播放。
• 滑动跳转 – 屏幕可设置左右上下滑动的目标。预览中屏幕跟随手指移动，反向滑动即返回。
• 切换按钮 – 按钮可设为点击切换开／关，并可指定开启时的图标与样式。
• 图层与编组 – 通过图层面板查看各屏幕的叠放顺序，可拖动或用箭头调整前后；多选编组后保持叠放关系整体移动。提示词会明确写出叠放与横排，生成的布局不易走样。
• 主题 – 在一个面板中调整 M3 Expressive 的四个维度。颜色：7 种预设或由单一基准色生成整套 Material 3 配色并可微调，支持浅色／深色、三档对比度、跟随壁纸的动态取色。形状：可一次性将所有组件圆角切换为方形／标准／全圆。字体：Roboto、Roboto Flex、Roboto Serif 或系统字体，附带强调样式。动效：标准／富有表现力的弹簧方案，并同步作用于预览过渡。
• 提示词输出 – 整个设计或单个屏幕可生成简洁的日文、英文或中文提示词，并包含为每个组件写的“行为”备注。
• 导出 – 复制提示词、将屏幕保存为 PNG。
• 对齐辅助线、撤销/重做、键盘快捷键、7 套配色主题、收藏组件。工作内容自动保存在浏览器中。
• 手机也能用 – 手机上是单屏幕固定、仅按钮的编辑器：点加号添加按钮，点按钮移动，在底部面板中编辑文字、图标和样式。多屏幕完整功能请使用电脑浏览器。

开发

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。

许可证

MIT © lnkiai

中文

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

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

功能

• 拖放组件 – 按钮、图标按钮、FAB、拆分按钮、FAB 菜单、标签片、应用栏、导航栏、悬浮工具栏、标签页、搜索栏、卡片、列表、对话框、消息条、文本输入框、开关、复选框、单选按钮、滑块、文本、图片、徽标、容器框和分割线，全部按 Material 3 Expressive 绘制。
• 磁吸连接 – 把两个按钮或列表项靠近，它们会合并成一个相连的组，圆角随之融合。
• 真正的 M3 Expressive 加载动画 – 形状变化的 Loading Indicator（移植自 material-components-android）以及波浪形的线性／圆形进度条。
• 手机屏幕 – 想加多少个屏幕都可以，为它们命名、选择背景，拖动屏幕即可整体移动。
• 点击跳转 – 给任意可点击的组件、应用栏图标或导航栏项目设置目标屏幕（或“返回”）和过渡：从四个方向滑入、淡入、放大或无动画。画布上会显示流程箭头，预览中可以真的点击跳转，返回时反向播放过渡。
• 滑动跳转 – 屏幕可以设置左右上下滑动的目标。预览中屏幕会跟随手指移动。
• 切换按钮 – 任何按钮都可以做成点击切换的按钮，开启时改变文字、图标和样式。
• 图层与编组 – 图层面板显示每个屏幕的层叠顺序，可拖动或用箭头调整前后；多选后可编组，保持叠放关系并一起移动。提示词会明确写出叠放和横向排列，让生成的布局不走样。
• 主题 – 在一个面板里调整 M3 Expressive 的四个维度。配色：七套预设，或用一个基准色生成整套 Material 3 配色并微调，支持浅色／深色、三档对比度和动态配色（跟随手机壁纸）。形状：一次切换所有组件的圆角（方形／圆角／全圆）。字体：Roboto、Roboto Flex、Roboto Serif 或系统字体，并可开启强调样式。动效：标准或富有表现力的弹簧方案，同时作用于预览过渡。
• 提示词输出 – 整个设计（或单个屏幕）会变成简洁的自然语言提示词，支持日文、英文和中文，并包含你为每个组件写的行为说明。
• 导出 – 复制提示词，或把屏幕保存为 PNG。
• 对齐辅助线、撤销／重做、键盘快捷键、收藏组件，所有内容自动保存在浏览器中。
• 手机也能用 – 在手机上是一个固定屏幕、只有按钮的简易编辑器：点加号添加按钮，点按钮移动，在底部面板里编辑文字、图标和样式。多屏幕的完整功能请在电脑浏览器中使用。

开发

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。

许可证

MIT © lnkiai