M3E Canvas

M3E Canvas 是一个免费、开源的网页应用，用于在浏览器中绘制由真实 Material 3 Expressive 组件构成的应用界面。它不需要注册账号、不依赖服务器、无需安装任何软件。

它的核心用途是将设计草图转化为精确的文本 prompt，供 Claude Code、Codex、Gemini CLI 或 Cursor 等 AI 编程工具读取并生成可运行的应用。

工作流程

1. Sketch（绘制）：将组件拖拽到手机或桌面画布上，组件会自动吸附并对齐到 4dp 网格。
2. Tap through（预览交互）：为组件设置跳转目标屏幕，点击 Preview 即可体验包含过渡动画的完整流程。
3. Copy the prompt（复制提示词）：整个设计会被转换为一段简短的说明文本，可直接粘贴到 AI 编程工具中使用。

主要能力

• 真实的 M3 Expressive 组件：提供按钮、FAB、导航栏、标签页、卡片、列表、底部弹窗、选择器、轮播图、加载指示器等组件。每个组件都有独立面板，可配置文本、样式、尺寸及点击行为。
• 多屏幕与流程连线：支持手机（412×892）和桌面（1280×800）两种屏幕尺寸切换，切换时导航栏等组件会自动适配。支持设置屏幕滚动长度，以及通过点击或滑动触发带过渡动画（滑动、淡入、展开等）的屏幕跳转。
• 统一主题管理：集中管理颜色、形状、字体和动效。支持 7 种预设调色板或自定义种子色、明暗模式、3 种对比度级别、圆角样式及 expressive spring 动效。
• 可选 AI 辅助：用户可提供自己的 API Key，让 AI 协助生成设计草稿或编写注释。Key 仅在浏览器本地使用，不会上传至服务器。
• 磁性连接：将按钮、Chip 或列表项靠近时，它们会自动融合为一个连接组，相接处的圆角会平滑处理。

该项目基于 Next.js 16 和 React 19 构建，使用 TypeScript 编写，采用 MIT 协议开源。适合希望通过可视化方式快速向 AI 编程工具传达界面需求的开发者或设计师。