M3E Canvas：把「我想做一个 App」变成一段 AI 能读懂的提示词

图：M3E Canvas 项目主页横幅，Material 3 Expressive 风格的界面草图工具

一个真实的场景

产品经理小李接到需求，要做一个「轻食食谱」App。他不会写 Compose，也不会写 React，但他非常清楚想要什么：首页是一列菜品列表，点进去是详情页，右下角悬浮一个添加按钮，底部是三个 Tab。他打开浏览器，拖了十几个组件，把列表项连到详情页，点了 Preview 试了一遍流程，然后按下 Prompt，复制出 3000 多字的规格说明，粘进 Claude Code。十分钟后，一个能跑的 App 出现在他面前。

这就是 M3E Canvas 想解决的问题：AI 编程工具的上限，取决于你喂给它的 brief 的精度。用散文描述界面，模型只能给你一个泛泛的通用稿；把组件、尺寸、层级、配色角色、点击跳转都明确说出来，生成结果才可能贴近你脑子里的画面。M3E Canvas 就是一个「白板」与「黑盒生成器」之间缺失的那一层——一个可读、可编辑、可复用的中间表示。

项目起源与背景

M3E Canvas 由独立开发者 lnkiai 于 2026 年 9 月初创建，两个月内 star 数突破 1 万，成为 Trendshift 当日排名第一的仓库，并被 GIGAZINE、日本 PyShine 等媒体专题报道。它的出现踩中了两个同时升温的浪：一是 Google Material 3 Expressive 设计语言在 Android 生态落地，开发者需要一套可复用的组件规范；二是 Claude Code、Codex、Gemini CLI、Cursor 这类「vibe coding」工具把写代码的门槛降到了接近零，但随之而来的是「说不清想要什么」的新瓶颈。

有意思的是，这个项目本身并不在传统的设计工具赛道里。Figma 是通用设计平台但门槛高、闭源、订阅制；tldraw、Excalidraw 是白板但不产出结构化描述；v0 是黑盒生成器但你无法干预中间过程。M3E Canvas 选择了一条窄路：只支持 Material 3 Expressive 这一套设计语言，但把这一套做到极深，并把输出锁定为「一段给 AI 编程工具读的自然语言规格」。

类比：它像什么

把它想成给 AI 编程助手准备的一本带图的手册。你不是在写代码，也不是在做无限制的自由创作，而是在一份已经画好骨架的图纸上，填入真实的文案、真实的跳转关系、真实的业务说明——然后由这本书去指导别人盖楼。图纸的规格是统一的（Material 3），所以生成出来的楼也能保持一致的风格。

另一个更贴切的比喻是编译器：你的设计文档是源代码，生成的提示词是目标代码，中间那个手写的 lib/prompt.ts（13 万字符）是编译器本体。这个比喻不是修辞——项目里真的没有 LLM 参与提示词生成，全是确定性的字符串拼装。

图：Sketch（搭界面）→ Tap through（点通流程）→ Copy the prompt（复制提示词）的三步流程

核心功能与技术实现

M3E Canvas 全部逻辑跑在浏览器里，没有账号、没有后端、没有安装包。它是一个 Next.js 16 + React 19 + TypeScript 的静态导出站点（output: 'export'），部署在 GitHub Pages，线上地址是 lnkiai.github.io/m3e-canvas。

组件与画布。 组件库覆盖了 Material 3 Expressive 的绝大多数零件：按钮、FAB、顶栏、底部导航、导航轨、标签页、搜索栏、卡片、列表项、底部面板、对话框、表单控件、日期时间选择器、轮播、形态变换的加载指示器等。每个组件都配有独立的属性面板，可以设置文案、样式、尺寸、对齐，以及「点击后发生什么」。画布支持 4dp 网格对齐、吸附、撤销重做、图层顺序、分组、移动端/桌面端双尺寸切换（412×892 手机屏 ↔ 1280×800 桌面屏），同名屏幕会被写进提示词为「同一界面的两种宽度」。

「磁吸」交互是这个项目最有质感的设计。 把按钮、chip 或列表项拖近时它们会自动融合成一个连接组，接触处的圆角按 Material 3 Expressive 的规范软化——这不是简单的坐标吸附，而是对设计语言的真实模拟。

流程与预览。 任意可点击组件、应用栏图标、底部导航项都可以指定目标屏幕或「返回」，并选择转场动画（滑动/淡入/展开/无），Preview 里可以真实点通整个流程，返回时转场会逆向播放。屏幕还可以设置滑动方向触发跳转，以及超过设备高度时的滚动行为。

提示词编译器（核心资产）。 lib/prompt.ts 手写了完整的确定性编译器，把设计文档翻译成日/英/中/韩四种语言的规格说明。它不只是罗列组件：会显式写出重叠关系、并排成行的网格、尺寸数值、M3 变体（Filled/Tonal/Elevated/Outlined/Text）、颜色角色的十六进制值，以及「返回时反转进入转场」这类容易被遗漏的交互细节。作者手写的组件行为注释会被原样注入。用户还可以选择目标是 Android（默认，提示 AI 用 Jetpack Compose + Material 3）还是 Web。

