M2 使用手册

M2 Canvas 是一块让你的团队和 AI Agent 一起设计的共享画布。本手册介绍怎么开始使用、编辑器、和 Agent 协作、设计系统、分享与导出。

开始使用

M2 目前处于内测阶段，需要邀请才能注册。

1. 在首页加入候补名单。申请通过后，我们会把邀请链接发到你的邮箱。
2. 打开链接，用 Google、GitHub 或邮箱加密码注册。请使用收到邀请的那个邮箱。邀请链接 7 天内有效，只能使用一次。
3. 如果用邮箱注册，输入我们发给你的验证码（或点击那封邮件里的链接）完成验证。

已经有账号？用 Google、GitHub 或邮箱密码登录。登录页的「Forgot password?」会发送重设密码的链接。

第一次登录后会进入你的工作空间，并弹出一段简短引导，提供两种开始方式：Start with an example（从示例开始）或 Blank project（空白项目）。两种都会打开一个项目，并显示接入 Agent 的引导。

工作空间与项目

• 在工作空间侧栏点 New Project 新建项目。能建多少个项目取决于你的套餐，详见定价。
• 一个项目包含一个或多个页面。在编辑器左侧栏的 Pages 页签里点页签行右端的 + 新建页面，双击页面可以改名，页面菜单里可以复制、调整顺序或删除。删除页面不可恢复。
• 删除项目会把它移到回收站，在那里可以恢复、彻底删除或清空回收站。项目在回收站里的保留时长取决于套餐。
• 如果工作空间的项目数超出套餐上限，超出的项目会变成只读，升级后恢复编辑。

编辑器

左侧栏。 顶部是 M2 标志和项目名。点 M2 标志打开主菜单：Go to project 回到项目列表，View 切换侧栏样式、显示或隐藏侧栏和右侧面板，Preferences 是画布偏好设置，Help and account 里有使用手册。点项目名打开项目菜单，可以改名（Rename）、复制链接、收藏、接入 Agent、删除项目；标着 Coming soon 的条目还没开放。下面有三个页签：Pages 是页面列表；Resources 放应用、上传的文件和设计系统的组件，顶部的搜索框会同时搜这三类；Layers 是当前页面的图层，用 Find layer 按名字查找。拖动侧栏右边缘可以调宽，按 ⌘ \ 收起或展开。侧栏有 Standard 和 Compact 两种样式：Compact 只留一列图标，点图标弹出对应的面板；在 View 菜单或侧栏的布局菜单里切换。

工具条。 画布底部的工具条上有选择 V、抓手 H、钢笔 P、撤销、重做，以及 +：点开是插入菜单，里面有 Frame F、文字 T、图片 I、矩形 R、椭圆 O、直线 L、箭头 Shift L，多边形和星形在 More shapes 里。画布右上角是保存状态、在线成员和 Share。

画布。 用右下角的缩放控件缩放，或者用 ⌘ +、⌘ −、⌘ 0（100%）、⌘ 1（显示全部）、⌘ 2（缩放到选中内容）。按住 Space 可以拖动画布。画布偏好设置（标尺、像素网格、吸附和背景）在 M2 标志菜单的 Preferences 里。

右侧面板。 右侧面板有两个页签。Agent 页签用来和 M2 的内置 Agent Patch Agent 对话；页签上的菜单还能切换到你电脑上的 Agent（如果你在用本地 Agent），以及 Connect an agent…。Design 页签显示选中节点的属性，没选中时显示页面 ID 和背景。拖动面板左边缘可以调宽，用 M2 标志菜单 View 里的 Right panel，或侧栏布局菜单里的同名项显示或隐藏。

布局与演示。 侧栏的布局菜单（侧栏开关旁的 ▾）和 M2 标志菜单的 View 里有四种布局：Standard、Compact sidebar、Canvas focus（收起侧栏和右侧面板，只留画布和工具条）和 Presentation。自己单独开关某个面板后，四项都不打勾。Toolbar and zoom 一起显示或隐藏底部工具条和缩放控件。选 Presentation 进入演示：编辑器界面全部隐藏，可以平移、缩放、点选查看，但不能编辑。按 Esc（有选中内容时先取消选中）或点顶部提示条上的 Exit 退出，回到进入前的布局；鼠标移到画布顶部会再次显示提示条。

