> ## 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.

# Welcome to VibeFlow UI

> Go from idea to polished UI in seconds  - describe it, style it, ship it

<img src="https://mintcdn.com/ui-docs/W-sne_ZvKY9t0PHX/images/hero-ui-generation.png?fit=max&auto=format&n=W-sne_ZvKY9t0PHX&q=85&s=8258873d514b8a5678a4e9cc9d5d16c0" alt="VibeFlow UI  - describe your interface and watch it come to life" style={{ width: "100%", borderRadius: "12px", marginBottom: "2rem" }} width="1376" height="768" data-path="images/hero-ui-generation.png" />

## What is VibeFlow UI?

VibeFlow UI is an **AI-powered interface builder** that turns natural language descriptions into production-ready React applications. Instead of sketching wireframes and writing boilerplate, you describe what you want and VibeFlow generates a complete, styled, deployable UI.

It's designed for designers, founders, and developers who want to move fast  - from rough idea to live prototype in minutes, not days.

<CardGroup cols={3}>
  <Card title="Describe" icon="pen-to-square">
    Write what you want in plain English. A pricing page, a dashboard, a sign-up flow  - anything.
  </Card>

  <Card title="Style" icon="paintbrush">
    Pick from 9 visual styles or apply your own design system for consistent branding.
  </Card>

  <Card title="Ship" icon="rocket">
    Publish instantly to a live URL. Your UI is a real React app from the start.
  </Card>
</CardGroup>

## Three Ways to Create

<CardGroup cols={3}>
  <Card title="From Scratch" icon="wand-magic-sparkles" href="/creating-projects/from-scratch">
    Describe your UI in natural language and let AI generate it.
  </Card>

  <Card title="Clone a Website" icon="globe" href="/creating-projects/clone-website">
    Paste any URL and get an editable React clone in seconds.
  </Card>

  <Card title="Import from Figma" icon="figma" href="/creating-projects/figma-import">
    Convert Figma designs directly into working React components.
  </Card>
</CardGroup>

## Design Foundation

Every great UI starts with a visual direction. VibeFlow gives you two ways to set one:

* **UI Styles**  - Choose from 9 curated aesthetics (Neobrutalist, Glassmorphism, Cyberpunk, and more). Each style guides the AI to generate components that match a specific visual language.
* **Design Systems**  - Bring your own component library. Upload tokens, components, and guidelines so every generated UI matches your brand.

<Tip>
  **Not sure which style to pick?** Start with "Start Fresh" and let the AI
  choose. You can always apply a style later from the editor.
</Tip>

## The Editor

Once your UI is generated, you land in a full editing environment:

* **AI Chat**  - Refine your UI by describing changes in natural language. "Make the header sticky", "Add a dark mode toggle", "Change the font to Inter".
* **Live Preview**  - See every change rendered in real time in an embedded browser.
* **One-Click Publish**  - Deploy your UI to a live URL instantly.

## Community

Browse hundreds of community-built templates and remix them into your own projects. Every template is a real project you can fork, customize, and deploy.

## Getting Started

<CardGroup cols={2}>
  <Card title="Quick Start" icon="play" href="/quickstart">
    Build your first UI in under 2 minutes
  </Card>

  <Card title="Explore Styles" icon="palette" href="/design-foundation/styles">
    See all 9 visual styles with preview images
  </Card>
</CardGroup>