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

# Welcome to Blox

> Build high-performance mobile apps with the power of AI and Figma.

<img className="block dark:hidden" src="https://mintcdn.com/blox-2f771b73/I1QnGGz1IJIWm15O/logo.svg?fit=max&auto=format&n=I1QnGGz1IJIWm15O&q=85&s=c19650e11100b8762ed268b84a584154" alt="Hero Light" width="120" height="28" data-path="logo.svg" />

<img className="hidden dark:block" src="https://mintcdn.com/blox-2f771b73/I1QnGGz1IJIWm15O/logo.svg?fit=max&auto=format&n=I1QnGGz1IJIWm15O&q=85&s=c19650e11100b8762ed268b84a584154" alt="Hero Dark" width="120" height="28" data-path="logo.svg" />

## Building with Blox

Blox is an AI-native app builder that bridges the gap between design and production code. Whether you're starting from a Figma file or a text prompt, Blox helps you go from idea to App Store in record time.

<CardGroup cols={2}>
  <Card title="Figma to Code" icon="figma" href="/development/figma-import">
    Import your designs and let Blox turn them into clean, functional React Native code.
  </Card>

  <Card title="AI Agent" icon="robot" href="/development/ai-prompts">
    Describe features or UI changes in plain English and watch Blox implement them.
  </Card>

  <Card title="Mobile Preview" icon="mobile" href="/development/mobile-preview">
    Test your app instantly on physical devices with our lightning-fast preview engine.
  </Card>

  <Card title="App Store Ready" icon="rocket" href="/publishing/app-store">
    Automated builds and publishing workflows to get your app into users' hands.
  </Card>
</CardGroup>

## The Blox Philosophy

We believe that mobile development should be as fast as thinking. By combining professional-grade design tools with state-of-the-art AI, we're removing the boilerplate from app building.

### Key Workflows

<Steps>
  <Step title="Design">
    Use our pre-built component library or import your custom designs from Figma.
  </Step>

  <Step title="Refine">
    Use the AI agent to add complex logic, integrations, and branding details.
  </Step>

  <Step title="Deploy">
    Export your clean code or use our managed deployment pipeline to hit the stores.
  </Step>
</Steps>
