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

# Transformer un design Claude en application

> Envoyez un design de Claude à Replit, créez un projet à partir du HTML statique et laissez Agent le transformer en application interactive.

export const platform_0 = "Claude"

export const projectType_0 = "project"

export const setupDescription_0 = "Agent convertit votre design statique en application interactive et la configure pour fonctionner sur Replit"

Un design créé dans Claude montre à quoi devrait ressembler une expérience. Avec l'option **Envoyer vers Replit** de Claude, vous pouvez transmettre ce design à Replit, où il devient un projet qu'Agent transforme en application fonctionnelle et interactive.

<Note>
  Il s'agit d'une nouvelle intégration. **Envoyer vers Replit** apparaît dans le menu **Envoyer vers…** de Claude uniquement lorsque Claude propose Replit comme destination pour votre design. La disponibilité est contrôlée par Claude, donc l'option peut ne pas apparaître pour tous les comptes encore. Lorsque vous acceptez le transfert, Claude demande les portées **Accéder aux applications**, **Créer et gérer des applications** et **Rester connecté à cette application** sur l'écran de consentement Replit.
</Note>

<Frame>
  <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/claude-design-canvas.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=ea508bc83dc1ad35c5d3f17a511af737" alt="Le design Velocity ouvert dans le canevas de design de Claude, le design autonome que vous transmettez à Replit pour le transformer en application interactive" width="2000" height="1143" data-path="images/claude-to-app/claude-design-canvas.png" />
</Frame>

## Comment ça fonctionne

Le transfert commence dans Claude et se termine dans Replit :

1. Vous créez un design autonome dans le canevas de design de Claude.
2. Vous envoyez le design à Replit depuis le menu **Partager → Envoyer vers…** de Claude.
3. Vous autorisez Claude à accéder à votre compte Replit et choisissez un espace de travail.
4. Replit crée un projet avec votre design sous forme de fichier `index.html` statique.
5. Agent prend en charge une tâche **Transformer ce design Claude en véritable application** et le rend interactif.

C'est Claude qui *envoie* un design à Replit via une connexion d'application autorisée. Vous ne configurez rien dans Replit d'abord — le flux commence depuis Claude.

## Avant de commencer

Vous avez besoin de :

* Un [compte Replit](https://replit.com).
* Un compte Claude avec un design dans le canevas de design de Claude.
* Un espace de travail Replit cible pour le nouveau projet.

## Envoyer un design de Claude à Replit

Commencez dans Claude avec le design que vous souhaitez développer.

<Steps>
  <Step title="Ouvrez votre design dans Claude">
    Dans Claude, ouvrez le design que vous souhaitez transformer en application.
  </Step>

  <Step title="Ouvrez le menu Envoyer vers">
    Sélectionnez **Partager**, puis ouvrez le menu **Envoyer vers…**. Replit apparaît comme destination.

    <Frame>
      <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/claude-send-to-menu.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=de707da5fc30121d0ed31d2a0bdf128a" alt="Le menu Envoyer vers… de Claude listant Replit comme destination aux côtés de Claude Code" width="2000" height="1143" data-path="images/claude-to-app/claude-send-to-menu.png" />
    </Frame>
  </Step>

  <Step title="Choisissez Replit">
    Sélectionnez **Replit** pour démarrer le transfert vers votre compte Replit.
  </Step>

  <Step title="Autorisez l'accès à Replit">
    Sur l'écran de consentement Replit intitulé **Claude souhaite accéder à votre compte Replit**, vérifiez les accès que Claude demande — **Accéder aux applications**, **Créer et gérer des applications** et **Rester connecté à cette application** — puis autorisez la connexion.

    <Frame>
      <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/replit-oidc-consent.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=9e5607b4fdfb94c29c26967202fbf2d0" alt="L'écran de consentement Replit intitulé Claude souhaite accéder à votre compte Replit, affichant les portées Accéder aux applications, Créer et gérer des applications et Rester connecté avec un sélecteur d'espace de travail" width="2000" height="1143" data-path="images/claude-to-app/replit-oidc-consent.png" />
    </Frame>
  </Step>

  <Step title="Choisissez un espace de travail">
    Sélectionnez l'espace de travail Replit où vous souhaitez créer le nouveau projet, puis confirmez.
  </Step>
</Steps>

Après confirmation, Replit crée un projet à partir de votre design et l'ouvre dans l'espace de travail.

## Ce qui est importé

Replit importe le design sous forme de fichier `index.html` unique et autonome. L'importation préserve la mise en page visuelle, le style et les ressources que Claude a inclus dans le design.

L'importation vous fournit un point de départ fonctionnel. Comme le design arrive en HTML statique, vous ajoutez encore le comportement, les données et l'interactivité après l'importation.

## Ce qui n'est pas importé

Le transfert transporte le design, pas une application complète. Les éléments suivants ne font pas partie de l'importation :

* La logique backend et les fonctionnalités côté serveur.
* Une base de données ou des données stockées.
* L'interactivité telle que les formulaires fonctionnels, l'état et la navigation.

Agent ajoute cette fonctionnalité lorsqu'il transforme le design en véritable application.

## Laisser Agent rendre le design interactif

Après l'importation, Agent démarre une tâche **Transformer ce design Claude en véritable application** dans l'espace de travail. Agent travaille à partir de votre design statique et construit le comportement interactif qu'implique le design.

<Frame>
  <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/agent-task-preview.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=24d5529ff1ff555b7d0ee14c620829e4" width="2000" height="1154" data-path="images/claude-to-app/agent-task-preview.png" />
</Frame>

Ouvrez l'aperçu lorsque la tâche est terminée pour tester le résultat. Comparez l'application en cours d'exécution avec votre design Claude original et confirmez :

* La mise en page et le style correspondent suffisamment au design.
* Les boutons, formulaires et la navigation fonctionnent comme prévu.
* L'application fonctionne encore après un rafraîchissement.

Si quelque chose manque ou est incorrect, décrivez le changement à Agent et laissez-le affiner l'application.

## Configure and run your app

During import, {setupDescription_0}. If your app needs changes, use these Project Editor tools:

* **[Agent](/references/agent/overview)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/project-editor/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/references/workspace-tools/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, explore these next steps:

* [Replit Agent](/references/agent/overview): Get help with feature work, debugging, and refactoring
* [Replit Deployments](/learn/projects-and-artifacts/replit-deployments): Publish your app
* [Collaborate](/build/invite-teammates): Build with teammates

## Facturation

Transformer un design en application fonctionnelle utilise Agent, ce qui peut consommer des crédits. L'utilisation des crédits dépend de ce qu'Agent construit en plus du design importé.

## Voir aussi

* [Importer depuis un fournisseur](/fr/build/import-from-providers)
* [Transformer un design Figma en application interactive](/fr/build/figma-to-app)