An AI-Designed 20-Screen App: Build a Clickable Prototype Without Exporting

Title

AI-designed 20-screen app: build a clickable prototype without exporting

Meta Description

SVG Lab launches Prototype mode, letting app interfaces generated by Claude and other AIs be wired into clickable prototypes without exporting. This hands-on test of the 20-screen daycare app Careby covers the linking workflow, checking features, export options, and MCP integration details.

Article Content

After AI generates an app interface, you usually have to go through a long process: export, rebuild in Figma, wire it up, and share. On October 16, SVG Lab launched Prototype mode, bringing clickable prototype building directly back into the project where the design lives. The author ran it on a real project to see which parts hold up.

Project background: a 20-screen daycare booking app

Careby is a daycare booking app whose 20 screens were all generated by Claude through the SVG Lab MCP, so they naturally exist in the same SVG Lab project. After switching to Prototype mode, the right panel shows 61 parts that can be animated or linked, plus 59 links. That number says something in itself: AI-generated interfaces aren't just a pile of dead images—as long as structured information is preserved, the linking work has a real chance of being drastically reduced.

For indie developers and small teams, that's exactly the pain point. The design is produced by AI, but prototype tools assume you'll rebuild from scratch, and both time and context are lost the moment you export.

How linking works

The path is straightforward: switch the right panel to Prototype, click any part (button, card, title, icon), and drag the dot on its edge to the target screen. Menus, sidebars, popovers, and dialogs open as overlays rather than navigating to a full screen—this detail determines whether the prototype looks like a real app.

For animations, you can preview effects in real time on your own parts: on click, when a screen opens, when text appears, or looping. "Feel alive" tries three feels on the current screen (calm, snappy, lively), while "Make it work" wires up interactions in one click for tab bars, toggles, option chips, and segmented controls. This kind of automation clearly targets repetitive work rather than replacing design judgment.

"Check my app" deserves separate mention: it lists buttons with no destination, unreachable screens, and links pointing to deleted screens, and offers fix suggestions. Anyone who has built a lot of prototypes knows that broken links and orphaned pages are the easiest problems to miss.

In prototypes, "overlay" and "full-screen navigation" correspond to two different navigation semantics. Push places a new screen onto the navigation stack and pops it off layer by layer when going back; an overlay/modal stacks a layer on top of the current screen, and closing it returns to the original screen without changing the history stack. Menus, sidebars, popovers, and dialogs usually count as overlays, because users expect them to "open temporarily and return on close." If you mistakenly implement these with full-screen navigation, the back behavior, background scrim, and state preservation will all be distorted, and the prototype will look like a slideshow rather than an app. So whether a tool distinguishes these two modes by default directly affects the prototype's credibility.

Hands-on test: one problem caught on the spot

Clicking the Find tab from the Home screen opens the search results screen, the tab bar stays fixed, and Find shows as selected. That path worked, and state preservation was correct too.

But a flaw the author deliberately left in was exposed: when playing from the starting Welcome screen, it said "this screen doesn't have any links yet"—the Get started button wasn't wired up. This is exactly the scenario Check my app is meant to handle. In other words, the tool can find the problem, but only if you use it; auto-checking is currently "on demand" rather than forced before every playthrough.

Several ways to export and share

• Share link: after logging in (free), click Share; viewers don't need an account, can leave comments, and get a QR code. Links are valid for 24 hours by default, with options for 1 hour, 3 days, 7 days, or 30 days.
• Web page file: a single HTML file that can run directly on your own site.
• Video: export MP4 for X, or export App Store previews in Apple dimensions (requires Chrome or Edge on a computer).
• Code: Download React code follows the links and animations you set; available on all plans, up to 200 screens. Build prompt describes each screen, link, and animation in text, including positions and copy, and can be fed directly to Lovable, Bolt, or v0.

Note the billing boundary: React code, web page files, and screen images all count as exports (3 per month on the free plan), while Prototype mode itself is open to all users.

How it's positioned versus other tools

On October 19, the author asked ChatGPT and Gemini (in temporary sessions), and both gave the same ranking: Figma first, then ProtoPie, Framer, Uizard, Visily, and for building runnable apps, Lovable, Bolt, or Bubble. That answer isn't surprising—if a design team's workflow already revolves around Figma, prototyping there makes sense.

SVG Lab's entry point is a different situation: the interface comes from AI and is already in a project. Leaving it in place to build the prototype saves exactly the rebuild cost. It isn't trying to replace Figma; it serves the new chain of "AI-generated interfaces."

ProtoPie excels at conditional logic and sensor interactions, making it suited to high-fidelity interaction validation; Framer leans toward publishable website-level prototypes; Uizard and Visily focus on generating interfaces from sketches or text, positioned closer to front-end generation. Figma's absolute advantage lies in binding the design source file to team collaboration workflows, with prototyping just one part of its workflow. The common premise of these tools is that the interface is created or rebuilt inside the design tool. SVG Lab's difference is that the interface has already been generated by AI and lives in the same project, so the prototype stage requires no asset migration—what's saved is "context shuttling" rather than competing on "interaction expressiveness."

The AI part needs to be clear

SVG Lab MCP is a remote MCP server at https://svglab.app/mcp. Add it to Claude, ChatGPT, Codex, Cursor, or OpenCode, log in with OAuth, and the model can design complete interfaces through SVG Lab's Design Engine, and can also set links, animations, swipes, and sliders.

To be clear: SVG Lab (svglab.app) is not SVGMaker. It's an OAuth-login remote MCP server, and the Design Engine handles interfaces, icons, illustrations, and charts, not animation (animation is handled by a separate SVG Animate MCP under development). Each account gets 100 free credits one time to try its AI tools, with setup at svglab.app/mcp-setup.

Looking at how prototyping tools are evolving, the significance here isn't a few more animation options, but that the gap between AI-generated design and interactive validation has been shortened. That gap used to require manual shuttling; now linking, checking, playing, and exporting can all happen within the same project. For developers rapidly validating ideas, that's more valuable than pursuing pixel-perfect fidelity.

MCP (Model Context Protocol) is an open protocol proposed by Anthropic in late 2024 to let large language models call external tools and data sources in a standardized way. It decouples "models" from "tools": tool providers only need to implement an MCP server exposing certain capabilities (such as generating interfaces, reading and writing files, querying databases), and any client supporting the protocol (Claude, ChatGPT, Cursor, etc.) can connect. Remote MCP servers provide services over HTTP, users authorize via OAuth, and the model gains invocation permissions within the session. Compared with traditional function calling or plugin mechanisms, the advantage is cross-client reuse and a unified permission model, which is why it has become one of the mainstream ways to integrate AI tools over the past year.

One-line Summary

SVG Lab launches Prototype mode, letting AI-generated interfaces be wired directly into clickable prototypes within the original project.

Paragraph Summary

On October 16, SVG Lab launched Prototype mode, aiming to keep clickable prototype building for AI-generated interfaces within the original project and skip the export-to-Figma rebuild. The author tested it with Careby, a 20-screen daycare booking app entirely generated by Claude via MCP: the project had 61 interactive parts and 59 links, with drag-to-link, overlay popovers, animation previews, and one-click wiring for controls like tab bars. Check my app lists broken links, orphaned pages, and invalid links but must be triggered manually; in the test it did catch an unwired Get started button. Exports cover share links, single-file HTML, MP4/App Store videos, and React code that follows links and animations. The author sees its value as shortening the gap between AI design and interactive validation, not replacing Figma.