Building
Prebuilt workflows
vmotif ships with 18 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.
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.
You bring: UI design
UI Component Extractor
Pull every button, card, and form input out of a screenshot as composable React components with all states.
You bring: UI screenshot
App Screens
From one brand reference, render live, on-brand HTML screens side by side — landing, pricing, and dashboard.
You bring: Brand reference
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.
You bring: Product / UX brief
Animation Capture
Point it at any live site, capture the motion, and reverse-engineer it into a Framer Motion component and CSS.
You bring: Live URL
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.
You bring: Image
Typography Matcher
Live exampleIdentify the typefaces in a design, find the closest Google Fonts, and generate a fluid CSS type system.
You bring: Design
Design System Starter
Build a starter system from a brand reference: tokens, globals.css, a Tailwind config, base components, and a preview board.
You bring: Brand assets
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.
You bring: Brand name + brief
Brand Kit
Feed in a logo and get a social OG image, a written style guide, and a Tailwind v4 theme — all on-brand.
You bring: Logo
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.
You bring: Logo + brief
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.
You bring: Website URL
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.
You bring: Brand brief
Mood Board
Hand it five references and get a synthesized design brief plus a mockup that blends their combined aesthetic.
You bring: 5 references
Design Critique
Get a structured, scored critique of any UI — strengths, critical issues, an accessibility audit, and a fix checklist.
You bring: UI screenshot
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.
You bring: Source image
SVG Generator
Generate clean, production-ready SVG markup from a prompt and an optional reference image.
You bring: Prompt + reference
Video Generator
Generate a short, cinematic AI video from a text prompt and an optional reference image.
You bring: Prompt + reference