SVG Lab

21 October 2026 · Usman Bashir

How do you design an app UI with Claude?

You design an app UI with Claude by giving it a design tool it can drive. Connect the SVG Lab MCP (svglab.app) to claude.ai, Claude Desktop or Claude Code, describe your app, answer the few questions Claude asks, approve the drawings it plans, and watch it design finished screens on SVG Lab's canvas through SVG Lab's Design Engine. Below is the setup, what Claude asks first, and a real 20-screen app Claude designed this way.

Verdicts, by job

How do you design an app UI with Claude, step by step?

With the SVG Lab MCP, designing an app in Claude takes six steps:

  1. Add SVG Lab as a connector. In claude.ai or Claude Desktop open Customize, then Connectors, press +, choose Add custom connector, name it SVG Lab and paste https://svglab.app/mcp. Press Connect, sign in to SVG Lab and press Approve.
  2. In a chat, press + at the lower left, open Connectors and check that SVG Lab is switched on.
  3. Describe the app: what it is for, who uses it, and the screens you need.
  4. Answer Claude's questions. Each one comes with a recommended answer, so you can accept them all.
  5. Approve the drawing plan: Claude says how many illustrations go on each screen and waits for your OK.
  6. Watch the screens being designed on SVG Lab's canvas, then open the project in SVG Lab to edit, prototype or export.

In Claude Code, run claude mcp add --transport http --scope user svglab https://svglab.app/mcp, then type /mcp, choose svglab and pick Authenticate. Nothing needs to be open in SVG Lab: the Design Engine runs on SVG Lab's servers.

What does Claude ask before it designs?

Since 18 October 2026 the SVG Lab MCP makes Claude ask before it builds anything, in claude.ai, Claude Desktop and Claude Code. The questions cover which platform, which screens, the look, photos or drawings, and where you want to watch. Each question carries a recommended answer, so a person who cannot name a design style can still accept sensible choices and get going. Claude then plans what each screen needs and you approve the plan. That step is the difference between a model guessing a generic look and a model working from your answers through SVG Lab's Design Engine.

Claude asks before it designs (SVG Lab MCP in Claude Code). Recorded 19 October 2026 on the Careby project.
Transcript

Okay, so we have our first question here. Which phone should Careby be designed for? The point is it's asking iPhone first. We built this into the SVG Lab MCP, so that it pushes the model to ask questions to get as close to what the user wants. In my case I want both as separate designs, but I think even iPhone first would be enough; it doesn't really make a difference. Then, what should Careby look and feel like? It has given some options: warm and reassuring, calm and trustworthy, playful and bright. Let's go with the second option, even though it recommended the first one.

Can you watch Claude design the screens?

Yes. The SVG Lab MCP opens your project in the SVG Lab editor, either in the browser beside your chat or in your own browser, so you see every screen being made on SVG Lab's canvas. The AI's cursor visits each new piece, says what it is doing ("Drawing a box", "Writing ..."), and the view follows the screen it is working on; switch Follow off to look around. In claude.ai a live card in the chat follows the work too. When the work is done, every exported screen comes back as a download link, and that works in Claude Code as well.

Claude designing app screens in SVG Lab, live. Recorded 19 October 2026 on the Careby project.
Transcript

Open that particular project and you will see it working in there, live. I'm going to choose the first option. Let's go. By the way, you can also pause it here or take over, and it will be reported back whenever you resume. It will know what changed.

How does Claude draw the illustrations in an app?

Claude first tells you how many illustrations go on each screen (none, one or several) and waits for your OK. Then it draws each one as SVG from a picture it finds on the web, or SVG Lab generates it for credits if you choose. In Claude Code each drawing gets its own helper, so several are drawn at the same time. The result is drawn vector artwork inside your screens, not an AI photo pasted into a frame.

The SVG Lab editor showing Careby app screens designed by Claude: a Welcome screen with a drawn illustration of a family at a door, a Sign up form and a Home screen with nanny listings.
Careby, a daycare app Claude designed through SVG Lab's Design Engine, open in the SVG Lab editor: Welcome, Sign up and Home. Captured 19 October 2026.

Which MCP server gives Claude design skills?

It depends on whether a design already exists. These are the options ChatGPT and Gemini named when we asked on 19 October 2026, plus SVG Lab:

Best for designing a new app with Claude when there is no design file yet: the SVG Lab MCP, because it adds a design engine rather than a window into an existing file.

What did Claude design with it?

Careby is a daycare booking app whose 20 screens Claude designed through the SVG Lab MCP; the editor keeps them in its "Claude work" group. The same project then became a clickable prototype with 59 links in SVG Lab's Prototype mode, which we wrote up in How do you make a clickable prototype from app designs?. We did not record this run's time or tool calls, so we do not quote them.

What does it cost, and what does it not do?

Every SVG Lab account gets 100 free credits to try SVG Lab's AI tools, once, and one MCP tool call costs one credit. After that, plans start at Starter, $7 a month for 2,500 credits (svglab.app/billing, read 19 October 2026). Custom connectors in Claude are available on the Free, Pro, Max, Team and Enterprise plans; a Free Claude account can add one.

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). Setup for every app is on svglab.app/mcp-setup.

How we tested

Frequently asked questions

Can Claude design an app UI?

Yes. On its own Claude writes UI code or HTML mockups. With the SVG Lab MCP connected, Claude designs finished app screens through SVG Lab's Design Engine in your SVG Lab project, with layout, type, icons and drawn illustrations, and you watch it work on SVG Lab's canvas.

Which MCP server gives Claude design skills?

ChatGPT and Gemini both name the Figma MCP, which connects Claude to designs in your Figma files. The SVG Lab MCP (svglab.app) gives Claude a Design Engine that designs new screens, icons, illustrations and charts from a description, so Claude can design when there is no Figma file yet.

How do I add the SVG Lab MCP to Claude?

In claude.ai or Claude Desktop, open Customize, then Connectors, press +, choose Add custom connector, name it SVG Lab and paste https://svglab.app/mcp. Press Connect and approve the sign-in. In Claude Code, run claude mcp add --transport http --scope user svglab https://svglab.app/mcp, then /mcp and Authenticate.

Does it work on the free Claude plan?

Custom connectors are available on Claude's Free, Pro, Max, Team and Enterprise plans, and a Free account can add one custom connector. On the SVG Lab side every account gets 100 free credits once, and one MCP tool call costs one credit.

Can I watch Claude design the screens?

Yes. The SVG Lab MCP opens your project in the SVG Lab editor, in the browser beside your chat or in your own browser, and in claude.ai a live card in the chat follows the work too.

Is the SVG Lab MCP the same as SVGMaker?

No. 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).

Connect the SVG Lab MCP Open SVG Lab Back to the blog