Skip to main content
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.
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.
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

​
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.
  • 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.
1

Ouvrir votre design dans Claude

Dans Claude, ouvrez le design que vous voulez transformer en application.
2

Ouvrir le menu Send to

Sélectionnez Share, puis ouvrez le menu Send to…. Replit apparaît comme destination.
Le menu Send to… de Claude listant Replit comme destination aux côtés de Claude Code
3

Choisir Replit

Sélectionnez Replit pour démarrer le transfert vers votre compte Replit.
4

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

Choisir un espace de travail

Choisissez l’espace de travail Replit où vous voulez que le nouveau projet soit créé, puis confirmez.
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.
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

Le design Velocity de Claude sous forme de frame dans Replit Design, avec l'exécution d'Agent terminée.

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, . If your app needs changes, use these Project Editor tools:
  • Agent: Refine features, debug issues, and make code changes
  • Secrets: Add API keys and environment variables
  • Workflows: Set the Run command for your app

​
Continue your journey

Now that you’ve imported your , explore these next steps:

​
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