Sign in Start building
Workflows
Use cases Create & edit screens Icons for your brand Live shaders Rebrand a page Prebuilt workflows Campaign Studio UI Component Extractor App Screens Wireframe Flow Animation Capture Typography Matcher Design System Starter Logo Icon Generator Brand Kit Press Kit Site Redesign Brand Explorer Mood Board Design Critique Retexture Router SVG Generator Video Generator View all 19 workflows
MCP Models Pricing Docs Sign in Start building

What will you create?

Start building
Start building
001 / The canvas

Describe it. Watch it get built.

Start with your idea
Sticky
Plot — rent a raised bed in your neighbourhood’s community garden.
  • For renters with no garden of their own
  • Warm, neighbourly, never techy
  • Needs: mark, palette, type, DESIGN.md, first 3 screens, hero shader, launch photo
Brief
Logo mark
Claude Opus 5High

Draw a logo mark for Plot, an app for renting a raised bed in a community garden. One idea only: a garden bed seen from above with a single sprout in it. Flat, two colours plus the bed fill, legible at 24px, no text, no gradients. Return a standalone SVG on a 64 unit grid.

1 line · 273 charsEditorExpand
AttachmentsResponse
SVGRunRunning
Compose
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
  <title>Plot — mark</title>
  <rect x="2" y="2" width="60" height="60" rx="19" fill="#2E6B45"/>
  <path d="M15 46h34M17 38h30" stroke="#18261C"
        stroke-opacity=".26" stroke-width="2" stroke-linecap="round"/>
  <path d="M32 48V28" stroke="#E8794A" stroke-width="4"
        stroke-linecap="round"/>
  <path d="M32 32c-9 1-15-4-15-13 9-1 15 4 15 13Z
           M32 27c0-9 5-14 14-14 1 9-5 14-14 14Z" fill="#E8794A"/>
</svg>
Code
Brand system
Claude Opus 5High

In ← code / plot-mark.svg

Build a starter brand system for Plot from this mark and the brief. Produce a cohesive DESIGN.md: logo usage, voice, primary / accent / neutral palette, headline / body / label typography, spacing, radius and the core components (primary button, bed cell, garden card) that every screen will share.

1 line · 298 charsEditorExpand
AttachmentsResponse
StyleRunRunning
DirectWarm, neighbourly
Logos
Colors
LightDark
Soil#18261c
Leaf#2e6b45
Accent#c9e265#e8794a
Cream#f3eee0#f6ecdd
Stone#d9d2bf#e2d5c0
Moss#7f9c6b#8a9a62
Bark#4c5a4f#5a5347
Petal#f0f6c9#fbd9c4
Typography
DisplayInstrument Serif
44px · 400
HeadlineInstrument Serif
28px · 400
BodyInter
16px · 400
LabelFragment Mono
11px · 400
Voice
WarmNeighbourlyPlain-spoken

Talk like the neighbour who lends you a trowel. Seasons over deadlines.

---
name: Plot
description: Warm, neighbourly, hands-in-the-soil
colors:
  ink:       "#18261C"   # Soil — text, icons
  primary:   "#2E6B45"   # Leaf — brand, primary actions
  accent:    "#E8794A"   # Clay — highlights, availability
  surface:   "#F6ECDD"   # Cream — app background
  muted:     "#E2D5C0"   # Stone — dividers, empty beds
typography:
  display:  { font: "Instrument Serif", size: 44px }
  headline: { font: "Instrument Serif", size: 28px }
  body:     { font: "Inter", size: 16px }
  label:    { font: "Fragment Mono", size: 11px }
rounded: { sm: 8px, md: 14px, lg: 22px, pill: 999px }
spacing: { xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 40px }
---

# Plot — DESIGN.md

## Voice
Talk like the neighbour who lends you a trowel.
Short sentences, plain verbs, no growth-hacking.
Seasons over deadlines.

## Logo
The mark is a raised bed from above with one sprout in it.
Keep one bed-width of clear space. Never recolour the sprout
outside `accent`; never set the wordmark in sans.

## Colour
`surface` carries every screen. `primary` is for the
single most important action per view. `accent` marks
what is *available now*: free beds, open seasons, swaps.

## Components
- **Button / primary** — `primary` fill, pill radius
- **Bed cell** — `md` radius; free = `accent`
- **Garden card** — `lg` radius, 1px `muted` hairline
Style
Welcome screen
Claude Opus 5HighDESIGN.md

In ← style / design.md

