Skip to main content
The most powerful way to use VibeFlow UI - describe what you want and let AI build it.

​
How It Works

1

Write your prompt

Describe the interface you want. The more specific you are about layout, components, and behavior, the better the result.
2

Choose a design direction

Pick a visual style, apply a design system, or start fresh with a clean slate.
3

Generate

VibeFlow’s AI creates a complete React application with proper component structure, styling, and interactivity.
4

Refine

Use the editor’s chat interface to make changes. Every modification is applied in real time.

​
Writing Good Prompts

The quality of your generated UI depends heavily on your prompt. Here’s what makes a great prompt:

​
Be Specific About Layout

Vague

“A dashboard”

Specific

“A dashboard with a fixed sidebar on the left, a top header with search and user avatar, and a main content area with 4 metric cards in a grid followed by a data table”

​
Mention Components and Interactions

Include details about:
  • UI elements: buttons, inputs, modals, dropdowns, tabs, toggles
  • Data: what kind of content should appear (user names, dates, prices)
  • States: hover effects, loading states, empty states, error states
  • Responsive behavior: how it should adapt on mobile

​
Example Prompts

“A product detail page with a large image gallery on the left (with thumbnail strip), product info on the right including title, price, star rating, size selector, color swatches, quantity picker, and an Add to Cart button. Below the fold: a tabbed section with Description, Reviews, and Shipping info.”
“A pricing section with three tier cards (Starter, Pro, Enterprise), a monthly/yearly toggle at the top, feature comparison checkmarks in each card, a highlighted ‘Most Popular’ badge on the Pro card, and a FAQ accordion below.”
“An admin dashboard with a dark sidebar containing nav links with icons, a top bar with breadcrumbs and notifications bell, 4 KPI cards (revenue, users, orders, conversion rate) with sparkline charts, and a recent orders table with status badges and pagination.”
“A settings page with a vertical tab navigation on the left (Profile, Security, Notifications, Billing). The Profile tab shows: avatar upload with drag-and-drop, name and email fields, bio textarea, timezone dropdown, and Save/Cancel buttons.”

​
Design Direction

After writing your prompt, you choose one of three paths:

​
Styles

Pick from 9 curated visual aesthetics. Each style influences colors, borders, shadows, spacing, and typography. See all styles in the Styles reference.

​
Design System

Apply your own component library and design tokens. The AI will use your guidelines, colors, and components to generate UI that matches your brand. Learn more in Design Systems.

​
Start Fresh

No style, no design system. The AI picks a clean, modern aesthetic based on what fits your described UI best.
Pro tip: You can always change or apply a style later from the editor. Start Fresh is a great default if you’re exploring ideas.

​
Template Chips

Not sure what to build? The prompt area includes template chips - pre-written prompts you can click to instantly fill in:
  • Settings panel - sidebar nav, toggles, profile upload, save button
  • Sign-up form - email/password fields, social login, progress stepper
  • Pricing cards - three tiers, feature comparison, monthly/yearly toggle
Click any chip to populate the prompt, then customize it to your needs.

​
What Gets Generated

When you click Generate UI, VibeFlow creates:
  • A complete React application with Vite and React Router
  • Properly structured components with clean naming
  • Tailwind CSS styling matching your chosen design direction
  • Interactive elements - buttons, inputs, toggles, modals all wired up
  • Responsive layout that works on desktop and mobile