m3e-canvas：在浏览器里画 Material 3 草图，再把草图喂给AI写代码

先说结论

m3e-canvas 解决的是一个很具体的小问题：设计师和前端经常卡在「我想做一个 Material 3 Expressive 风格的界面，但AI不知道我脑子里长什么样」这个环节。它让你在浏览器里直接画出草图，再把草图拆成结构化提示词，喂给 Cursor、Claude Code 这类 vibe-coding 工具。

值不值得装，看你是不是这两类人：日常做 Material 3 风格界面的人和习惯用AI写前端代码的人。如果你只是偶尔画个图、不写代码，这个工具的吸引力会打折。

真正的问题

Material 3 Expressive 是 Google 在 2024 年后开始强推的视觉语言，圆润、弹性、强调动效和情绪表达。它比传统 Material Design 更「软」，也更难用文字描述清楚。

当你想让AI帮你实现一个这种风格的页面时，常见的卡点是：

• 你写「柔和、有弹性、像水滴一样」，AI给你返回的还是方形按钮和直角卡片。
• 你贴几张参考图，AI只学到颜色，没学到形状逻辑和层级关系。
• 你在 Figma 里画好稿子，截图发给AI，它把每个圆角、间距当成巧合，没理解背后的规则。

这中间的鸿沟就是「视觉意图」和「可执行描述」之间的距离。m3e-canvas 的做法是：让草图本身成为描述的一部分。

怎么做更省力

m3e-canvas 的核心逻辑是两步：先在画布上拼组件，再导出为结构化提示词。

它内置了 Material 3 Expressive 风格的组件库，包括按钮、卡片、底部导航、App Bar、对话框等常用元素。每个组件都带风格预设，比如圆角幅度、阴影强度、配色倾向，拖到画布上就能用。

画完之后，工具会把你用的组件、层级、布局转成一段描述文本，格式偏向英文 Prompt，可以直接贴进 Claude、Cursor 或 GitHub Copilot 的对话框。提示词里通常会包含组件类型、相对位置、风格关键词和交互建议。

整个过程绕开了两件事：不用在 Figma 里手动标注尺寸，不用在 Prompt 里反复解释「Material 3 到底是什么」。

哪些坑要避开

第一，它是草图工具，不是高保真原型。组件细节、真实数据、动效曲线都要靠AI后续脑补，别指望它一步到位。

第二，提示词是模板化的。不同AI模型对同一段 Prompt 的理解差异很大，最好先小范围试一句，再批量复用。

第三，Material 3 Expressive 还在演进。Google 文档和设计 token 时不时有调整，工具内置的组件库可能会滞后一两个版本。如果你要做的是生产级项目，最终还是要回到官方设计规范核对一遍。

第四，它是 TypeScript + Next.js 技术栈，本地启动需要 Node 环境。不愿意折腾命令行的朋友，可以直接用它的在线演示版本。

现在就能动手

如果你想试，最直接的路径是：

1。 打开 m3e-canvas 的 GitHub 仓库，看一眼 README 里的 Demo 链接，先在线玩十分钟。 2。 从你最熟悉的页面类型开始，比如一个设置页或一个商品详情页，拖几个组件上去感受风格预设。 3。 导出提示词，贴进你常用的AI编程工具，看看生成结果和你画的草图差距在哪。 4。 差距大的地方，回到画布调整组件参数，再生成一次，迭代两到三轮就能摸到节奏。

一句话总结：它不会替你做设计，但它能让你和AI之间的视觉沟通成本降低一大截。