Design the first-run welcome screen for Plot: the mark, a warm serif headline about growing something this season, an overhead illustration of garden beds built from the bed-cell component, and one primary action. Use the connected DESIGN.md as the single source of truth for logo usage, colour and type.

1 line · 304 charsEditorExpand
AttachmentsResponse
ScreenRunRunning
Compose
Screen
Gardens screen
Claude Opus 5HighDESIGN.md

In ← style / design.md

Design the Gardens home screen: greeting, search, a featured garden with live bed availability, then a list of nearby gardens as garden cards with distance, free beds and monthly price. Bottom tab bar. Use the connected DESIGN.md as the single source of truth.

1 line · 260 charsEditorExpand
AttachmentsResponse
ScreenRunRunning
Compose
Screen
Reserve screen
Claude Opus 5HighDESIGN.md

In ← style / design.md

Design the Reserve screen for one garden: back navigation, garden name, an interactive bed picker using the bed-cell component with one bed selected, the bed's facts (size, sun, water), a season selector and a pinned primary action with the monthly price. Use the connected DESIGN.md as the single source of truth.

1 line · 314 charsEditorExpand
AttachmentsResponse
ScreenRunRunning
Compose
Screen
Launch photo
GPT Image 2.5 Sunburst3:2Styles

Launch photograph for Plot, shot from directly above: one cedar raised bed filling the frame, young lettuce, basil and carrot tops in rows, a single seedling at the centre and two hands pressing soil around it. The watering can and plant marker are lime (#C9E265), the only accent colour; the rest stays leaf green, dark soil and cream gravel. Soft overcast morning light, film grain. Neighbourly and unpolished, not stock. No text, no logos, no faces.Launch photograph for Plot, shot from directly above: one cedar raised bed with rounded corners filling the frame, young lettuce, basil and carrot tops in rows, a single seedling at the centre and two hands pressing soil around it. The watering can and plant marker are clay orange (#E8794A), the only accent colour; the rest stays leaf green, dark soil and cream gravel. Golden late-afternoon light, film grain. Neighbourly and unpolished, not stock. No text, no logos, no faces.

1 line · 452480 charsEditorExpand
AttachmentsResponse
ImageRunRunning
Image
Image
Hero backdrop
Claude Opus 5HighDESIGN.md

In ← code / plot-mark.svg

Write a backdrop shader for Plot's landing hero from this mark: its garden beds seen from above, planted in slow waves in the brand's soil, leaf and accent colours. Calm enough to sit behind a headline. Expose the breeze, the number of beds, how much has grown and the accent as tunable uniforms.

1 line · 296 charsEditorExpand
AttachmentsResponse
CodeRunRunning
Compose
Tune
// Plot: beds from above, planted in waves.
uniform float uBreeze; // @range 0.0 2.0 @default 0.6 @label Breeze
uniform float uBeds;   // @range 3.0 13.0 @default 6.0 @label Beds across
uniform float uGrowth; // @range 0.0 1.0 @default 0.55 @label Growth
uniform vec3 uAccentColor; // @default 0.788 0.886 0.396 @label Accentuniform vec3 uAccentColor; // @default 0.910 0.475 0.290 @label Accent

float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}

float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f);
  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
             mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y);
}

float bed(vec2 p, vec2 size, float radius) {
  vec2 q = abs(p) - size + radius;
  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  vec2 grid = p * uBeds + vec2(iTime * uBreeze * 0.12, 0.0);
  vec2 cell = floor(grid);
  vec2 local = fract(grid) - 0.5;

  vec3 soil = vec3(0.09, 0.15, 0.11);
  vec3 leaf = vec3(0.18, 0.42, 0.27);
  vec3 stone = vec3(0.30, 0.34, 0.29);

  float wave = noise(cell * 0.45 + vec2(iTime * uBreeze * 0.35, 0.0));
  float planted = smoothstep(1.0 - uGrowth, 1.15 - uGrowth, wave);
  float sprout = smoothstep(0.62, 0.9, hash(cell)) * planted;

  vec3 fill = mix(stone, leaf, planted);
  fill = mix(fill, uAccentColor, sprout);

  float edge = uBeds / iResolution.y;
  float mask = 1.0 - smoothstep(-edge, edge, bed(local, vec2(0.42, 0.36), 0.12));
  vec3 color = mix(soil, fill, mask);
  color *= 1.0 - 0.35 * dot(p, p);

  fragColor = vec4(color, 1.0);
}
Code
Preview

