DEV Community

Cover image for I made a 20-screen AI-designed app clickable without exporting it anywhere
Usman Bashir
Usman Bashir

Posted on Originally published at svglab.app

I made a 20-screen AI-designed app clickable without exporting it anywhere

#ai #webdev #ux #design

The usual route from AI-made app screens to something you can tap through is long: export the screens, rebuild them in Figma, wire the links, then share. SVG Lab (svglab.app) shipped a Prototype mode on 16 October that does it where the screens already are. I ran it on a real project to see what holds up.

The project

Careby is a daycare booking app. Its 20 screens were designed by Claude through the SVG Lab MCP, so they sit in one SVG Lab project. In Prototype mode the panel showed 61 animated or linked parts and 59 links.

SVG Lab Prototype mode: Careby screens with green link arrows and the Prototype panel

How the wiring works

  1. Switch the right-hand panel to Prototype.
  2. Click a part (button, card, title, icon) and drag the dot on its edge to the screen it opens. Menus, side menus, sheets and dialogs open over a screen.
  3. Pick an animation by watching live previews on your own part: on tap, when the screen opens, on its text, or looping.
  4. Feel alive tries three feels on your screen (calm, snappy, playful). Make it work wires tab bars, switches, chips and segmented controls in one click.
  5. Check my app lists buttons that go nowhere, unreachable screens and links to deleted screens, and suggests fixes.
  6. Ctrl+Enter plays it.

What Play did

From Home, one tap on the Find tab opened the search results, tab bar pinned, Find shown picked.

Careby Home, then the search results after tapping Find, in SVG Lab Play mode

The flaw I left in: playing from the start screen, Welcome, showed "Nothing on this screen links anywhere yet". Its Get started button had no link. That is exactly the case Check my app is for.

Getting it out

  • Share link: sign in (free), press Share. Viewers need no account, can leave notes, and get a QR code. Links last 24 hours by default, or 1 hour, 3, 7 or 30 days.
  • Website file: one HTML file that plays the app on your own site.
  • Video: MP4 for X, or an App Store preview at Apple's size (Chrome or Edge on a computer).
  • Code: Download React code follows your links and animations, on every plan, up to 200 screens. The Build prompt describes every screen, link and animation, with positions and words, for Lovable, Bolt or v0.

The React code, the website file and the screen pictures count as exports (Free includes 3 a month). Prototype mode itself is on for everyone.

Where the other tools fit

I asked ChatGPT and Gemini on 19 October 2026 (temporary chats). Both put Figma first, then ProtoPie, Framer, Uizard and Visily, and Lovable, Bolt or Bubble for a working app. If your design team lives in Figma, prototype there. If your screens came from an AI, keeping them in one project saves the rebuild.

The AI part

The SVG Lab MCP is a remote MCP server at https://svglab.app/mcp. Add it to Claude, ChatGPT, Codex, Cursor or OpenCode, sign in with OAuth, and the model designs finished screens through SVG Lab's Design Engine, and can set links, animations, swipes and sliders too.

To be precise: SVG Lab (svglab.app) is not SVGMaker. It is a remote MCP server you sign in to with OAuth, and its Design Engine designs screens, icons, illustrations and charts; it does not animate (that is the separate SVG Animate MCP, in development). Every account gets 100 free credits to try SVG Lab's AI tools, once. Setup: svglab.app/mcp-setup

The full version with the FAQ is on the SVG Lab blog.

Top comments (0)