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

# Construisez votre design

> Transformez la frame gagnante en véritable logiciel : construisez-la comme une nouvelle application, ou appliquez son style à une application que vous avez déjà.

Une frame de design n'est jamais qu'une simple image, c'est la spécification d'un véritable logiciel. Quand une frame est la bonne, confiez-la à Agent : sélectionnez la frame, choisissez **Build…** dans sa barre d'actions, et choisissez une voie :

* Construire le design comme une nouvelle application dans le même projet
* Appliquer le style du design à une application que vous avez déjà
* Revenir en arrière en toute sécurité dans les deux cas, Agent crée un point de contrôle avant de démarrer

## Deux voies de la frame à l'application

Le menu **Build…** sur une frame Design sélectionnée couvre les deux cas :

<Frame caption="Le menu Build… : créer un nouvel artefact, ou appliquer le design à un artefact existant.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=494228a2a81e9f943376d78e77b96417" alt="Le menu Build ouvert sur une frame Design sélectionnée (APEX X1 Exact Replica) avec l'en-tête « Build or apply your designs », affichant « Build this design », qui crée un nouvel artefact, et « Apply to an existing creation » listant le système de design APEX X1 du projet et son site web Scroll Hero" width="2000" height="1153" data-path="images/replitai/canvas-build-menu.png" />
</Frame>

### Construire ce design

Choisir **Build this design** démarre un nouvel artefact à partir de la frame. Agent construit la mise en page, le style et les ressources dans une application vivante et fonctionnelle qui apparaît dans la liste des artefacts de votre projet.

### Appliquer à une application existante

Le menu liste aussi tous les artefacts du projet. En choisir un applique le design à celui-ci : Agent réécrit le code de l'artefact pour qu'il corresponde à la frame, et la frame Design reste sur le canvas comme référence. C'est ainsi que vous pouvez restyliser une application déjà construite sans repartir de zéro.

## Le déroulement

<Steps>
  <Step title="Choisir le design à construire">
    Arrêtez-vous sur la frame que vous voulez livrer. Comparez d'abord les candidats côte à côte sur le canvas : construire clôt cette phase d'exploration, mais Agent crée un point de contrôle pour que vous puissiez toujours revenir en arrière.
  </Step>

  <Step title="Confier la tâche à Agent">
    Sélectionnez la frame, choisissez **Build…** dans sa barre d'actions, et choisissez votre voie : un nouvel artefact ou un artefact existant. Agent construit le design, la mise en page, le style et les ressources, et rend compte de sa progression dans le chat.
  </Step>

  <Step title="Vérifier la construction">
    Agent indique ce qu'il a modifié et crée un point de contrôle. Ouvrez le résultat pour voir le design en action, et continuez à discuter pour ajuster ce qui n'a pas bien été traduit.
  </Step>
</Steps>

<Note>
  Construire une nouvelle application à partir d'une frame Design nécessite Core ou Pro ; appliquer un design et toutes les autres fonctionnalités de Replit Design fonctionnent avec chaque forfait. Consultez [Facturation](/fr/billing/ai-billing) pour les détails des forfaits.
</Note>

## Après la construction : rendez-la réelle

Construire la frame vous donne une application fonctionnelle avec votre design en place. La maquette ne faisait que simuler le fonctionnement ; maintenant Agent peut ajouter le vrai fonctionnement. Demandez ce dont vous avez besoin dans le chat :

* **Permettre aux gens de se connecter** : ajoutez des comptes utilisateurs avec [Replit Auth](/fr/features/auth-and-identity/authentication), les utilisateurs se connectent avec leurs comptes Replit sans aucune configuration, ou apportez votre propre fournisseur.
* **Enregistrer de vraies données** : stockez et récupérez des commandes, des messages et des préférences avec la [base de données](/fr/features/data-and-storage/sql-database) intégrée.
* **Faire payer** : ajoutez des paiements et des abonnements avec les intégrations [Monetization](/fr/features/monetization/overview).
* **Connecter d'autres services** : Agent active automatiquement des [intégrations](/fr/features/integrations/overview) en fonction de vos invites, de l'e-mail à Slack en passant par les services Google.

## Le lancer et le faire grandir

Quand l'application fonctionne, présentez-la aux gens et continuez à l'améliorer :

* **Publier** : lancez-la depuis l'[outil de publication](/fr/features/publishing/overview), puis consultez [Après la publication](/fr/features/publishing/after-you-publish) pour mettre à jour l'application en ligne.
* **Obtenir une véritable adresse** : achetez ou connectez un [domaine personnalisé](/fr/features/publishing/custom-domains).
* **Être trouvé** : lancez l'[Agent SEO](/fr/features/publishing/seo-agent) pour un audit technique avec des corrections en un clic.
* **Entendre vos visiteurs** : ajoutez le [widget de feedback](/fr/features/publishing/feedback-widget) pour que les gens puissent signaler des problèmes et des idées que vous pouvez transmettre directement à Agent.
* **La garder en bonne santé** : suivez l'état, les performances et la disponibilité avec la [surveillance des applications publiées](/fr/features/publishing/monitoring-a-deployment).

## Prochaines étapes

* [Design vs. Build](/fr/design/design-vs-build) : quand démarrer avec chaque point d'entrée.
* [Créer un système de design](/fr/design/create-a-design-system) : extrayez le design que vous avez livré pour que le prochain commence déjà à l'image de votre marque.