介绍
M3E Canvas 是一个基于 MIT 协议开源的浏览器工具，用来快速勾画 Material 3 Expressive 风格的应用界面，然后把整份设计打包成一段自然语言提示词，直接喂给 AI 编程工具。【先把界面画出来，再把"要做什么"讲给 AI 听，思路顺得很。】项目本身是纯静态站点，Next.js 16 + React 19 搭的，没有任何后端，所有内容存在浏览器本地，打开就能用，关掉也不丢。它一度冲上 Trendshift 当日榜首，靠的不是花哨，而是把"设计草图 → AI 代码"这条链路打通了：画好几个界面、连好跳转关系，点一下就能生成对应 Android 或 Web 的实现提示词，还能复制指令给 Claude Code、Codex 这类编程代理，让代理读完 agent.md 后把草图给你画出来。
特征
🎨 Material 3 Expressive 全套主题：颜色、形状、字体、动效四个轴一个面板调，7 个预设或单种子色生成完整配色，支持明暗、三档对比、跟随壁纸的动态取色
📱 浏览器里画界面并连屏跳转：点组件就能预览滑到下一个界面，跟真机点按一个手感
🤖 设计秒变提示词：整份或单屏设计转成中日英韩四语简述，可选 Android 或 Web 目标技术栈
🔌 自带 AI 草图助手（可选）：填自己的 OpenAI、Claude、Gemini、DeepSeek key，让 AI 用界面语言写组件行为说明，key 只存浏览器、直连厂商无中转
🔗 分享链接 + 编程代理指令：复制链接在别人画布里打开你的设计，或给 Claude Code、Codex 发指令让它回画草图
📐 对齐辅助线、撤销重做、键盘快捷键、收藏组件，全部自动存 localStorage
📱 手机版是单屏按钮编辑器：加号加按钮、点按移动、底部面板改文字图标样式
🏗️ 纯静态导出，推 main 自动发布 GitHub Pages，子路径部署只需设一个环境变量
