Passer au contenu principal
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.
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.
Le design Velocity ouvert dans le canevas de design de Claude, le design autonome que vous transmettez à Replit pour le transformer en application interactive

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

Ouvrez votre design dans Claude

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

Ouvrez le menu Envoyer vers

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

Choisissez Replit

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

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

Choisissez un espace de travail

Sélectionnez l’espace de travail Replit où vous souhaitez créer le nouveau projet, puis confirmez.
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.
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, . 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. L’utilisation des crédits dépend de ce qu’Agent construit en plus du design importé.

​
Voir aussi