让 AI 做 App,界面总跑偏? 这个开源画布把草图变成提示词

各位好啊，我是开源派！

不知道大家让 AI 做 App 的时候，有没有遇到过这种情况？

你说“做个简洁的笔记应用”，它很快写出了一堆代码。跑起来一看：搜索框位置不对，底部导航太挤，点进详情页又是另一套风格。

于是继续解释：“这个按钮往右一点，卡片圆一点，颜色别那么重……”来回改几轮，感觉自己一直在隔空指挥装修。

最近在 GitHub 上看到的 M3E Canvas，提供了一个挺实用的办法：先把脑海里的界面拼出来，再把设计变成提示词，交给 AI 编程工具。

项目简介

M3E Canvas 是一个免费开源的浏览器界面设计工具，采用 MIT 许可证，基于 Next.js 和 React 开发，目前已经收获了 9.2k+ Star。

它围绕 Material 3 Expressive 设计风格提供组件。你可以把它理解成一套现成的界面积木：按钮、卡片、导航栏的样式已经准备好，自己负责安排内容和交互。

整个过程分三步：拼界面、试跳转、复制提示词。后面的代码实现，可以交给 Claude Code、Codex、Gemini CLI 或 Cursor。

像搭积木一样拼界面

左侧挑组件，中间摆画面，右侧改属性，操作逻辑很直观。

按钮、搜索栏、列表、输入框、开关、弹窗、图片等都能拖到画布里。想做笔记首页，就放一个搜索栏、几条笔记列表，再加一个新建按钮。

相邻按钮或列表项还能磁吸连接，组成一排或一组。遇到间距乱了，可以用“一键整理”把导航栏、悬浮按钮和内容重新摆好，不满意再撤销。

图层、多选编组、对齐辅助线也都有，稍微复杂一点的页面同样能慢慢整理。

按钮点下去，先试一遍

只看静态图，经常发现不了流程问题。它允许给按钮、列表项和导航栏设置目标页面，也能指定“返回”。

进入预览后，点击首页的笔记就能跳到详情页，还可以试滑动跳转、淡入和滑入等过渡。首页怎么进详情，详情怎么返回，写代码前就能先走一遍。

画布支持手机和桌面两种屏幕尺寸，同名页面的不同尺寸也会写进提示词，方便向 AI 说明两种布局。不过，预览里的交互仍是原型，真实数据和业务逻辑需要后续开发。

配色、圆角、动效一起调

配色这件事，它也替你省了不少细碎操作。

可以选七套预设主题，或者给一个基准色，生成整套 Material 配色；浅色、深色和对比度都能调整。

圆角、字体和动效也有统一设置。比如把整个应用换成更圆润的样式，就不用挨个修改按钮和卡片。对想做一套风格统一的小工具的人来说，这点挺省心。

画好的设计，直接变成提示词

这是开源君觉得最有价值的部分。

画布会把组件、布局、主题和页面跳转整理成自然语言描述。你还能给组件补一句行为说明，比如“点击新建，打开笔记编辑页”，一起写进提示词。

输出支持中文、英文、日文和韩文，目标平台可以选 Android 或 Web。既能导出整个设计的描述，也能只描述一个页面，复制前还可以手动修改。

把位置、样式和行为说具体，AI 才更容易理解你的意图。提示词生成本身不需要调用大模型，最终应用仍要在编程工具里生成、运行和检查。

设计留在浏览器里

项目没有后端，编辑内容自动保存在浏览器的 localStorage 中，也能保存成 JSON 项目文件，之后重新打开。

想发给别人看，可以导出屏幕 PNG；分享链接和让 AI 起草设计的功能目前属于测试版。浏览器存储会受清理数据、换设备等操作影响，重要设计记得另存项目文件。

可选的 AI 辅助支持自带 OpenAI、Claude、Gemini 或 DeepSeek 密钥，帮你写组件行为和页面说明。密钥保存在浏览器，请求直接发给对应服务商，调用费用另算，普通拼图和提示词输出不依赖它。

快速安装、使用

最省事的方式，是在项目首页点击 Open the app，直接用电脑浏览器打开在线版本。切成中文，添加屏幕，拖入组件，设置跳转，预览后复制提示词即可。

手机也能打开，但目前是单屏、主要编辑按钮的简化模式。要做完整的多页面设计，建议用电脑。

想自己运行，准备 Git 和 Node.js 24，在终端执行：

git clone https://github.com/lnkiai/m3e-canvas.gitcd m3e-canvasnpm installnpm run dev

然后打开 http://localhost:3000。需要部署静态站点时，执行 npm run build，构建结果在 out 目录。

M3E Canvas 值不值得用？

M3E Canvas 的价值，是让“我想做个什么样的应用”变成一份看得见、点得动、说得清的设计。

如果你经常让 AI 做小工具，又总觉得生成的界面和想象差了一截，不妨先拼个草图。把页面和流程对齐了，后面的修改也更有方向。

特别是准备做一个偏 Material 风格的 Android 应用或网页工具，这种先设计、再生成的流程，值得试试看。

项目地址：https://github.com/lnkiai/m3e-canvas

点击下方卡片，关注AI开源派