Maquettes fil de fer
Bienvenue
La zone Wireframes vous permet de concevoir et prototyper visuellement vos mises en page d'interface. Créez des wireframes pour planifier la structure de votre application avant de coder. Lorsque vous ouvrez Wireframes pour la première fois, vous verrez l'écran d'accueil avec une carte Créer un Wireframe pour commencer, ou utilisez le bouton + Nouveau Wireframe dans le coin supérieur droit.
Fonctionnalités clés
Conception manuelle
Construisez des maquettes à la main en utilisant l'éditeur de canevas visuel — glissez-déposez des composants pour concevoir vos écrans.
Génération par IA
Décrivez ce que vous voulez et laissez l'IA générer la documentation et les cadres de maquettes pour vous automatiquement.
Entrée vocale
Utilisez le bouton microphone intégré ou le clic central pour dicter la description de votre maquette par la voix.
Maquette vers code
Une fois votre maquette prête, envoyez-la directement à la génération de code — passant du design au code fonctionnel en un flux de travail fluide.
Création d'une maquette
Cliquez sur Créer un Wireframe ou + Nouveau Wireframe pour ouvrir le dialogue de création. Vous saisirez un titre, sélectionnerez la plateforme cible (Mobile, Bureau ou Web), rédigerez une description de votre wireframe et choisirez entre le mode Manuel ou Assisté par IA.
Champs de configuration du projet
Titre
Donnez un nom à votre projet de maquette pour pouvoir l'identifier plus tard dans la liste des maquettes.
Plateforme
Sélectionnez la plateforme cible — Mobile, Bureau ou Web — pour adapter la mise en page et les contraintes de la maquette.
Description
Décrivez ce que vous voulez construire. Cela est utilisé par le mode Alimenté par IA pour générer la documentation et les cadres. Prend en charge l'entrée vocale via le bouton microphone.
Mode
Choisissez Manuel pour passer directement à l'éditeur de canevas, ou Alimenté par IA pour que l'IA génère la documentation et les cadres pour vous.
Mode manuel
Lorsque vous sélectionnez l'onglet Manuel et cliquez sur Créer, vous serez dirigé directement vers l'éditeur de canevas wireframe où vous pourrez commencer à construire vos écrans immédiatement. C'est la meilleure option lorsque vous avez déjà une idée claire de votre design et que vous souhaitez un contrôle total dès le départ.
Quand utiliser le mode manuel
Vous avez un design spécifique en tête et souhaitez le construire vous-même.
Vous souhaitez esquisser rapidement une ébauche avant de l'affiner.
Vous préférez un contrôle total sur chaque élément dès le départ.
Mode alimenté par IA
Lorsque vous sélectionnez l'onglet Assisté par IA, des options supplémentaires apparaissent. Vous pouvez saisir ou dicter votre description, définir optionnellement des cadres individuels, sélectionner votre modèle d'IA préféré dans le menu déroulant en haut, puis cliquer sur Générer pour que l'IA crée la documentation du wireframe pour vous.
Comment ça fonctionne
Saisir les détails
Remplissez le titre, sélectionnez une plateforme et écrivez une description de votre projet.
Définir les cadres (Optionnel)
Passez à l'onglet Définir les cadres pour spécifier les écrans ou vues individuels que vous voulez que l'IA génère.
Sélectionner le modèle IA
Choisissez votre modèle IA préféré dans le menu déroulant (par ex. Claude Code, Opus 4.6).
Générer
Cliquez sur Générer pour démarrer la génération de documentation par IA. Le projet de maquette apparaîtra dans votre liste pendant que la documentation est en cours de création.
Construire les cadres
Une fois la documentation terminée, vous pouvez commencer à générer chaque cadre individuel depuis l'éditeur de maquettes.
Améliorer avec l'IA
En mode Assisté par IA, cliquer sur le bouton Améliorer avec l'IA ouvre un dialogue qui vous permet d'améliorer votre description à l'aide de l'IA. Cela prend ce que vous avez écrit dans le champ de description et l'améliore selon vos instructions — le rendant plus détaillé, structuré ou complet avant de générer le wireframe.
Options d'amélioration
Modèle IA
Sélectionnez le modèle IA à utiliser pour améliorer votre description (par ex. Claude Code, Opus 4.6).
Instructions d'amélioration
Fournissez optionnellement des instructions spécifiques sur la façon dont l'IA doit améliorer la description. Prend en charge l'entrée vocale.
Améliorer la description
Cliquez pour lancer l'amélioration. L'IA réécrira et améliorera votre description en fonction de votre saisie et de vos instructions.
Génération de documentation
Après avoir cliqué sur Générer en mode Assisté par IA, votre projet wireframe apparaît dans la liste des wireframes avec un statut Génération de la documentation.... L'IA crée une documentation structurée pour votre projet basée sur le titre, la plateforme, la description et les cadres que vous avez définis.
Ce qui se passe ensuite
Génération de documentation
L'IA crée un document structuré définissant chaque écran, composant et mise en page en fonction de votre description.
Génération de cadres
Une fois la documentation terminée, vous pouvez ouvrir la maquette et commencer à générer chaque cadre individuel depuis l'éditeur.
Affinage
Après la génération des cadres, vous pouvez ajuster manuellement, ajouter ou supprimer des composants dans l'éditeur de canevas pour affiner le design.