Building
Prebuilt workflows
vmotif ships with 13 prebuilt workflows — fully wired canvases you open, feed a reference, and run. Each one is a starting point you can edit. Here's what every workflow does and what it hands back.
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
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
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
Direction & critique#
Get a point of view before you build — synthesized direction from references, or honest feedback on what exists.
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