Workspace Modes: Vibe, Design, Logic, and CMS
Flowmo gives you four workspace modes, each focused on a different part of the website-building process. Instead of cramming every tool into one screen, each mode reconfigures your sidebars, toolbars, and canvas so you only see what you need for the task at hand.
You switch modes using the Mode Toggle — a pill-shaped control in the top bar. Each mode is represented by an icon, and the active mode is highlighted. Switching is instant and non-destructive; your work in every mode is preserved independently.
Prerequisites
- An active Flowmo project (any project type gives you access to Vibe, Design, and Logic modes out of the box).
- Basic familiarity with the Flowmo editor layout: left sidebar, canvas, and right sidebar.
Mode Toggle Overview
The Mode Toggle lives in the top bar of the editor. Here are the modes and their icons:
| Mode | Icon | Always Visible? |
|---|---|---|
| Vibe | Zap | Yes |
| Design | Paintbrush | Yes |
| Logic | Workflow | Yes |
| CMS | Database | Only when your project has at least one CMS collection |
Click any icon in the toggle to switch. Hover over an icon to see a tooltip reading the mode name (e.g., "Vibe Mode", "Design Mode").
Step-by-Step: Each Mode
1. Vibe Mode — AI-Powered Prototyping
Vibe Mode is your starting point for turning ideas into designs through conversation. Rather than placing elements manually, you describe what you want and the AI generates it.
How to use it:
- Click the Zap icon in the Mode Toggle to enter Vibe Mode.
- Type a prompt describing what you want — a hero section, a full landing page, a pricing grid, or anything else.
- The AI generates your design in a preview buffer. Nothing touches your actual project until you approve the result.
- Review the output. You can refine it with follow-up prompts or approve it to merge everything into your canvas.
What changes in the UI:
- The left sidebar shows an AI conversation panel with the Pages and Canvas tabs available.
- The Layers section remains visible below the tabs.
- The right sidebar adapts to show AI-related controls.
Best for: Starting new projects, exploring layout ideas quickly, generating full page structures, or skipping manual setup entirely.
2. Design Mode — Full Visual Editor
Design Mode is the core of Flowmo. This is where you get pixel-level control over every element on your canvas — layout, typography, color, spacing, animations, and more.
How to use it:
- Click the Paintbrush icon in the Mode Toggle to enter Design Mode.
- Use the top bar toolbar to create elements: frames, shapes (square, triangle, circle, star), text blocks, media (images, video, Lottie, Spline, image sequences), and vector paths.
- Select any element on the canvas to open its properties in the right sidebar — layout, sizing, typography, fills, borders, effects, interactions, and styles.
- Use the left sidebar to navigate your project:
- Pages tab — view and manage your project's pages.
- Canvas tab — access your design system and canvas-level settings.
- Layers section — sits below the tabs and shows the element hierarchy for the current page. Select, reorder, and rename layers here.
What you do here:
- Precise layout work and responsive design across breakpoints.
- Fine-tuning spacing, typography, and color.
- Setting up interactions and animations on the timeline.
- Building and managing reusable components.
Best for: Hands-on design work. This is where the majority of your time in the editor is spent.
3. Logic Mode — Visual Programming
Logic Mode transforms the editor into a node-based visual programming environment. You wire up component behaviors, state flows, event handlers, and hooks spatially — without writing code by hand.
How to use it:
- Click the Workflow icon in the Mode Toggle to enter Logic Mode.
- The left sidebar switches to show a Flow List Panel where you can create, select, and manage your logic flows.
- Below the flow list, the Layers section remains visible so you can reference your element hierarchy.
- The canvas becomes a node-based editor. Connect nodes to define behaviors, props, event handlers, and state management.
- Work at three levels of depth:
- Overview — see how components relate to each other across your project.
- Detail — zoom into a specific component to define its behaviors and props.
- Logic — the deepest level, for precise AST-driven implementation details.
Best for: Building interactive applications where you need to define how components behave, communicate, and respond to user input.
4. CMS Mode — Content Management
CMS Mode turns the editor into a content management configuration tool. It only appears in the Mode Toggle when your project has at least one CMS collection — if you do not see it, create a collection first.
How to use it:
- Create at least one CMS collection in your project (this makes the CMS mode icon appear in the toggle).
- Click the Database icon in the Mode Toggle to enter CMS Mode.
- Map design elements to data fields — connect text, images, and other elements to your collection's fields.
- Define custom post types that match your design's content structure.
- Configure repeating sections so they dynamically populate from your CMS data.
- Set up menus, navigation, and export settings.
Best for: When your project needs dynamic, editable content — connecting your visual design to a structured data layer so content can be updated without touching the design.
Tips and Best Practices
- Start in Vibe, refine in Design. Use Vibe Mode to generate a layout direction quickly, then switch to Design Mode to polish every detail.
- Switching modes never destroys work. Each mode is a different lens on the same project. Your canvas, layers, and settings persist across switches.
- Think of modes as lenses, not phases. You are not locked into a linear workflow. Jump between modes freely — ideation, refinement, logic, and content setup can happen in any order.
- Your last active mode is saved. Flowmo remembers which mode you were in and restores it when you reopen the project.
- The Mode Toggle also updates the URL. Each mode sets a
?mode=query parameter, so you can bookmark or share a direct link to a specific mode.
Common Issues
"I don't see CMS Mode in the Mode Toggle."
CMS Mode only appears when your project has at least one CMS collection. Create a collection first — once it exists, the Database icon will appear in the toggle.
"I switched modes and my design disappeared."
It did not. Each mode shows a different view of your project. Switch back to Design Mode and your canvas will be exactly as you left it. In Logic Mode, for example, the canvas is replaced by a node editor — your design elements are still there, just not visible in that view.
"The Mode Toggle only shows two or three icons."
The toggle always shows Vibe, Design, and Logic. CMS only appears conditionally (see above). If you see fewer than three icons, try refreshing the page or checking that your project has fully loaded.