图：组件面板、屏幕联动、配色面板与可选的 AI 对话框四大功能

可选的 BYOK AI 助手。 lib/ai.ts 允许用户自填 OpenAI / Claude / Gemini / DeepSeek 的 API Key，密钥只存 localStorage，请求从浏览器直连模型服务商，没有中间服务器（Claude 走 anthropic-dangerous-direct-browser-access 头）。它能根据一句话起草设计、为组件写行为说明、把自然语言描述转成设计文档。设计上很克制：每次调用使用固定提示词与固定 JSON 回答结构，模型永远不碰坐标，模型结果必须经用户确认后才应用，且每次改写可撤销。

Agent 逆向接口。 仓库里的 public/agent.md 是一个给 AI Agent 读的指南：Agent 直接生成设计 JSON，用 raw deflate + base64url 压进 URL fragment（#docz=...），人打开链接就能看到设计。因为 fragment 不会发往服务器，静态站点就能承载「分享整个设计」而无需任何存储。这形成了一个有趣的双向闭环——人可以给 Agent 出提示词，Agent 也能给人出设计。

图：从画出食谱 App、点通流程、复制提示词，到 Claude Code 在终端里把 App 写出来并在手机上跑起来的完整演示

上手门槛

门槛分两层。对普通使用者来说几乎为零：打开网页就能画，不需要注册，不需要 API Key，甚至不需要联网（提示词生成是纯本地计算）。唯一需要注意的坑有三个：默认语言是日语（浏览器地区设置可解）、默认浅色主题会被写进提示词（容易被忽略）、窗口宽度低于 1200px 时会锁定为仅预览模式。

对二次开发者来说门槛中等：Node 22+，npm ci && npm run dev 即可跑起来，npm run typecheck 做类型检查，npm test 跑 Vitest，npm run build 产出静态站点。项目配了完整的 GitHub Actions CI（typecheck + test + build）和 Dependabot，也提供 AGENTS.md / CLAUDE.md 供 AI 助手协作。但没有任何 Dockerfile 或 docker-compose，容器化需要自己写。

争议与局限

第一，Star 增长与真实使用之间存在鸿沟。 项目两个月破万星，被 Trendshift 收录，但 GitHub star 本就是虚高指标，媒体报道本身也承认这一点：没有第三方基准、独立评测或真实产出质量数据，来验证「sketch → prompt → 可用代码」这条链路到底有多稳。NerdBite 的报道直接质疑了 star 增长的来源（自然传播 / newsletter 推荐 / 自动化刷量）无法证实。维护者 lnkiai 在 Material Design 生态里并非知名人物或基金会，项目的长期维护能力是一个未知数。

第二，依赖单一设计语言是双刃剑。 限定在 Material 3 Expressive 让它做得非常深，但同时也意味着它对 iOS 风格、自定义设计系统、H5 活动页等场景几乎无用。用户群天然被收窄。

第三，AI 编程的不确定性并未被消除，只是被前移。 M3E Canvas 不会替你写代码，它只是把需求描述得更精确。生成结果依然取决于用哪个 AI 工具、哪个模型版本，以及草图本身的复杂度。提示词质量提升能否线性转化为成品质量提升，没有公开数据支撑。

第四，纯前端架构的代价。 提示词和设计文档完全在浏览器内存与 localStorage 中，没有账号体系就没有跨设备同步、没有版本历史、没有团队协作。对个人够用，对团队是硬伤。

第五，密钥存 localStorage。 虽然请求直连服务商、不经第三方中转，但 API Key 以明文形式存于浏览器存储，一旦用户机器被恶意脚本注入即可能泄露；对安全性敏感的场景需要注意。

行业意义

M3E Canvas 代表了一个正在成形的产品类别：AI 编程的上游工具链。当「写代码」的成本趋近于零，稀缺的就变成了「准确表达意图」的能力，于是出现了专门做意图表达的中间层工具——把设计约束编译成结构化描述，再交给 AI 执行。这个项目与 v0、bolt.new、Framer AI 同处一条赛道，但切入点完全不同：它不做黑盒生成，而是做「可读可编辑的规格中间层」，而且刻意保留了人工控制权——所有内容都能改、能撤销、能手动微调。

它同时也是一个有趣的样本：技术含量集中在纯前端的确定性字符串处理（13 万字符的提示词编译器 + 完整的 M3 组件参数化渲染），却带来了远超同类小工具的传播力。这说明在 AI 工具泛滥的当下，「把一件具体的事做到极致深度」依然有市场。

从 Google Material 3 Expressive 生态推进、Android 开发者工具链碎片化、到 vibe coding 普及这三条线的交汇处，m3e-canvas 只是占了一席——但它站的位置很准。对研发团队来说，它的价值不在于替代 Figma，而在于给 AI 编程流水线提供一个稳定、可版本化、可复用的前端需求描述格式。它随仓库附带的 agent.md 与 JSON Schema 规范，甚至可以直接接入团队自建的 Agent 流水线。

图：M3E Canvas 应用图标，可作为 PWA 安装到桌面