DEV Community

Cover image for Claude can design your app screens now. It just needs a design engine to drive
Usman Bashir
Usman Bashir

Posted on Originally published at svglab.app

Claude can design your app screens now. It just needs a design engine to drive

#ai #design #mcp #claude

Ask Claude to "design my app" and you usually get HTML or a React mockup in an Artifact. Useful, but it is code dressed as a design. I wanted finished screens in a real design file, with drawn illustrations, so I connected Claude to the SVG Lab MCP (svglab.app). Here is the setup and what changed on 18 October.

Setup

claude.ai or Claude Desktop: Customize, then Connectors, press +, Add custom connector, name it SVG Lab, paste https://svglab.app/mcp, press Connect, sign in to SVG Lab, Approve. In a chat, press + and make sure SVG Lab is on under Connectors. A Free Claude account can add one custom connector.

Claude Code:

claude mcp add --transport http --scope user svglab https://svglab.app/mcp
Enter fullscreen mode Exit fullscreen mode

Then /mcp, choose svglab, Authenticate. Nothing needs to be open in SVG Lab; the Design Engine runs on SVG Lab's servers.

What happens when you ask for an app

  1. Claude asks first. Platform, which screens, the look, photos or drawings, and where you want to watch. Every question has a recommended answer, so you can just accept.
  2. Claude plans the drawings. It tells you how many illustrations go on each screen (none, one or several) and waits for your OK.
  3. You watch it on SVG Lab's canvas. The project opens in the SVG Lab editor beside the chat or in your own browser. The cursor says what it is doing ("Drawing a box", "Writing ..."). In claude.ai a live card in the chat follows the work too.
  4. Drawings are drawn, not pasted photos. Claude draws each illustration as SVG from a picture it finds on the web, or SVG Lab generates it for credits if you pick that. In Claude Code every drawing gets its own helper, so they are drawn in parallel.
  5. Exports come back as download links, Claude Code included.

Careby screens designed by Claude, open in the SVG Lab editor

That is Careby, a daycare app whose 20 screens Claude designed this way. The same project later became a clickable prototype in SVG Lab's Prototype mode. I did not record that run's time or tool calls, so I am not quoting any.

Figma MCP or SVG Lab MCP?

I asked ChatGPT and Gemini "which MCP server gives Claude design skills" on 19 October 2026 (temporary chats). Both said the Figma MCP. That is the right answer when your design already lives in Figma: it connects Claude to your files. When there is no design yet and you want Claude to make one from a description, the SVG Lab MCP is the one that adds a design engine.

Cost and what it is not

Every SVG Lab account gets 100 free credits once; one tool call is one credit. Plans start at Starter, $7 a month for 2,500 credits.

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: svglab.app/mcp-setup

The full version, with two short clips of Claude asking its questions and designing on the canvas, plus the FAQ, is on the SVG Lab blog: How do you design an app UI with Claude?

Top comments (0)