Getting Started with Vibe Mode
Vibe Mode is Flowmo's AI-powered design workspace. Instead of manually placing elements on a canvas, you describe what you want in plain language and the AI builds it for you. It is a creative partner that turns your ideas into real, editable designs in seconds.
What sets Vibe Mode apart is its preview-first approach. Every design the AI generates goes into a temporary preview buffer, not directly onto your canvas. You can review, iterate, refine, and compare multiple variations before anything touches your actual project. Nothing changes until you explicitly approve it.
Prerequisites
Before you start using Vibe Mode, make sure you have:
- An active Flowmo project open in the designer. Vibe Mode works within the context of a project, so you need one loaded before switching modes.
- A rough idea of what you want to build. You do not need a pixel-perfect specification, but having a direction in mind (for example, "a pricing page" or "a hero section with a dark gradient") helps the AI deliver stronger results on the first prompt.
No prior experience with AI tools is required. If you can describe what you want, Vibe Mode can build it.
How to Enter Vibe Mode
- Open your project in the Flowmo designer.
- Look at the mode toggle in the top bar. You will see a set of rounded icons: Vibe (lightning bolt), Design (paintbrush), Logic (workflow), and optionally CMS (database).
- Click the Vibe icon (the Zap/lightning bolt).
The interface shifts to the Vibe Mode workspace. The AI chat panel opens on the right side of the screen, and a live preview area takes over the main canvas. You are ready to start prompting.
Tip: The tooltip reads "Vibe Mode" when you hover over the icon. You can switch between modes at any time without losing your Vibe Mode previews.
Step-by-Step Workflow
Here is how a typical Vibe Mode session works, from your first prompt through to a finished design on your canvas.
Step 1: Describe What You Want
Type a natural-language prompt into the chat panel on the right. The text input placeholder reads: "Describe what you want to do, and I'll select the right tool..." — because Vibe Mode uses the Smart Router by default (more on that below).
Be as specific as you like. The more context you give, the better the result.
Example prompts:
"Create a hero section with a bold headline, subtitle, and CTA button on a dark gradient background."
"Build a SaaS landing page with a pricing table, testimonials, and a minimal dark theme."
Press Enter or click the send button (arrow-up icon) to submit.
Step 2: Review the AI-Generated Preview
The AI generates your design and renders it in the preview area — a live, interactive iframe in the center of your workspace. Results typically appear within a few seconds.
While the AI is working, a progress tracker shows what it is doing (for example, "Analyzing visual hierarchy," "Drafting layout system," "Harmonizing color palettes").
Once the design is ready, you will see:
- A message in the chat panel: "Homepage design generated! Review the preview below."
- An amber banner at the top of the preview that reads: "Preview only — not yet added to project"
- An "Add to Canvas" button inside that banner and as a primary action button on the chat message itself.
Step 3: Iterate with Follow-Up Prompts
Your first result does not have to be the final one. Send follow-up prompts to refine the design without starting from scratch:
- "Make the headline bigger and center it vertically."
- "Change the color scheme to dark mode with glassmorphism."
- "Add a second CTA button below the first one."
- "Swap the background for a subtle grid pattern."
Each follow-up builds on the current state of the preview, so you are always moving forward. The Smart Router automatically figures out whether your follow-up should be handled by the design assistant or the element editor — you do not need to switch anything manually.
Step 4: Select and Edit Elements Directly
You can interact with the preview directly, not just through prompts:
- Click any element in the preview iframe to select it.
- A floating design toolbar appears near your cursor with quick controls for adjusting position, size, styles, and text.
- Make adjustments visually without typing another prompt.
When you click an element, it also focuses the AI's attention on that element. Your next prompt will automatically have that element's context attached, so you can say things like "make this bigger" or "change the font" and the AI knows exactly what you mean.
Step 5: Compare Multiple Variations with Pending Pages
When the AI generates designs (especially multi-page sites), they appear as pending preview pages in a dropdown selector in the preview top bar.
The dropdown groups items into two sections:
- Preview (not yet added) — designs the AI has generated but you have not approved yet. These are tagged with an amber "Preview" badge.
- On canvas — pages that are already part of your project.
Select any pending page from the dropdown to view it in the preview area. This lets you compare different AI-generated variations before deciding which ones to keep.
Step 6: Add Your Approved Design to the Canvas
When you are happy with a design, you have two ways to commit it:
- Click "Add to Canvas" on the amber banner at the top of the preview area.
- Click "Add to Canvas" on the action button attached to the AI's message in the chat panel.
The design is imported into your actual project as a wrapped page. After approval, the chat may offer additional actions:
- "Generate Remaining Pages" — if your project has a multi-page sitemap, the AI can generate the rest of the pages automatically.
- "Generate Custom Images" — replaces placeholder images with AI-generated visuals that match your design's style direction.
- "Just Add to Canvas" — skips additional page generation and keeps only the homepage.
Smart Routing
You do not need to tell the AI which tool to use. Vibe Mode defaults to the Smart Router, which automatically analyzes your prompt and routes it to the right specialized assistant:
| What you describe | Where it goes |
|---|---|
| :--- | :--- |
| Layout and visual design ("Create a three-column pricing table") | Design Assistant |
| Animations and scroll effects ("Fade in the headline on scroll") | Interactions Assistant |
| Tweaks to existing elements ("Change the button color to blue") | Element Editor |
| Image generation ("Generate an illustration of a mountain") | Image Generation |
| Video creation ("Create a product demo video") | Video Generation |
| Publishing and CMS ("Connect to WordPress", "Go live") | Settings Assistant |
| Interactive components with code ("Add a particle effect background") | Code Component |
This routing happens behind the scenes. You simply describe what you want, and the AI figures out the rest. If the router is not confident, it will ask a clarifying question before proceeding.
The Preview Top Bar
When you are in Vibe Mode, the preview top bar gives you several controls:
- Device buttons (phone, tablet, laptop icons) — switch the preview between mobile (390px), tablet (820px), and desktop widths.
- Refresh — force-refresh the preview rendering.
- Zoom — click the "Zoom" button to open a slider (10% to 300%) with a "Reset to 100%" option and a "Fit to Screen" button.
- Page selector dropdown — browse and switch between pending preview pages and on-canvas pages.
- Publish — access the publish menu directly from Vibe Mode.
Tips and Best Practices
- Be specific in your prompts. "SaaS landing page with a pricing table, testimonials section, and dark gradient background" produces dramatically better results than "make a website." Give the AI something concrete to work with.
- Use follow-up prompts to refine, not start over. Each follow-up builds on the current design, which is faster and more predictable than generating from scratch every time.
- Click elements to focus the AI. Selecting an element in the preview before sending a prompt gives the AI precise context about what you want to change.
- Compare before you commit. Generate a few variations and use the pending pages dropdown to browse them before approving. It is faster than trying to perfect a single version.
- Mention specific elements when refining. Instead of "make it look better," try "make the headline 48px and change the CTA button to a rounded pill shape." Precision drives accuracy.
- Switch modes freely. You can jump to Design Mode or Logic Mode at any time using the mode toggle. Your Vibe Mode previews remain available when you switch back.
- Attach images for context. You can attach reference images, screenshots, or PDFs to your prompt using the attachments menu below the input. This helps the AI match a specific visual direction.
Common Issues
"My changes disappeared"
In Vibe Mode, all AI-generated output lives in the preview buffer, not on your actual canvas. If you switched modes or refreshed without clicking "Add to Canvas" first, the design was not committed to your project. Always approve your design before leaving Vibe Mode.
"The floating toolbar is not showing"
The floating design toolbar only appears when you have an element selected in the preview. Click directly on an element (a heading, button, image, etc.) inside the preview iframe, and the toolbar will appear near your cursor. If the toolbar still does not show, try clicking a different element — some container-level elements may not trigger the toolbar.
"The AI is not understanding my request"
Try these approaches:
- Be more specific. Instead of "change the layout," say "move the image to the left and the text to the right in a two-column grid."
- Reference the element you want to change. "Make the second heading smaller" is clearer than "make it smaller."
- Click the element first. Select it in the preview before sending your prompt so the AI has the exact context.
- Break complex requests into steps. Instead of describing an entire page in one prompt, build it section by section.
"The preview banner says 'Preview only — not yet added to project'"
This is expected behavior. The amber banner is a reminder that what you see is a temporary preview. Click "Add to Canvas" on the banner or in the chat message to commit the design to your project.