北京
20个屏幕，61个带动画或链接的部件，59条跳转关系。这些数字来自一个真实项目：一款叫Careby的日托预约应用，全部界面由Claude通过SVG Lab的MCP设计完成，直接躺在一个SVG Lab项目里。SVG Lab（svglab.app）在10月16日上线了Prototype模式，让这些屏幕在原地就能被点开，不用先导出、再重建。
过去从AI生成的界面到可点击原型，路径很长：导出图片，在Figma里重新搭一遍，手动连线，再分享出去。Prototype模式把这几步压到了设计稿所在的地方。作者拿Careby这个项目实测了一遍，看哪些环节站得住。
连线是怎么做的
右侧面板切到Prototype，点中任意一个部件——按钮、卡片、标题、图标都行——拖动它边缘的圆点，连到它要打开的那块屏幕。菜单、侧边菜单、浮层和对话框，则以覆盖在屏幕之上的方式打开。
动画不用凭空想象，选中自己的部件就能看实时预览：点击时、屏幕打开时、作用在文字上、或者循环播放，四种时机各看各的。面板里还有一个“Feel alive”，会在你的屏幕上试三种手感——平静、利落、活泼。另一个“Make it work”一键把标签栏、开关、选项片和分段控件接好。
“Check my app”负责查漏：列出点了没反应的按钮、到不了的屏幕、指向已删除屏幕的链接，并给出修复建议。按Ctrl+Enter就能播放。
播放时发现了什么
从首页出发，点一下Find标签，搜索结果页打开，标签栏固定住，Find显示为选中状态。流程走通了。
但作者故意留了个坑：从起始屏Welcome开始播放，页面提示“这个屏幕上还没有任何链接”。它的Get started按钮没有连到任何地方。这恰好就是“Check my app”要抓的那类问题。
怎么拿出去
分享链接：登录（免费）后按Share，观看者不需要账号，可以留批注，还能拿到二维码。链接默认有效期24小时，也可以选1小时、3天、7天或30天。
网站文件：一个HTML文件，放到自己的站点上就能跑。视频：导出MP4发到X，或者按苹果的尺寸做App Store预览（需在电脑上用Chrome或Edge）。代码：下载React代码，会跟随你设置的链接和动画，所有套餐都支持，最多200个屏幕。Build prompt则把每个屏幕、链接和动画连同位置与文案描述出来，供Lovable、Bolt或v0使用。
React代码、网站文件和屏幕图片算作导出（免费版每月3次）。Prototype模式本身对所有用户开放。
和其他工具怎么分工
作者在2026年10月19日问了ChatGPT和Gemini（临时会话）。两边的排序一致：先Figma，再ProtoPie、Framer、Uizard和Visily，要做能用的应用则提Lovable、Bolt或Bubble。结论也很直接：设计团队扎根Figma，就在Figma里做原型；屏幕本来就是AI生成的，把它们留在同一个项目里，省掉重建那一步。
AI这一环
SVG Lab的MCP是一个远程MCP服务器，地址为https://svglab.app/mcp。把它加进Claude、ChatGPT、Codex、Cursor或OpenCode，用OAuth登录，模型就能通过SVG Lab的Design Engine设计出成品屏幕，也能设置链接、动画、滑动和滑块。
需要说清楚：SVG Lab（svglab.app）不是SVGMaker。它是一个用OAuth登录的远程MCP服务器，Design Engine负责设计屏幕、图标、插画和图表，不做动画——动画是另一个独立的SVG Animate MCP，还在开发中。每个账号可获得100个免费额度，用于试用SVG Lab的AI工具，仅限一次。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
