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

# Importer des designs Claude dans Replit Design

> Envoyez un design depuis Claude vers 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 le configure pour qu'il fonctionne sur Replit"

Un design construit dans Claude montre à quoi une expérience doit ressembler. Avec l'option **Send to Replit** de Claude, vous pouvez transférer ce design à Replit, où il devient un projet et où Agent le transforme en application interactive et fonctionnelle.

<Note>
  Il s'agit d'une nouvelle intégration. **Send to Replit** apparaît dans le menu **Send to…** de Claude uniquement lorsque Claude propose Replit comme destination pour votre design. La disponibilité est contrôlée par Claude, l'option peut donc ne pas encore s'afficher pour tous les comptes. Lorsque vous acceptez le transfert, Claude demande les autorisations **Access apps**, **Create and manage apps** et **Stay signed in to this 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 canvas de design de Claude, le design autonome que vous transférez à Replit pour le transformer en application interactive" width="2000" height="1143" data-path="images/claude-to-app/claude-design-canvas.png" />
</Frame>

## Comment ça marche

Le transfert commence dans Claude et se termine dans Replit :

1. Vous construisez un design autonome dans le canvas de design de Claude.
2. Vous envoyez le design à Replit depuis le menu **Share → Send to…** 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 **Turn this Claude design into a real app** et la rend interactive.

Il s'agit de Claude *envoyant* un design à Replit via une connexion d'application autorisée. Vous ne configurez rien dans Replit au préalable — 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 canvas de design de Claude.
* Un espace de travail Replit cible pour le nouveau projet.

## Envoyer un design de Claude vers Replit

Commencez dans Claude avec le design sur lequel vous voulez construire.

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

  <Step title="Ouvrir le menu Send to">
    Sélectionnez **Share**, puis ouvrez le menu **Send to…**. 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 Send to… 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="Choisir Replit">
    Sélectionnez **Replit** pour démarrer le transfert vers votre compte Replit.
  </Step>

  <Step title="Autoriser l'accès à Replit">
    Sur l'écran de consentement Replit intitulé **Claude would like to access your Replit account**, passez en revue les accès demandés par Claude — **Access apps**, **Create and manage apps** et **Stay signed in to this 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 would like to access your Replit account, montrant les autorisations Access apps, Create and manage apps et Stay signed in 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="Choisir un espace de travail">
    Choisissez l'espace de travail Replit où vous voulez que le nouveau projet soit créé, puis confirmez.
  </Step>
</Steps>

Une fois que vous avez confirmé, 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 d'un seul fichier `index.html` autonome. L'import préserve la mise en page visuelle, le style et les ressources que Claude a inclus dans le design.

L'import vous donne un point de départ fonctionnel. Comme le design arrive sous forme de HTML statique, vous devez encore ajouter le comportement, les données et l'interactivité après l'import.

## 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'import :

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

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

## Laisser Agent rendre le design interactif

Après l'import, Agent démarre une tâche **Turn this Claude design into a real app** dans l'espace de travail. Agent travaille à partir de votre design statique et construit le comportement interactif que le design sous-entend.

<Frame caption="Le design Velocity de Claude sous forme de frame dans Replit Design, avec l'exécution d'Agent terminée.">
  <img src="https://mintcdn.com/replit/5ybcLQczgFi7A9hB/images/claude-to-app/claude-design-in-replit-design.webp?fit=max&auto=format&n=5ybcLQczgFi7A9hB&q=85&s=8872ca8b827e38a916d58e52dec4748b" alt="Le design de location de supercar Velocity envoyé depuis Claude, ouvert sous forme de frame de design Claude dans Replit Design avec la tâche d'Agent marquée comme terminée dans le panneau de chat" width="1600" height="1004" data-path="images/claude-to-app/claude-design-in-replit-design.webp" />
</Frame>

Ouvrez Preview lorsque la tâche est terminée pour tester le résultat. Comparez l'application en cours d'exécution à votre design Claude original et vérifiez que :

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

Si quelque chose manque ou ne va pas, 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](/features/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](/features/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](/features/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. La consommation de crédits dépend de ce qu'Agent construit par-dessus le design importé.

## Voir aussi

* [Importer depuis un fournisseur](/fr/build/import-from-providers)
* [Importer des designs Figma dans Replit Design](/fr/design/import-figma-designs-into-replit-design)