Prebuilt workflows
Vmotif ships with 19 prebuilt workflows — maintained, fully wired flows you can open on their own or add to an existing canvas. Feed them a reference, edit any step, and run. Here’s what every workflow does and what it hands back.
Combine workflows on one canvas#
From any editable canvas, open Tools, expand Premade workflows, and choose the plus button on the workflow you want to add. Vmotif inserts the complete flow without replacing your existing nodes or changing routes, then saves it as part of the current canvas. You can also ask the built-in agent—for example, “add the Press Kit workflow to this brand canvas”—and it uses the same maintained template.
Launch & promote#
Give your next launch one clear direction across every asset.
Design → code#
Drop in a screenshot, a live URL, or a brand reference and get production-ready front-end code back.
Component Extractor
Turn a UI design into a typed React component — plus a Storybook story to document it.
UI Component Extractor
Pull every button, card, and form input out of a screenshot as composable React components with all states.
App Screens
From one brand reference, render live, on-brand HTML screens side by side — landing, pricing, and dashboard.
Wireframe Flow
Paste a full product or UX brief and get a connected board of low-fidelity wireframe screens — sitemap first, then one grayscale wireframe per screen.
Animation Capture
Point it at any live site, capture the motion, and reverse-engineer it into a Framer Motion component and CSS.
Design systems & tokens#
Extract a coherent, on-brand system — colors, type, tokens, and theme files ready to drop into a codebase.
Color Palette
Extract a full color scale from any image as oklch CSS variables and Figma-ready design tokens.
Typography Matcher
Live exampleIdentify the typefaces in a design, find the closest Google Fonts, and generate a fluid CSS type system.
Design System Starter
Build a starter system from a brand reference: tokens, globals.css, a Tailwind config, base components, and a preview board.
Logo Icon Generator
Turn a brand name and brief into three deliberately different logo icon concepts — a monogram, an abstracted category metaphor, and a personality mark — each as a production-ready SVG.
Brand Kit
Feed in a logo and a short brief and get a written style guide, an OG image drawn from it, and a Tailwind v4 theme, all on-brand.
Press Kit
Turn a logo and a short brief into an on-brand press kit — cover, story, logo usage, colors, and type — as landscape pages you export to one PDF.
Direction & critique#
Get a point of view before you build — synthesized direction from references, or honest feedback on what exists.
Site Redesign
Paste a URL and Vmotif scrapes the whole site through a real browser, then explores three brand directions rendered as live homepages. Commit one and it regenerates every page as an enhanced, on-brand screen.
Brand Explorer
Describe your brand and explore three deliberately divergent directions — each rendered as a pitch-deck board — then get a scored review and commit to a winner with a full style guide.
Mood Board
Hand it five references and get a synthesized design brief plus a mockup that blends their combined aesthetic.
Design Critique
Get a structured, scored critique of any UI — strengths, critical issues, an accessibility audit, and a fix checklist.
Generate assets#
Produce finished visual assets — vectors, video, and bulk style variations — straight from the canvas.
Retexture Router
Fan one source image out into a grid of preconfigured retexture styles, generated in parallel.
SVG Generator
Generate clean, production-ready SVG markup from a prompt and an optional reference image.
Video Generator
Generate a short, cinematic AI video from a text prompt and an optional reference image.