> ## 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.
# Design avec Canvas
> Générez des variations visuelles d'une application existante sur le Canvas, comparez-les côte à côte et appliquez celle qui vous plaît — sans tout reconstruire.
export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
if (!videoId) {
return null;
}
let url = "https://www.youtube.com/embed/" + videoId;
if (startAt) {
url = url + "?start=" + startAt;
}
return
;
};
⏰ *Durée estimée : 5 minutes* · Suite de [Créez et publiez votre première application](/fr/build/your-first-app)
Le [Canvas](/fr/learn/design/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](/fr/build/your-first-app) 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 :
* Terminez [Créez et publiez votre première application](/fr/build/your-first-app) pour avoir Runwell ouvert, ou
* Utilisez n'importe quel autre projet — les étapes ci-dessous fonctionnent de la même façon.
## Explorer des variations de design
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**.
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.
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é".
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.
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".
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.
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.
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](/fr/build/your-first-app) si vous avez besoin d'un rappel sur le flux de publication.
## Que faire ensuite
Plongez dans les fonctionnalités et les flux de travail du Canvas.
Apportez des ajustements fins aux couleurs, au texte et à la mise en page.
Apprenez à guider Agent de l'idée à l'application fonctionnelle.