Authored for this demo. Plot is a fictional example brand.
002 / How it works

You own the creative. The agent, the canvas.

  1. 01 / Start anywhere

    Add a reference.

    Start with an image, a prompt, or a color. Describe what you want to create.

  2. 02 / Build the workflow

    Let your agent connect the nodes.

    Your agent selects models and connects the steps. Review the workflow on your canvas.

  3. 03 / Make it yours

    Choose what to keep.

    Edit prompts, compare outputs, or try another model. You control what changes.

Start building
003 / Models

Every leading model. One subscription.

Image, text, vector and video models from 14 labs, already wired into the canvas. Pick one per node or run two side by side, and pay from a single wallet. No extra accounts, no API keys, and new models land here as they ship.

43 models · 14 labs · one walletEvery model and what it costs →
Image

Style boards, mockups, product shots and retextures. Most take your references as input.

  • GPT Image 2.5 Sunburst7 ratiosImg in
  • Gemini Nano Banana 2.1
  • FLUX 3 Image
  • Recraft V4.1 Flash
  • GPT Image 2.5 Flare7 ratiosImg in
  • Muse Image 1.0
  • Grok Imagine 2.07 ratios
  • Seedream 5.0 Pro
  • Nano Banana 2 Lite (Gemini 3.1 Flash Lite)7 ratiosImg in
  • Nano Banana 2 (Gemini 3.1 Flash)7 ratiosImg in
  • Recraft V4.1 Utility
  • Recraft V4.1 Pro

Nothing on this shelf

Image12 models
Text & code

Screens, code, DESIGN.md and copy. Models that take images can read a screenshot or a style guide.

  • Claude Opus 5.5Img inTools
  • Claude Fable 5.1Img inTools
  • Claude Sonnet 5.5Img inTools
  • Claude Haiku 5.5Img inTools
  • GPT-6.1 SolImg inTools
  • GPT-6 AstraImg inTools
  • GPT-6 LunaImg inTools
  • GPT-6 SolImg inTools
  • Gemini 3.8 FlashImg inTools
  • Gemini 3.5 Flash LiteImg inTools
  • Gemini 3.1 Pro PreviewImg inTools
  • Grok 4.7Img inTools
  • Kimi K3Img inTools
  • Kimi K3 FastImg inTools
  • GLM 5.3Tools
  • GLM 5.3 FlashImg inTools
  • Qwen 3.8 FlashImg inTools
  • Qwen 3.8 MaxImg inTools
  • DeepSeek V4.1 FlashImg inTools
  • MiniMax M3Img inTools
  • Muse Spark 1.3Img inTools

Nothing on this shelf

Text21 models
Vector

Marks and icons as real SVG. This shelf follows the Design Arena leaderboard.

  • GPT-6 AstraImg inTools
  • Claude Opus 5.5Img inTools
  • Muse Spark 1.3Img inTools
  • Kimi K3Img inTools
  • Claude Fable 5.1Img inTools
  • Gemini 3.8 FlashImg inTools
  • Gemini 3.1 Pro PreviewImg inTools
  • DeepSeek V4.1 FlashImg inTools
  • MiniMax M3Img inTools

Nothing on this shelf

SVG9 models
Video

Motion from a prompt, a still, or a first and last frame.

  • MiniMax H315s · 2kImg inAudioFramesVid in
  • HeyGen Video15s · 2kImg inAudio
  • Grok Imagine Video 1.5 Lite15s · 1080pImg inAudio
  • Wan v3.0 Video Prime30s · 1080pImg inFramesVid in
  • MiniMax H3 Max15s · 768pImg inFrames
  • Wan v3.0 Video30s · 1080pImg inFramesVid in
  • Seedance 2.530s · 1080pImg inAudioFramesVid in
  • Grok Imagine Video 1.515s · 1080pImg inAudio
  • Seedance 2.0 Fast15s · 720pImg inAudioFramesVid in
  • Seedance 2.015s · 4kImg inAudioFramesVid in

Nothing on this shelf

Video10 models
004 / Teams

Made for teams.

A workspace puts everyone on the same canvases, the same brand rules and one pooled wallet. Seats are unlimited, so nobody is left out to save a licence.

On the canvasWork in the same room.

  • See who’s here. Live cursors and avatars show who has the canvas open and where they’re working.
  • Leave a note, tag a teammate. Sticky notes take markdown and @mentions, right beside the work they’re about.
  • Know who asked for what. Anything the agent builds records who requested it, when, and on which canvas.
  • Your agent chat stays yours. Conversations are private to each person, even on a shared canvas.

