Getting started

Open vmotif.com/app and sign in with Microsoft, Google, or your email and password. That’s the only step before you can build — there’s no separate setup or install.

You can browse first without an account: every prebuilt workflow has its own page (open Workflows at the top of the site), and its See the graph button opens the node graph on a demo canvas. Sign in when you want to run something of your own.

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

1. 01

   Pick a prebuilt workflow

   From the Workflows menu at the top of the site, 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. 02

   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. 03

   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. 04

   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.

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 saved project has its own canvas, and one canvas can contain several prebuilt workflows. Add another from Tools → Premade workflows when you want to continue a project without starting over on a new route.
• 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.

Once you’ve run a prebuilt workflow, the next step is building your own. The Canvas section walks through every node type, the tools around them, the built-in agent, the full-screen editors and the keyboard shortcuts; Developers covers driving the same canvas from Claude Code, Codex or your own code.