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

# Quickstart

> Start building your first mobile app in under 5 minutes

## Setting up your Workspace

Learn how to get Blox set up and ready for your first project.

### 1. Create an account

Go to [app.useblox.com](https://app.useblox.com) and sign up. You'll be greeted by your personal dashboard where all your projects live.

### 2. Connect Figma

To get the best results, connect your Figma account. This allows Blox to read your design tokens and components directly.

<Note>
  Make sure your Figma layers are clearly named. The Blox AI agent loves clean layer structures!
</Note>

## Build your first App

Follow these steps to generate your first functional mobile interface.

### Initialize Project

Click on "New Project" and give it a name. You can choose to start from a template or a blank canvas.

### Prompt the Agent

In the editor sidebar, type a prompt like:

> "Create a login screen with a glassmorphism effect and a 'Forgot Password' link."

The AI will generate the React Native code and styling in real-time.

### Preview on Mobile

Download the **Blox Preview** app from the App Store. Scan the QR code in your dashboard to see your app running live on your phone.

<Tip>
  Any changes you make in the editor (via code or AI) will update the preview instantly. No more waiting for builds!
</Tip>

## Next Steps

Now that you've built your first screen, here's how to go deeper:

<CardGroup cols={2}>
  <Card title="Advanced Logic" icon="gears" href="/development/logic">
    Learn how to add API calls and state management.
  </Card>

  <Card title="Custom Components" icon="puzzle-piece" href="/development/components">
    Build and reuse your own component library.
  </Card>
</CardGroup>