SVG Lab

Your AI can code. Now it can design. SVG Lab's Design Engine gives any model real design taste and drawing skills, through one MCP.

[SVG Lab @trysvglab]

Every modern UI is full of SVGs.

icons, logos, illustrations, empty states, tiny visual details.

but editing one still means opening a heavy design app or touching path data by hand.

SVG Lab is a browser editor for drawing, cleaning, tweaking, and exporting SVGs fast.

[SVG Lab @trysvglab]

We typed one sentence into SVG Lab's AI Generate and opened the file that came back.

24 shapes in about 37 seconds. Every letter its own path. One background box we never asked for.

What a text to vector logo actually contains: https://t.co/6cxU2tDePl

[SVG Lab @trysvglab]

You drew a gradient, a blur and a mask. You exported SVG. You got a PNG in an SVG wrapper.

The spec has a defs block for exactly this. Most exporters render past it.

How to tell, in a 20 second check: https://t.co/qgZsltLI4j

[SVG Lab @trysvglab]

We traced a logo back from its own PNG.

It came back almost 8x bigger, one colour off, with the corners of a plain rectangle cut away.

What an image to SVG trace actually gives you, measured: https://t.co/5tWTOBruwN

[SVG Lab @trysvglab]

Can Claude Opus 5.5 design an app UI?

One recorded Claude Code run through SVG Lab's Design Engine: four Shadowplay screens, 118 tool calls, 16 minutes, and the headline overlap left in. The brief, the method and the output, flaw included. https://t.co/P3p7q8zy0h

[SVG Lab @trysvglab]

A better design prompt is only part of the process.

Give your AI drawing tools, visual guidance and screens it can inspect. Here is how SVG Lab's Design Harness works, with a real output and its remaining flaw. https://t.co/vnMORj1Veu

[SVG Lab @trysvglab]

A tidy AI-generated screen can still look like every other app.

Start with the person, the moment and the main action. Then inspect the result. Here is the brief-and-review loop we use around SVG Lab's Design Engine. https://t.co/RifuyPlefp

[SVG Lab @trysvglab]

You can describe what your app does. Describing how it should look is harder.

Vibe design hands those visual decisions to your AI through SVG Lab's Design Engine. Here is the workflow, an actual result and how to review it. https://t.co/4TFBlonSwk

[SVG Lab @trysvglab]

Claude Opus 5.5 drew the heron, cat and figures inside these app screens with SVG Lab's Design Engine.

One subtitle still overflows. We left it in. Here is the brief, the result and what still needs review. https://t.co/lyJ0btcYIv

[SVG Lab @trysvglab]

A static screen cannot tell you how a control feels.

We tested hover, press, keyboard focus, toggles and reduced motion in a real SVG/CSS prototype. Try the controls, then carry the decisions into your app. https://t.co/2TGxww2ULB

[SVG Lab @trysvglab]

SVG Lab is in the Claude Startups program.

Claude is what we build SVG Lab's Design Engine around, and the one we test it with most.

Next up: sessions with Anthropic's Applied AI team. We're bringing one question: how to make every model that connects to the SVG Lab MCP design better.

Thanks @claudeai .

[Usman Bashir @usman_basheers]

Connect Claude, ChatGPT (Codex), and other AI coding agents to SVG Lab and let them do the magic.

Watch your AI agent design mobile apps and websites live inside SVG Lab. Jump in anytime, tweak things, and take control.

It’s free for now, so enjoy it while you can.

[SVG Lab @trysvglab]

Connecting an MCP server and enabling it in a chat are two different steps.

Here's how to connect Claude, ChatGPT, Codex, Cursor or OpenCode to SVG Lab's Design Engine, and check that it can actually use the tools. https://t.co/VMWAq3muPz

[SVG Lab @trysvglab]

@LeeWyattCorp Thank you. Your input will push us to create something you would love to use.

[SVG Lab @trysvglab]

tatic screens can't show how an app feels. So we built the SVG Animate MCP.

Sonnet 5.5 designed the Field Notes screen and artwork with the SVG Lab MCP and its Design Engine. Then Opus 5.5 brought them to life with the SVG Animate MCP.

Left: a tappable prototype. The heart pops, the alert toggle flips, rows press, tabs switch. One HTML file.

Right: an animated landing page. The bird, icons, chart, loader and empty state are animated SVG files, about 190 KB for all eight.

It also exports the motion as CSS, Framer Motion and React Spring code, a starting point for your coding agent.

One honest note: the Map, Journal and Profile tabs are placeholders in this demo.

The SVG Animate MCP opens to everyone next week.

What would you animate first?

[SVG Lab @trysvglab]

https://t.co/BsczOFqOf4

[SVG Lab @trysvglab]

Closer to timeline scrubbing. Each element gets motion clips on a timeline you can scrub: entrances, presses, toggles, tab switches and loops, with their timing set by your AI through the SVG Animate MCP. Free-form keyframes are next on the list. Then it exports as a tappable prototype, an animated SVG, or CSS, Framer Motion and React Spring code.

[SVG Lab @trysvglab]

@LeeWyattCorp No doubt. This is exactly the pain every developer goes through. This is why we are bringing motion prototyping to SVG Lab for your UI Design.

[SVG Lab @trysvglab]

@0xTobiasDev Glad, you like it. We are working round the clock to release this by early next week.

[SVG Lab @trysvglab]

https://t.co/B3eLdSdnr6

[SVG Lab @trysvglab]

Sonnet 5.5 just cooked inside SVG Lab.

We asked it for a mobile app where runners and surfers meet up. First try: solid layouts, weak drawings.

So we told it one thing: use references for the drawings.

It studied them, then drew the runner, the surfer and the coast itself on SVG Lab's Design Engine. A few small fixes after that, each done exactly as asked.

77 minutes, 12 context compactions, 35.5M tokens, about $15 at API prices.

What should we have it design next?