用内置 Agent 做设计

在右侧面板的 Agent 页签里输入你想要的内容，比如「设计一个包含三个套餐的定价页」，按 Enter 发送（Shift Enter 换行）。Agent 会自动带上当前页面和你选中的内容，并使用项目的设计系统来做。

• 输入框旁的模型选择器可以切换模型。
• New chat（+）开始新对话，History 可以回到之前的对话。
• 内置 Agent 会消耗积分。工作空间切换面板里能看到剩余积分和下次重置时间。积分不够时，对话开始前会提示你。各套餐的积分额度见定价。

接入你自己的 Agent

你也可以用自己常用的 Agent 来设计：Claude Code、Codex、Cursor、OpenCode、Qoder，或任何支持 MCP 的客户端。

• 最快的方式是把这句话粘贴给你的 Agent：「Read https://patch.design/agent-setup.md and follow the instructions to connect to M2.」它会自己完成接入，并请你在浏览器里登录授权。
• 也可以在 Agent 菜单（或项目菜单）里选 Connect an agent…，再点 Copy to agent，复制一段带着当前项目和页面的启动提示词，直接粘贴给 Agent。
• 各客户端的接入命令和 MCP 地址见通过 MCP 接入。

Connect 面板会列出这个项目上的所有 Agent：属于谁、在哪个页面、是否还在响应。Agent 和团队成员在同一块画布上实时编辑，每个人都有自己的光标。

设计系统

设计系统（DS）保存你的 token 和组件，Agent 会按它来做设计，让每个页面都符合品牌规范。

• 在工作空间的 Design Systems 页点 New design system 新建，可以从零开始，也可以基于已有的设计系统复制一份。新建的设计系统是 Draft（草稿）状态。
• 打开设计系统可以查看 Overview、Library、Assets 和 Versions。点 Start Editing 开始修改，改完点 Publish 发布新版本，可以附上版本说明。
• 组件由 Agent 来创建：在设计系统页面里对 Agent 说，比如「添加一个 Button 组件」。
• 在项目里，用左侧栏 Resources 页签里 Components 段头的 Bind Design System（绑定后显示设计系统名）选择新节点使用的设计系统，并选择项目跟随哪个版本。选中节点后，右侧面板 Design 页签里的 Design System 区域会显示它使用的设计系统和版本。

分享与协作

• 画布右上角的 Share 可以按邮箱邀请别人以查看者身份访问项目，并把通用访问设置为 Restricted（受限）或 Anyone with the link（任何拿到链接的人都可以查看）。Copy link 复制只读链接。
• 要添加编辑者，请到工作空间设置 → Members → Invite，选择 Admin、Editor 或 Viewer。编辑者和管理员占用席位，查看者免费。
• 只有工作空间所有者和管理员可以管理分享。
• 在项目里工作的每个人都会显示在画布右上角的头像里，并在画布上有实时光标 —— 人和 Agent 都一样。

素材与应用

• 在 Resources 页签里点页签行右端的上传按钮，或在右键菜单里用 Upload files…、Upload folder… 上传图片，并整理到文件夹里。支持 PNG、JPEG、GIF、WebP、SVG、BMP、TIFF，单个文件最大 10 MB。总存储空间取决于套餐。
• Agent 可以在画布上做可交互的应用。选中应用后点 Run（或按 Enter）就能直接在画布上使用。在 Resources → Apps 里点 Export code，可以把应用下载成 Vite 项目，用 npm install && npm run dev 运行。
• Resources 页签的 Components 段可以浏览设计系统里的图标和组件，拖到画布上使用。

导出

在画布上右键点击任意内容：

• Copy as → Copy as PNG（⌘ Shift C）、Copy ID 或 Copy Node JSON。
• Export… 可以导出 PNG、JPG 或 SVG，倍率从 0.5× 到 4×，也可以指定宽度或高度。

快捷键

Windows 上请把 ⌘ 换成 Ctrl。

补充说明

• 修改会自动保存，保存状态显示在头像旁边。
• 撤销只针对你自己在本次会话中的修改，刷新页面后不会保留。
• 项目暂时没有版本历史；设计系统会保留已发布版本的列表。
• 有问题？请写信到 hello@m2ui.ai。