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

# Démarrage rapide

> De simples mots à un site web full-stack.

Bienvenue dans ce guide de démarrage rapide pour créer un site web full-stack avec Lumi.

## Page d'accueil

<img src="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250821-202133.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=97442ddf98e65bf43b19ba56f6c17969" alt="20250821 202133 Jpe" width="3824" height="1682" data-path="images/20250821-202133.jpeg" />

La page d'accueil contient principalement :

<Columns cols={2}>
  <Card title="Commencer avec une invite" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-154846.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=e8fafb96d5faa0c0ec43a0a0dfdb5f05" width="1618" height="358" data-path="images/screenshot-20250825-154846.png">
    Lancez votre projet avec une seule invite descriptive.
  </Card>

  <Card title="Utiliser un modèle" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-154857.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=3a4d7d4389fbc89e96b9014357cb3e40" width="1336" height="98" data-path="images/screenshot-20250825-154857.png">
    Accélérez le développement en partant de notre collection de modèles sélectionnés.
  </Card>

  <Card title="Explorer la communauté" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-155003.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=2ea3bc083fb9a17998db34d75529494f" width="2970" height="1608" data-path="images/screenshot-20250825-155003.png">
    Parcourez tous les projets publics, y compris les dernières créations et les sélections mises en avant.
  </Card>

  <Card title="Retrouver vos projets" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-155110.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=f069a5eb78bea9ca0f234038acd526eb" width="3824" height="1916" data-path="images/screenshot-20250825-155110.png">
    Parcourez tous les projets que vous avez créés.
  </Card>

  <Card title="Gérer votre compte" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155323.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=611896281375aa724b885f4f28c03ea8" width="3822" height="1916" data-path="images/20250825-155323.jpeg">
    Vérifiez votre solde de crédits mensuel et ajustez les paramètres de votre compte.
  </Card>

  <Card title="Ajuster votre forfait" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155328.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=20009fa87973936ecda6032924e5754e" width="3822" height="1916" data-path="images/20250825-155328.jpeg">
    Mettez à niveau ou rétrogradez votre abonnement à tout moment et en toute simplicité.
  </Card>
</Columns>

## Page de projet

<img src="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-160241.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=a3ad5075591b6b38cc9c65aeb1b99c90" alt="Screenshot 20250825 160241 Pn" width="3814" height="1916" data-path="images/screenshot-20250825-160241.png" />

La page de projet est divisée en 3 sections principales :

<Columns cols={2}>
  <Card title="Le chat IA" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155522.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=d3231c7a4837f6899fe90820a7ad4f0e" width="3840" height="1916" data-path="images/20250825-155522.jpeg">
    C'est votre centre de commande pour interagir avec Lumi. Utilisez-le pour donner des instructions, demander des modifications, réfléchir à des idées et guider le développement de votre application.
  </Card>

  <Card title="Aperçu" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155526.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=5eb8c40ef71ecde175fb7e9b367e2abd" width="3840" height="1916" data-path="images/20250825-155526.jpeg">
    C'est une vue en direct, interactive et entièrement personnalisable de votre site web. Cliquez sur n'importe quel élément pour tester sa fonctionnalité ou effectuer des ajustements directs avec l'éditeur visuel.
  </Card>

  <Card title="Espace de travail" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155529.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=8efc9e5f82cc14c5604ff02d1d8751a5" width="3840" height="1916" data-path="images/20250825-155529.jpeg">
    Cela inclut des informations sur votre site web, les fonctions backend, l'utilisation des outils, le nom de domaine, la sécurité, etc.
  </Card>
</Columns>

## Le chat IA

L'action principale du chat IA est d'utiliser des invites en langage naturel pour construire et affiner votre application. Cependant, il y a des éléments en bas de la zone de saisie à explorer un peu plus.

<img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/Result_2.png?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=fbc0b4aeff6eb6c9b60e894f13bc99de" alt="Result 2 Pn" width="1604" height="338" data-path="images/Result_2.png" />

<u>Remarque</u> : Pour chaque invite que vous saisissez, vous pouvez revenir dans le chat et cliquer sur « Annuler cette action » à tout moment pour annuler votre invite. Il vous sera demandé de confirmer votre demande, puis l'application reviendra à l'état dans lequel elle se trouvait juste avant ce point.

<Note>
  **<u>Remarque :</u>** Pour chaque invite que vous saisissez, vous pouvez revenir dans le chat et cliquer sur « Annuler » à tout moment pour annuler votre invite. Il vous sera demandé de confirmer votre demande, puis l'application reviendra à l'état dans lequel elle se trouvait juste avant ce point.

  <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-154652.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=5ba3ab426454dfb5f020b99d199d6f32" alt="20250911 154652 Jpe" width="960" height="450" data-path="images/20250911-154652.jpeg" />
</Note>

## Construire votre première application : étape par étape

<Steps>
  <Step title="Commencer avec une invite claire">
    Décrivez la fonction principale de votre application en langage simple.

    Par exemple :

    ```mdx theme={null}
    Build a task manager for teams to assign, track, and complete tasks with progress reports.
    ```
  </Step>

  <Step title="Générer votre application instantanément">
    Lumi construira automatiquement l'interface et le backend de votre application. Vous pouvez observer le processus se dérouler en direct dans le panneau d'aperçu.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-155051.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=e12430ce9ede5193248a77c6c56a4cfb" alt="20250911 155051 Jpe" width="3840" height="1916" data-path="images/20250911-155051.jpeg" />
  </Step>

  <Step title="Affiner et personnaliser">
    Utilisez le chat IA pour des ajustements généraux ou les [Éditions visuelles](/fr/features/visual-edits) pour peaufiner les détails comme les couleurs et la mise en page. Activez le [Mode Discussion](/fr/features/modes#discuss-mode) pour collaborer avec l'IA sur une logique complexe avant l'implémentation.
  </Step>

  <Step title="Tester minutieusement">
    Interagissez avec votre site web dans le panneau d'aperçu comme le ferait un utilisateur, en cliquant sur chaque fonctionnalité pour vous assurer qu'elle fonctionne parfaitement.
  </Step>

  <Step title="Partager et publier">
    Une fois que vous êtes prêt à passer en ligne, cliquez sur le bouton « Publier » pour déployer votre site et le présenter au monde entier.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-160827.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=7fd2a73b38e219cc8fcfbb818cac7fe7" alt="20250911 160827 Jpe" width="2896" height="1702" data-path="images/20250911-160827.jpeg" />
  </Step>
</Steps>
