> ## Documentation Index
> Fetch the complete documentation index at: https://ui-docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Create your first UI in under 2 minutes  - no code required

## What You'll Build

In this quickstart, you'll create a complete settings page with sidebar navigation, toggle switches, and a profile section  - just by describing it.

<Note>
  **No coding experience needed.** VibeFlow generates production-ready React
  code from your description. You can refine it later with natural language.
</Note>

## Prerequisites

* A VibeFlow account (sign up at [ui.vibeflow.ai](https://ui.vibeflow.ai))
* An idea for a UI (or use our example)

That's it.

## Step 1: Describe Your UI

<Steps>
  <Step title="Open VibeFlow UI">
    Go to [ui.vibeflow.ai](https://ui.vibeflow.ai) and sign in.
  </Step>

  <Step title="Write your prompt">
    In the prompt area, describe the UI you want to create. Be specific about
    layout, components, and interactions.

    Try this example:

    *"A settings page with a sidebar nav, toggle switches for notifications and dark mode, a profile avatar upload section, and a save button with toast confirmation."*
  </Step>

  <Step title="Continue">
    Press **Generate** or hit `Cmd + Enter` to proceed to the design direction
    step. This doesn't generate yet  - it takes you to style selection.
  </Step>
</Steps>

<img src="https://mintcdn.com/ui-docs/W-sne_ZvKY9t0PHX/images/quickstart-prompt.png?fit=max&auto=format&n=W-sne_ZvKY9t0PHX&q=85&s=a573a0eec1f0faa47875eadf618b27d2" alt="Writing a prompt in VibeFlow UI" style={{ width: "100%", borderRadius: "8px", marginBottom: "1.5rem" }} width="1376" height="768" data-path="images/quickstart-prompt.png" />

## Step 2: Choose a Design Direction

You'll see three visual path cards:

<Steps>
  <Step title="Pick a path">
    Choose one of:

    * **Styles**  - Select a visual aesthetic like Glassmorphism or Neobrutalist
    * **Design System**  - Use an existing design system you've uploaded
    * **Start Fresh**  - Let the AI choose a clean, neutral style
  </Step>

  <Step title="Select a style (if applicable)">
    If you chose **Styles**, click one of the 9 style cards to select it. You'll
    see a preview image for each one.
  </Step>

  <Step title="Generate UI">
    Click **Generate UI**. VibeFlow's AI will create your entire interface.
  </Step>
</Steps>

<img src="https://mintcdn.com/ui-docs/W-sne_ZvKY9t0PHX/images/quickstart-design-direction.png?fit=max&auto=format&n=W-sne_ZvKY9t0PHX&q=85&s=ef67305178f6eb8b7fbf46e520dc47e9" alt="Choosing a design direction with visual path cards" style={{ width: "100%", borderRadius: "8px", marginBottom: "1.5rem" }} width="1376" height="768" data-path="images/quickstart-design-direction.png" />

## Step 3: Refine in the Editor

You'll land in the editor with your generated UI visible in the preview panel.

<Steps>
  <Step title="Review the result">
    Your UI is rendered live in the preview. Scroll through it to see all the
    components the AI generated.
  </Step>

  <Step title="Make changes with chat">
    Use the chat input to describe refinements:

    * *"Make the sidebar collapsible on mobile"*
    * *"Change the primary color to indigo"*
    * *"Add a search bar at the top"*
  </Step>

  <Step title="Publish">
    When you're happy with the result, click **Publish** in the top-right corner
    to deploy to a live URL.
  </Step>
</Steps>

## What You Just Built

You now have a complete, deployed React application with:

* **Responsive layout** with sidebar navigation
* **Interactive components**  - toggles, buttons, form elements
* **Clean code**  - production-ready React with proper component structure
* **Live URL**  - accessible to anyone on the internet

## Next Steps

<CardGroup cols={2}>
  <Card title="Explore UI Styles" icon="palette" href="/design-foundation/styles">
    See all 9 visual aesthetics and when to use each one
  </Card>

  <Card title="Learn the Editor" icon="pen-to-square" href="/editor/overview">
    Master the chat interface, preview panel, and publishing flow
  </Card>

  <Card title="Clone a Website" icon="globe" href="/creating-projects/clone-website">
    Turn any existing website into an editable React project
  </Card>

  <Card title="Browse Templates" icon="grid-2" href="/community/templates">
    Start from a community template instead of a blank canvas
  </Card>
</CardGroup>