Get started

Getting started

vmotif is a node-based canvas for AI design work. You connect image, prompt, and code nodes into a workflow, run it, and get back real files — typed React, design tokens, critiques, or finished assets. Here's how to ship your first one.

Sign in#

Open vmotif.com/appand sign in with Google. That’s the only step before you can build — there’s no separate setup or install.

You can browse first without an account: every public example on the Workflows page opens as a read-only canvas. You can pan around the node graph and copy any output. Sign in when you want to run something of your own.

Run your first workflow#

The fastest path is to start from a prebuilt workflow — the nodes and models come pre-wired, so you only supply the input.

  1. Pick a prebuilt workflow

    From the Workflows page, choose one that matches what you want — e.g. Component Extractor to turn a UI screenshot into React, or Color Palette to pull tokens out of an image. It opens on the canvas ready to run.

  2. Drop in your reference

    Add your input to the image node — upload a screenshot, a brand asset, or paste a URL, depending on the workflow. This is the only thing each prebuilt workflow needs from you.

  3. Run it

    Hit run. vmotif executes the workflow top-down: each prompt node runs once its inputs are ready, and outputs drop onto the canvas as image, code, or asset nodes.

  4. Take the output

    Copy the generated code or download the asset straight off the output node. Outputs are real files — typed React, valid tokens, actual images — not previews.
Every prebuilt workflow follows the same shape: you supply input, run, take output.
Prefer to describe what you want instead of wiring nodes yourself? Describe it in the built-in agent chat — it creates and connects the nodes, picks a model per step, and runs the workflow, so you can steer it conversationally rather than building by hand.

Saving and revisiting#

Your canvas saves automatically as you work — there’s no save button. Every workflow lives in your account, so you can close the tab and pick up exactly where you left off.

  • Each workflow is its own canvas. Create as many as you need (limits depend on your plan — see Plans & limits).
  • Share a workflow read-only with the in-app Share toggle — anyone with the link can open and inspect it without an account. See Sharing.

Where to go next#

Once you’ve run a prebuilt workflow, the next step is building your own — learn how nodes connect, or browse the full catalog of prebuilt workflows.

Open the canvasLearn nodes & connections