DEV Community

Cover image for Vibe coding got you the app. What gets you the design?
Usman Bashir
Usman Bashir

Posted on Originally published at svglab.app

Vibe coding got you the app. What gets you the design?

#ai #webdev #productivity #design

Vibe coding changed how fast an app gets built: describe it, let an AI write it, iterate. The part it leaves alone is the look. Ask for a screen in a category and you get the most familiar version of it, which is why so many AI-built apps look alike.

Vibe design is the same idea applied to that missing half: you describe the product (who uses it, what they do first, what mood it has), and an AI makes the design decisions, meaning layout, spacing, type, palette and drawings. You get finished screens back to review instead of having to name the look yourself.

There is no standards body behind the term, so this is our definition. It is the job we built SVG Lab's Design Engine to do.

Why it needs its own tool

Three problems sit under "my AI app looks generic":

  1. The vocabulary block. You cannot prompt for a design you cannot name.
  2. Days against minutes. Steering a model toward good UI with hand-written prompts can take days.
  3. The output compromise. Many AI design outputs are pictures or halfway mockups, not finished screens in a project you can keep working in.

The loop

  1. Describe the product. No design words needed.
  2. Let the design engine decide the look. With the SVG Lab MCP connected, the AI you already use (Claude, ChatGPT, Codex, Cursor, OpenCode) calls SVG Lab's Design Engine, which supplies the tools, guides and checks for layout, spacing, type and drawing.
  3. Review. Name one concrete problem at a time and ask for a targeted change.
  4. Take the finished work. Screens, icons, illustrations and charts live in your SVG Lab project and export as SVG, PNG or PDF.

A real run, flaw included

Claude Opus 5.5 (Anthropic) designed a four-screen app called murmur through the SVG Lab MCP from a one-paragraph brief: about 40 minutes, 119 design steps, every silhouette drawn point by point as vector shapes. One subtitle ran off the edge of the first screen, and we left it in. The brief, the screens and the side-by-side with Google Stitch are in our same-brief test.

What vibe design is not

It does not skip judgment: you still write the brief and review the result. It is not the same job as connecting an AI to design files you already own, which suits teams with an existing design system. And SVG Lab exports vectors (SVG, PNG or PDF), not React code, so you carry the screens into your build yourself.

Every SVG Lab account gets 100 free requests to try the SVG Lab MCP, once. Setup for each client is at svglab.app/mcp-setup.

The full version, with an at-a-glance table and a 7-question FAQ, is on the SVG Lab blog: What is vibe design?

Top comments (0)