Passer au contenu principal

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.

⏰ Durée estimée : 5 minutes · Suite de Créez et publiez votre première application Le Canvas est un espace de travail visuel où vous pouvez demander à Agent de générer des looks alternatifs pour une application que vous avez déjà créée, les comparer côte à côte et appliquer celui que vous souhaitez. C’est le moyen le plus rapide d’explorer une direction visuelle sans vous engager dans une reconstruction. Ce guide utilise le suivi de course Runwell de Créez et publiez votre première application comme exemple, mais le même flux fonctionne sur n’importe quel projet.

​
Avant de commencer

Vous avez besoin d’une application existante dans Replit. Soit :

​
Explorer des variations de design

1

Ouvrir Canvas et choisir votre cadre

Ouvrez l’onglet Canvas dans l’éditeur de projet. Votre application apparaît comme un cadre sur le Canvas. Sélectionnez le cadre pour faire apparaître les contrôles Réimaginer… et Preview.
L'application Runwell affichée comme un cadre sur le Canvas, avec les boutons Réimaginer et Preview disponibles en haut du cadre
2

Réimaginer le design

Cliquez sur Réimaginer… pour ouvrir un menu de directions qu’Agent peut explorer. Choisissez-en une — pour Runwell, essayez Explorer différentes ambiances. Agent génère trois variations esthétiques, chacune préservant la mise en page tout en modifiant l’ambiance visuelle.
Le menu Réimaginer ouvert avec des options incluant Explorer différentes approches, Essayer différentes mises en page, Explorer différentes ambiances, et d'autres
L’ensemble complet des directions :
  • Explorer différentes approches
  • Essayer différentes mises en page
  • Explorer différentes ambiances
  • Pareil mais en mieux
  • Optimiser l’utilisabilité
  • Montrez-moi l’opposé
  • Surprenez-moi
Vous pouvez aussi décrire une direction dans vos propres mots plutôt que de choisir dans le menu — par exemple, “montre-moi un thème sombre, un thème minimaliste et un thème coloré”.
3

Comparer les variantes

Faites défiler ou dézoomez sur le Canvas pour voir les variations à côté de l’original. Comparez-les et décidez quelle direction vous souhaitez appliquer.
Trois variations de design Runwell sur le Canvas à côté de l'original — Dawn Patrol, Track Day et Zen Trail
Si vous souhaitez affiner l’une avant de vous engager, demandez à Agent — par exemple, “j’aime la deuxième, mais agrandis l’en-tête”.
4

Appliquer le design à votre application

Sélectionnez la variante souhaitée, puis cliquez sur Construire… en haut du cadre. Dans la boîte de dialogue, choisissez votre application existante (par ex., Runwell) pour appliquer le nouveau design en place — plutôt que de créer une copie séparée.
La boîte de dialogue Construire montrant deux options : Construire avec ce design (crée une nouvelle application) ou appliquer à l'application Runwell existante
Attendez qu’Agent applique les modifications. Quand il a terminé, sélectionnez le cadre mis à jour sur le Canvas et cliquez sur Preview pour voir le résultat. Effectuez les mêmes vérifications qu’initialement — pour Runwell : enregistrez une course, confirmez que les totaux se mettent à jour et redimensionnez Preview à la largeur d’un téléphone.
5

Publier le design mis à jour (optionnel)

Satisfait du nouveau look ? Publiez depuis le chat Agent ou la tuile Publication dans le panneau Outils et fichiers. Votre URL publique reste la même — les visiteurs voient la version mise à jour immédiatement.Consultez l’étape Publier votre application dans Créez et publiez votre première application si vous avez besoin d’un rappel sur le flux de publication.

​
Que faire ensuite

Canvas

Plongez dans les fonctionnalités et les flux de travail du Canvas.

Éditeur visuel

Apportez des ajustements fins aux couleurs, au texte et à la mise en page.

Vibe coding 101

Apprenez à guider Agent de l’idée à l’application fonctionnelle.