目录

假设我们要制作一款食谱应用的界面。在首页放上搜索栏和食谱卡片，点击卡片即可进入详情页。配色采用沉稳的绿色，同时还要考虑手机端和桌面端的显示效果。

使用 M3E Canvas，就能在浏览器中搭建这些界面，连接页面跳转，最后导出为供 AI 编程工具使用的提示词。它不只是展示设计方案的工具，还能将你想做的应用结构与交互整理成指令，帮助你开始实现。

公开版可通过 GitHub Pages 使用。将提示词交给 Claude Code、Codex、Gemini CLI、Cursor 等支持接收提示词的工具，就能开始开发。本文将介绍它的功能和实际使用流程。

先放置组件，搭建界面#

开始使用时，打开公开版，将组件拖放到画布上即可。可用组件包括按钮、图标按钮、FAB、标签、应用栏、导航栏、选项卡、搜索栏、卡片、列表、对话框、文本输入框等。还有图片、相机和地图占位符，足以搭建应用的主要界面。

以食谱应用为例，可以在页面顶部放置搜索栏，下方放上分类标签，再依次排列食谱卡片。选中卡片后进入详情页，通过页面底部的按钮保存。先搭出外观，再调整组件布局和交互即可。

你可以添加任意数量的页面，并为其设置名称和背景色。通过页面标签，还能在手机端的 412×892 和桌面端的 1280×800 之间切换，非常方便。如果为同名页面分别准备两种宽度，提示词会将它们视为“同一页面的不同宽度版本”，无需把手机端和桌面端描述成两个独立应用。

页面跳转和交互也能预览#

放好组件后，就可以设置点击时的跳转目标。不仅按钮和卡片，应用栏中的图标、导航栏中的项目也可以指定跳转到其他页面，或执行“返回”。切换效果可选择从上下左右滑入、淡入淡出、缩放或无动画。

画布上会显示页面之间的箭头，方便确认从哪里跳转到哪里。在预览中，可以实际点击并测试跳转。返回时，进入页面的动画会反向播放。

你还可以为每个页面设置向左、向右、向上和向下滑动时的目标页面。预览时，页面会跟随手指移动，也可以反向滑动返回。按钮可以设为切换开关，每次点击都会在开启和关闭之间切换，还能指定开启时的图标和样式。

仅靠页面说明文字来传达这些交互，往往比想象中更难。使用 M3E Canvas，就能在同一张画布上确认外观和跳转，并逐步完善设计。

统一调整 Material 3 Expressive 主题#

主题设置面板可以集中编辑 Material 3 Expressive 的四个维度。

颜色方面，除了可以选择 7 种预设，还能指定基础色，生成 Material 3 配色方案，再调整细节。同时支持浅色与深色模式、3 档对比度，以及与壁纸配色相适应的动态颜色。

形状方面，可以统一将组件边角切换为直角、常规圆角或全圆角。字体可选择 Roboto、Roboto Flex、Roboto Serif 或系统字体。动效可在标准模式和 Expressive 模式之间切换，并会体现在预览中的页面跳转上。

如果想比较应用整体风格，又不想反复重做页面，这些设置很方便。调整颜色或形状后，不妨顺便预览一下页面之间的跳转效果。

通过图层整理和自动对齐完成细节#

对于组件相互重叠的页面，可以在图层面板中调整前后顺序。你可以拖动图层行来改变顺序，也可以展开分组或相连组件，在内部重新排序。将多个组件分组后，就能在保持重叠关系的同时一起移动。生成的提示词也会包含重叠和横向排列的信息。

不确定如何布局时，可以使用“整理”功能。它会将各类栏放到页面边缘，将 FAB 放到角落，连接相邻的按钮或列表项，并以 16dp 的间距重新堆叠其余组件。再次点击，即可恢复整理前的布局。

需要精细调整时，可以使用辅助线和吸附功能。工具还提供撤销、重做和键盘快捷键。例如，按 V 切换到选择工具，按 H 切换到抓手工具，按 P 打开预览。方向键可以移动组件，按住 Shift 时则以 8dp 为单位移动。

生成提示词，交给 AI 编程工具#

完成页面后，可以将整个设计或选中的单个页面转换为提示词。输出语言可选择日语、英语、中文或韩语。你为各组件填写的交互备注和页面说明也可以一并包含在内。实现平台可指定为 Android 或 Web，提示词会据此加入使用相应技术的指令。

操作流程很简单。

  • 在画布上放置页面和组件
  • 设置所需的页面跳转和交互
  • 调整主题与页面尺寸，并通过预览确认
  • 选择生成整个设计或目标页面的提示词，必要时手动编辑
  • 复制提示词，交给 AI 编程工具

请 AI 实现时，不要只粘贴提示词就结束，还应根据需要补充希望使用的技术和运行环境。M3E Canvas 的输出是传达页面结构与行为的起点。生成代码后的运行验证和细节调整，仍需在实现过程中完成。

页面可以保存为 PNG，也可以创建用于打开设计的分享链接。对方通过分享链接，可以在自己的画布中打开设计。如果使用面向 AI 智能体的指令，流程则是由智能体读取 agent.md，创建界面方案，再通过分享链接返回。该功能目前标注为测试版。

手机上也能用吗？有哪些面向开发者的信息？#

在手机浏览器中，会打开一个固定为单页面、仅支持按钮的编辑器。通过加号按钮添加组件，点击页面上的按钮进行移动，再从底部面板编辑文本、图标和样式。支持多页面的完整编辑器面向桌面浏览器。

工作内容保存在浏览器的 localStorage 中。如果使用可选的 AI 辅助功能，需要自行准备 OpenAI、Claude、Gemini 或 DeepSeek 的 API 密钥。密钥保存在浏览器内，请求会直接发送给对应服务商。这些功能可用于让 AI 编写组件的交互备注或页面说明，改写后也可以撤销。

M3E Canvas 免费使用，并以 MIT 许可证开源。如果要自行构建，先获取仓库、安装依赖，再启动开发服务器。

terminal
npm install
npm run dev

面向生产环境的静态导出使用以下命令。

terminal
npm run build

输出目录为 ./out。如果像 GitHub Pages 一样发布到子路径，需要在构建时指定 NEXT_PUBLIC_BASE_PATH=/仓库名。仓库中还包含 GitHub Actions 配置，可在向 main 推送时发布到 GitHub Pages。

先做一个小页面吧#

M3E Canvas 适合希望直观地搭建 Material 3 Expressive 界面，再交给 AI 实现的人。除了页面结构，还能一起整理跳转、主题、页面宽度，以及各组件的交互备注。

不必一开始就设计大型应用。先做一个带有搜索栏和卡片的列表页，再试着设置从卡片跳转到详情页。通过预览确认交互后，复制日语提示词，交给你手边的 AI 编程工具试试吧。

来源: https://github.com/lnkiai/m3e-canvas

目录