Across projectsOne library, one wallet, one brand.

  • A shared library. Every canvas the team shares sits in the workspace with a preview of what’s on it. Move one in from Personal when it’s ready.
  • One pooled wallet. Members generate against the team’s GPU budget instead of their own plans.
  • Brand rules, set once. Logos, colours and fonts live on the workspace, so every generation starts on-brand.
  • Owners, admins, members. Invite by email, or let anyone on your company domain join on sign-up.
Seats
Unlimited
Runs in parallel, per seat
32
Workspace storage
50 GB
Team, with a $75 pooled wallet
$99/mo
Start a team workspace Compare plans
005 / MCP & API

Connect your agent.

Vmotif is an MCP server with a REST API. Claude Code, Codex or Cursor can open a canvas, wire it and run it, and with the canvas open you watch the nodes land live. Nothing is canvas-only.

  • 24 tools, one canvas. Create a canvas, add and wire nodes, generate images, code and video, capture a page, run the whole workflow and read the results back.
  • Watch it land. Keep the canvas open and nodes appear as your agent adds them. A finished run writes its outputs onto the same nodes.
  • One sign-in, one wallet. Your agent signs in with OAuth as you, so runs draw from the GPU wallet you already have. It can check what’s left before it spends.
Add it to Claude Code
claude mcp add --transport http vmotif https://vmotif.com/api/mcp
Connect your agent Read the API reference

Your agent signs in as you, so it needs a Vmotif account first. The first connection opens the sign-in.

006 / Pricing

Your whole creative stack, in one plan.

The subscription pays for the place. The GPU wallet only draws down when you render something — and what you don't use banks. Nothing expires.

For Individuals
Pro
$25/ month

$5 tool fee + a $20 GPU wallet

$20/mo
  • Unlimited workflows
  • Every model, including video
  • 16 runs in parallel
  • Animation capture
  • 15 GB storage
  • Unused wallet banks
Get Pro
For Teams
Team
$99/ month

$24 base + a $75 pooled wallet

$75/mo
  • Everything in Pro
  • Unlimited seats
  • 32 runs in parallel, per seat
  • Shared brand rules
  • 50 GB workspace storage
  • One bill, one wallet
Choose Team
Enterprise
Custom

Invoiced annually

  • Everything in Team
  • 64 in parallel, or your number
  • Custom wallet and storage
  • SSO and SAML
  • No-train guarantee and indemnity
  • Custom retention terms
Talk to us

Full plan and limit breakdown →

007 / FAQ

Questions, answered.

What is Vmotif?

A canvas for design work with AI. You connect image, prompt, code and screen nodes, pick a model for each step, and run the whole graph. The built-in agent can build and run it for you from a brief, and everything it makes stays on the canvas as nodes you can edit and rerun.

Is there a free plan?

You can open any shared canvas without an account, pan around it and copy its outputs. Generating your own work needs a plan: Pro, or a seat in a Team workspace.

Plans and limits →

How does the wallet work?

A subscription is a flat tool fee plus a monthly GPU wallet. The wallet only draws down when you generate something, at each model's own price. Whatever you don't use banks into next month, and nothing expires. If a month runs hot you can top the wallet up.

What each model costs →

Do I need my own API keys or model accounts?

No. Every model in the picker is already connected and bills to your wallet, so there is one subscription and no provider accounts to manage. New models appear in the picker as they ship.

How do teams work?

A Team workspace has unlimited seats, one pooled wallet that every member draws from, shared brand rules and 50 GB of workspace storage. Each seat gets 32 runs in parallel. Invite people by email, or let anyone on your company domain join when they sign up.

Can my coding agent use it?

Yes. Vmotif is an MCP server with a REST API. Claude Code, Codex or Cursor sign in with OAuth and can create a canvas, add and wire nodes, run the workflow and read the results, all drawing from the same wallet.

Connect your agent →

What can I take out of it?

Everything. Images download in their original format, code nodes save as real files (TSX, CSS, SVG, JSON, Markdown and more), captured motion exports as video, and the download panel bundles whatever you select into one ZIP.

Can I change plans or cancel?

Anytime. Switch between monthly and yearly or cancel from the billing portal, and resize your wallet from Usage & billing. Yearly takes 20% off the whole bill. A bigger wallet applies immediately, a smaller one at your next renewal, and budget you have already been granted is never taken back.

Something else? The docs FAQ covers sign-in, failed runs and file types →