想让AI做个App却画不出设计稿?9.8千Star的开源工具拖两下就写好提示词

你有没有过这种时候，脑子里有个小程序的样子，大概知道它长什么样、点哪里跳哪里，但真要跟 AI 说清楚，打出来的字就剩下"帮我做一个记账的 App"。然后 AI 给你的东西和你想象的完全不是一回事。

问题往往不在 AI，在于你没法把脑子里的画面传给它。

GitHub 上有个叫 m3e-canvas 的开源项目解决的正是这一步。它有 9,848 星，打开网页就能用，不注册、不装东西。

 

m3e-canvas 在线版实拍，2026-10-28

01｜先把画面拖出来，再让 AI 动手

它的思路很直接。既然说不清楚，那就画出来。

打开页面就是一块画布，左边是组件库，你从里面把按钮、卡片、列表这些拖到手机或者电脑的屏幕框里，拖上去会自动吸附到 4dp 网格，省得自己对齐。

它用的是 Material 3 Expressive 这套组件，也就是谷歌给安卓定的那套界面规范。所以拖出来的东西不是抽象方块，而是真实存在的组件，有对应的样式和行为。

组件数量挺全。按钮、图标按钮、FAB 和它的展开菜单、分割按钮、标签 Chips、顶部和底部应用栏、导航栏、侧边导航条、浮动工具栏、选项卡、搜索栏、卡片、列表项、底部弹层、对话框、轻提示、文本框、下拉框、开关、复选框、单选、滑块、日期时间选择器，连轮播、相机和地图的占位块都有。

02｜不止一张图，点得动的流程

只画一个界面其实还不够，很多时候要交代清楚的是流程。

它可以加很多个屏幕，给按钮、应用栏图标或者导航项设置点了之后跳去哪，还能配跳转的过渡动画，从哪个方向滑进来、淡入、展开，或者干脆不要动画。

按 P 进预览，你是可以真的用鼠标点着走一遍的，返回时过渡动画会反向播。整个流程的走向还能用箭头显示出来，一眼看全。

有个小细节做得挺贴心，按钮、标签、列表项挨得近的时候会磁吸在一起自动成组，不用手动去拼。

03｜最后一步，把设计变成一段提示词

画完之后点导出，整块设计或者单独一屏会变成一段文字说明。

这段提示词不是简单念一遍你放了什么，它会把布局关系写进去，哪些在同一行、哪些卡片重叠对齐成网格，这样 AI 生成出来的代码能保住排版。导出时可以选择目标是安卓还是网页，语言支持日、英、中、韩四种，复制之前还能自己改。

拿到这段提示词，粘给 Claude Code、Codex、Gemini CLI、Cursor 这类工具，就能往下生成了。

你也可以把单独一屏存成图片，或者复制一个分享链接发给别人打开你的设计。

04｜整体风格能统一调

颜色、形状、字体、动效这几项是集中管的。颜色给了七套配色，也能用一个种子色自动生成完整的 Material 3 色板，明暗、三档对比度、动态取色都有。

形状可以整体切成方角、圆角或者全圆角，字体有 Roboto 的几个变体和系统字体可选，动效在标准和弹性两种之间切。改完预览里立刻能看见。

编辑效率这块也做了不少，图层面板调堆叠顺序、组件编组后整体移动、跨屏幕复制粘贴，还有个一键整理，把栏吸到边缘、把悬浮按钮归到角落、其余按 16dp 间距排好，再按一次还能撤回。

05｜几句提醒

这工具完全跑在浏览器里，没有账号也没有服务器，设计就自动存在你本地浏览器中。好处是隐私，代价是换设备或者清了浏览器数据就没了，重要的设计记得导出分享链接或者存成图片。

手机浏览器上打开是简化版，只有一个固定屏幕和按钮式编辑器，完整功能得用电脑浏览器。

它内置了一点 AI 辅助，让 AI 帮你起草设计或者写组件说明，但这部分要自带密钥，支持 OpenAI、Claude、Gemini 和 DeepSeek，请求直接从你的浏览器发到服务商，密钥不会经过它的服务器。不用这个功能也完全不影响前面那些。

06｜适合谁，不适合谁

适合脑子里有想法但表达不出来的人，想做个小工具又不会画图的产品和运营，以及需要先跟同事或客户对一遍界面再动手的场景。零成本，打开就能试。

不适合指望它直接吐出成品的人，它只负责到提示词这一步，后面还得交给 AI 编码工具去做。也不适合需要精细视觉设计的人，它是草图工具，不是设计软件。

9,848 star / 1,082 fork（GitHub 实核 2026-10-28），MIT（可商用），主语言 TypeScript，2026-09 创建、2026-10-22 仍有提交。

以上内容基于项目公开仓库与官方文档整理，仅供技术学习交流，不构成任何建议。在线版可用性以你本地实际访问为准。

数据核实：GitHub API（api.github.com/repos/lnkiai/m3e-canvas）实时拉取。