Qu’est-ce que le Canvas ?
Le Canvas est un espace pour explorer et itérer sur des designs avec Agent. Ici, vous verrez vos artefacts — comme des applications, des vidéos et des diapositives — affichés dans un cadre. Vous pouvez travailler avec Agent pour créer des maquettes, comparer des directions de design et appliquer des modifications à votre application — tout depuis un tableau visuel.
Ce que contient le Canvas
Le Canvas est un tableau infini où vous pouvez voir et travailler avec tout de manière visuelle.
- Vos applications : Vos applications en cours d’exécution apparaissent comme des aperçus interactifs en direct directement sur le Canvas. Vous pouvez cliquer dessus et les utiliser comme vous le feriez dans un navigateur.
- Maquettes de design : Prototypes visuels créés par Agent pour vous. Ils ont l’apparence et le comportement de vraies pages — vous pouvez interagir avec eux, les redimensionner et demander à Agent de les ajuster — mais ils sont séparés de votre application en direct afin que vous puissiez expérimenter librement.
- Formes et dessins : Rectangles, cercles, étoiles, flèches, cœurs et plus encore. Utilisez-les pour esquisser des idées approximatives, annoter des designs ou tracer la façon dont les écrans se connectent.
- Texte et notes autocollantes : Ajoutez des étiquettes ou des notes n’importe où sur le Canvas pour organiser vos pensées.
- Images : Déposez des captures d’écran ou des images de référence sur le Canvas. Agent peut recréer ou s’inspirer de ce qu’il voit.
- Vidéos : Placez des fichiers vidéo sur le Canvas aux côtés de votre autre contenu.
Mettre des designs sur le Canvas
Il existe plusieurs façons de commencer à créer des designs. Choisissez celle qui vous semble la plus naturelle.Demander à Agent dans le chat
Tapez ce que vous voulez voir dans le champ de saisie du chat et Agent le place comme un cadre interactif sur le Canvas.
Choisir un type de sortie
Vous pouvez également choisir le type de sortie souhaité — web, mobile, diapositives, design, et plus encore. Utilisez le carrousel pour choisir avant d’envoyer votre prompt.
Apporter des modifications
Une fois que vous avez un design sur le Canvas, il existe plusieurs façons d’itérer dessus.Demander des mises à jour à Agent
Sélectionnez un cadre sur le Canvas et tapez vos modifications dans le champ de saisie qui apparaît en dessous. Lorsque vous appuyez sur Entrée, Agent prend en charge la demande, effectue les mises à jour et actualise la maquette directement sur le Canvas.Dessiner et annoter
Utilisez les outils de dessin dans la barre d’outils inférieure pour esquisser directement sur le Canvas. Dessinez des flèches pointant vers ce que vous voulez modifier, entourez les zones problématiques ou ajoutez des notes textuelles avec vos commentaires. Demandez ensuite à Agent d’effectuer les modifications en fonction de vos annotations.Aperçu sur différents appareils
Voyez à quoi ressemblent vos designs sur différentes tailles d’écran. Demandez à Agent de vous montrer une version mobile, tablette ou bureau :- Mobile — 390 × 844
- Tablette — 768 × 1024
- Bureau — 1280 × 720
Appliquer les modifications à votre application
Lorsque vous êtes satisfait d’un design, appliquez les modifications à votre version principale. Agent vous montre un résumé de ce qui a été fait et vous donne la possibilité d’appliquer ou d’ignorer.Comparer des directions de design
Lorsque vous n’êtes pas sûr de la direction à prendre, demandez à Agent de générer plusieurs versions afin que vous puissiez les comparer côte à côte.- Plusieurs versions d’une page : « Montre-moi cinq versions de cette page d’accueil. » Agent crée chacune et les dispose les unes à côté des autres.
- Flux multi-pages : « Conçois un flux d’intégration complet : bienvenue, configuration du profil, préférences et confirmation. » Agent construit chaque écran et les arrange dans l’ordre.
- Mélange et correspondance : « Montre-moi la page d’accueil et la page de tarification dans un style minimal et un style audacieux. » Agent crée chaque combinaison pour que vous puissiez voir l’ensemble du tableau.
Cartographier les flux utilisateurs
Disposez des parcours utilisateurs complets sur le Canvas — inscription, intégration, tableau de bord, paramètres — et arrangez-les pour voir comment tout s’articule.- Placez chaque écran comme un cadre séparé
- Demandez à Agent de générer le flux complet : « Dessine le flux d’intégration complet pour mon application »
- Utilisez des flèches et des formes pour montrer comment les utilisateurs se déplacent entre les écrans
- Demandez à Agent de transformer des esquisses approximatives en designs soignés
Transformer un design en vraie application
Lorsque vous êtes satisfait d’un design et souhaitez le concrétiser, deux options s’offrent à vous :En faire une application complète
Si votre design nécessite une vraie fonctionnalité — comme la sauvegarde de données, les comptes utilisateurs ou la connexion à d’autres services — demandez à Agent de le transformer en une application complète. Dites quelque chose comme « Rends ceci une vraie application » ou « Ajoute un backend à cela. » Agent construit tout ce dont il a besoin pour fonctionner comme une application réelle et publiable.Transformer un design en application complète nécessite un plan payant.
Le convertir en un type spécifique
Vous pouvez également convertir un cadre de design en un type d’artefact spécifique :Demander à Agent de convertir
Dites à Agent ce que vous voulez — par exemple, « Convertis ceci en application web » ou « Transforme ceci en diapositives. »
Foire aux questions
Les cadres de design sont-ils identiques à mon application en cours d'exécution ?
Les cadres de design sont-ils identiques à mon application en cours d'exécution ?
Non. Les cadres de design sont des prototypes visuels — ils ont l’apparence et le comportement de la vraie chose, mais ils n’ont pas de backend ou de base de données fonctionnels derrière eux. Les aperçus de votre application sur le Canvas, en revanche, sont votre vraie application en cours d’exécution.
Puis-je reconcevoir une page sans casser mon application en direct ?
Puis-je reconcevoir une page sans casser mon application en direct ?
Oui. Demandez à Agent d’amener une page sur le Canvas — par exemple, « Mets mon tableau de bord sur le canvas. » Agent en fait une copie avec laquelle vous pouvez expérimenter. Votre application en direct n’est pas affectée jusqu’à ce que vous choisissiez d’appliquer les modifications.
Comment transformer un design en vraie application ?
Comment transformer un design en vraie application ?
Demandez à Agent d’en faire une application complète (« Rends ceci réel ») ou de le convertir en un type spécifique (« Convertis ceci en application web »). Agent construit tout ce dont il a besoin pour devenir une application fonctionnelle et publiable.
Puis-je convertir en types autres que des applications web ?
Puis-je convertir en types autres que des applications web ?
Oui. Vous pouvez transformer des cadres Canvas en applications web, applications mobiles, diapositives, visualisations de données, et plus encore.
Puis-je importer des designs depuis Figma ou d'autres outils ?
Puis-je importer des designs depuis Figma ou d'autres outils ?
Il n’y a pas d’importation directe, mais vous pouvez déposer une capture d’écran sur le Canvas et demander à Agent de recréer le design à partir de celle-ci.
Que puis-je d'autre mettre sur le Canvas ?
Que puis-je d'autre mettre sur le Canvas ?
En plus des maquettes de design et des aperçus d’applications, vous pouvez ajouter des formes, des flèches, des étiquettes de texte, des notes autocollantes, des images et des vidéos — utiles pour esquisser des idées, annoter des designs ou organiser votre réflexion.