AI设计的20屏应用，不导出也能做成可点击原型

AI生成App界面后，通常要经历导出、Figma重建、连线、分享的漫长流程。SVG Lab 在10月16日上线了 Prototype 模式，把可点击原型的搭建直接搬回设计稿所在的项目里。作者用真实项目跑了一遍，看看哪些环节能站住脚。

项目背景：20屏的日托预订应用

Careby 是一个日托预订应用，20个界面全部由 Claude 通过 SVG Lab MCP 生成，因此天然存在于同一个 SVG Lab 项目中。切到 Prototype 模式后，右侧面板显示 61 个可动画或可链接的部件，以及 59 条链接。这个数字本身说明了一件事：AI生成的界面并不是一堆死图，只要保留结构化信息，连线工作就有机会被大幅压缩。

对独立开发者和小团队来说，痛点恰恰在这里。设计稿由AI产出，但原型工具默认你从零开始重建，时间和上下文都在导出那一刻丢失了。

连线是怎么做的

操作路径很直接：把右侧面板切到 Prototype，点击任意部件（按钮、卡片、标题、图标），拖动边缘的圆点到目标界面。菜单、侧边栏、弹层和对话框会以覆盖形式打开，而不是跳转整屏——这个细节决定原型看起来像不像真应用。

动画方面，可以在自己的部件上实时预览效果：点击时、界面打开时、文字出现时，或者循环播放。"Feel alive" 会给当前界面试三种手感（平静、干脆、活泼），"Make it work" 则一键为标签栏、开关、选项片和分段控件接好交互。这类自动化明显针对重复劳动，而不是替代设计判断。

"Check my app" 是值得单独说的功能：它列出没有去向的按钮、无法到达的界面、指向已删除界面的链接，并给出修复建议。原型做多了就知道，断链和孤岛页面是最容易漏掉的问题。

原型中的「覆盖层」与「整屏跳转」对应两种不同的导航语义。跳转（push）会把新界面压入导航栈，返回时逐层弹出；覆盖（overlay/modal）则在当前界面上叠加一层，关闭后回到原界面且不改变历史栈。菜单、侧边栏、弹层和对话框通常属于覆盖，因为用户预期是「临时打开、关闭即回」。若错误地用整屏跳转实现这些元素，返回行为、背景遮罩和状态保持都会失真，原型看起来就像幻灯片而非应用。因此工具是否默认区分这两种模式，直接影响原型的可信度。

实际试玩：一个问题被当场抓出

从 Home 页点击 Find 标签，搜索结果页打开，标签栏保持固定，Find 显示为选中态。这一条链路走通了，状态保持也正确。

但作者故意留下的缺陷暴露了出来：从起始页 Welcome 开始播放时，提示"这个界面上还没有任何链接"——Get started 按钮没有接上。这正是 Check my app 要处理的场景。换句话说，工具有能力发现问题，但前提是你去用它；自动检查目前是"按需触发"，而不是每次播放前强制扫一遍。

导出与分享的几种方式

• 分享链接：登录（免费）后点 Share，查看者无需账号，可以留言，附带二维码。链接默认24小时有效，也可选1小时、3天、7天或30天。
• 网页文件：单个 HTML 文件，可以直接放在自己的站点上运行。
• 视频：导出 MP4 用于 X，或按 Apple 尺寸导出 App Store 预览（需电脑上的 Chrome 或 Edge）。
• 代码：Download React code 会跟随你设置的链接和动画，所有套餐可用，最多200屏。Build prompt 则用文字描述每个界面、链接和动画，包括位置和文案，可直接喂给 Lovable、Bolt 或 v0。

需要留意计费边界：React 代码、网页文件和界面图片都算作导出（免费版每月3次），而 Prototype 模式本身对所有用户开放。

和其他工具的定位差异

作者在10月19日问了 ChatGPT 和 Gemini（临时会话），两者给出的排序一致：Figma 第一，然后是 ProtoPie、Framer、Uizard、Visily，做可运行应用则推荐 Lovable、Bolt 或 Bubble。这个答案不算意外——如果设计团队的工作流本来就围绕 Figma，在那里做原型是合理的。

SVG Lab 的切入点是另一种情况：界面来自AI，且已经在一个项目里。此时把它留在原地做原型，省掉的就是重建成本。它不是要取代 Figma，而是服务"AI生成界面"这条新链路。

ProtoPie 以条件逻辑和传感器交互见长，适合做高保真交互验证；Framer 偏重可发布网站级原型；Uizard 和 Visily 主打从草图或文字生成界面，定位更靠前端生成。Figma 的绝对优势在于设计源文件与团队协作流程的绑定，原型只是其工作流的一环。这些工具的共同前提是：界面在设计工具内创建或重建。SVG Lab 的差异点在于界面已由 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个免费积分试用其AI工具，配置入口在 svglab.app/mcp-setup。

从原型工具的发展看，这件事的意义不在于多了几个动画选项，而在于AI生成设计与可交互验证之间的间隔被缩短了。过去这个间隔需要人工搬运，现在可以在同一个项目里完成连线、检查、播放和导出。对快速验证想法的开发者，这比追求像素级还原更有价值。

MCP（Model Context Protocol）是 Anthropic 于 2024 年底提出的一套开放协议，用于让大语言模型以标准化方式调用外部工具和数据源。它把「模型」与「工具」解耦：工具方只需实现一个 MCP 服务器，暴露若干能力（如生成界面、读写文件、查询数据库），任何支持该协议的客户端（Claude、ChatGPT、Cursor 等）都能接入。远程 MCP 服务器通过 HTTP 提供服务，用户用 OAuth 完成授权，模型便在会话中获得调用权限。这与传统的函数调用或插件机制相比，优势在于跨客户端复用和统一的权限模型，因此近一年成为 AI 工具集成的主流方式之一。