> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Concevoir avec l'IA > Apprenez à concevoir votre application avec l'IA : briefez-la comme un designer, ajustez les éléments en mode Edit, définissez des limites avec les contrôles de l'IA et affinez les options qu'elle propose. L'IA est au centre de la façon dont vous concevez dans Base44. Décrivez ce que vous voulez en langage naturel, et l'IA met à jour le code, les styles et les composants pour vous. Le mode **Edit** vous permet de modifier ce que vous voyez à l'écran, et les contrôles de l'IA vous aident à définir des limites. Cette page couvre chaque workflow avec des prompts et exemples que vous pouvez utiliser directement. The app editor chat making a design change to an app Pour le panneau Theme, les polices et le style global au sein d'une application, consultez [Personnaliser le design de votre application](/Building-your-app/Design). *** ## Comment fonctionne le design Vous n'avez pas besoin d'un outil de design ni d'expérience en design. Le design de votre application fait partie de son code, et l'IA modifie ce code pour vous : chaque modification de design est une demande en langage courant, de « rends les boutons plus arrondis » à « redessine toute cette page ». Il existe trois façons d'effectuer une modification de design, et choisir la bonne vous fait gagner du temps : | Modification souhaitée | Utilisez | | ----------------------------------------------------------------------------------------------------- | -------------------- | | Couleurs ou polices dans toute l'application | Le panneau **Theme** | | Un élément ou une section que vous pouvez pointer | Le mode **Edit** | | Tout ce qui est plus grand, comme de nouvelles mises en page, des refontes ou une ambiance différente | Le chat IA | **Un bon ordre pour une refonte complète :** 1. Définissez d'abord l'apparence générale : couleurs et polices dans le [panneau Theme](/Building-your-app/Design#global-changes). 2. Demandez à l'IA des modifications au niveau des pages, une page à la fois. 3. Peaufinez les éléments individuels en mode **Edit**. Rien n'est permanent. Vous pouvez cliquer sur **Revert** sur n'importe quel prompt pour annuler cette modification, ou restaurer une version antérieure de votre application depuis son historique de versions. Vous pouvez donc toujours expérimenter en toute sécurité. *** ## Concevoir dans le chat Le chat IA est idéal pour les modifications globales et les décisions de design qui touchent de nombreuses parties de votre application. Vous pouvez définir un persona et un brief une seule fois, puis construire dessus : ```text theme={null} Tu es mon product designer pour cette application. Brief de design : - Objectif : aider les équipes de contenu à planifier, rédiger et publier des articles plus vite. - Public : des responsables de contenu et des rédacteurs occupés, sur ordinateur portable pendant la journée de travail. - Ambiance : calme, concentrée, moderne, digne de confiance. Utilise ce brief comme base pour toutes les suggestions et décisions de design. ``` Vous n'avez pas non plus besoin de vocabulaire de design. Décrivez le ressenti que vous voulez, nommez un produit dont vous aimez le style, ou importez une capture d'écran d'un design que vous admirez et demandez à l'IA de reproduire son style : ```text theme={null} Rends cette page plus calme et plus premium. Utilise la capture d'écran jointe comme référence pour le style général. ``` Schémas utiles : * Demandez une critique avant de demander des modifications. * Demandez un plan en mode Discuss, approuvez-le, puis demandez à l'IA de l'implémenter. * Précisez toujours la portée du design : toute l'application, une page ou un élément. Exemple : ```text theme={null} Critique le design de ce tableau de bord uniquement. Concentre-toi sur la mise en page, la hiérarchie, la couleur, la typographie et l'espacement. Puis propose un court plan de petites modifications. Attends mon approbation avant d'appliquer quoi que ce soit. ``` Après votre revue : ```text theme={null} Applique le plan que tu as proposé pour ce tableau de bord. Effectue les modifications par petits groupes et décris brièvement chaque groupe au fur et à mesure. ``` *** ## Choisir une option de design Lorsque vous demandez à l'IA de modifier le design ou la mise en page d'une section ou d'un élément, elle peut présenter des options visuelles parmi lesquelles choisir au lieu d'appliquer une modification immédiatement. Chaque option affiche un aperçu pour que vous puissiez voir le résultat avant de vous engager. Vous pouvez aussi cliquer sur l'icône **Expand** d'une option pour l'afficher en mode complet et l'affiner avant de choisir. Design options in the chat, with the Expand icon shown on a mockup Décrivez une modification ciblée, comme un arrière-plan plus clair, pour ajuster uniquement ces détails, ou demandez une direction complètement différente pour remplacer cette option. Quand le résultat vous convient, cliquez sur **Apply**. Expanded design option showing a mockup preview with a change request typed below it *** ## Explorer des directions de design Vous pouvez utiliser le chat IA pour explorer différentes directions avant de vous engager. Vous n'avez pas besoin de décrire votre design actuel : l'IA prend une capture d'écran de votre page et examine ce qui s'y trouve réellement. Boucle de critique : ```text theme={null} Agis comme un product designer senior. Examine cette page et décris trois problèmes visuels précis. Pour chaque problème, rédige un prompt Base44 qui le corrigerait. N'effectue encore aucune modification. ``` Directions alternatives : ```text theme={null} Crée deux options visuelles pour ce tableau de bord : - Option A : très minimale, principalement neutre avec une seule couleur d'accent - Option B : plus expressive, avec des couleurs plus riches et une typographie légèrement plus grande Garde le contenu et la mise en page identiques. Décris chaque option dans un court résumé et attends que je choisisse. ``` Une fois votre option choisie, vous pouvez demander à l'IA d'appliquer cette direction à des pages similaires. *** ## Utiliser le mode Edit Le mode **Edit** est idéal lorsque vous voulez ajuster ce que vous voyez sans tout réécrire. Visualedittoolbar Cliquez sur **Edit** dans le chat puis sélectionnez l'élément que vous souhaitez modifier. Vous pouvez : * Sélectionner une section et ajuster visuellement les couleurs, l'espacement et la mise en page. * Demander à l'IA de restyler une seule instance de composant. * Supprimer les éléments dont vous n'avez plus besoin avec l'icône **Delete** . * L'utiliser comme bac à sable sûr avant de déployer un motif dans le reste de votre application. Cliquez sur **Edit Element** dans la barre d'outils Edit pour demander à l'IA d'effectuer des modifications. Par exemple : ```text theme={null} Dans cette section sélectionnée : - Éclaircis légèrement l'arrière-plan - Augmente l'espacement vertical entre le titre et le contenu - Utilise le style de bouton principal pour l'action principale et le style secondaire pour les autres ``` ```text theme={null} Pour cette carte uniquement : - Augmente le padding - Déplace l'icône à gauche du titre - Utilise une ombre plus douce, cohérente avec les autres cartes de l'application ``` *** ## Utiliser les contrôles de l'IA Utilisez les [contrôles de l'IA](/Building-your-app/AI-chat-modes#customizing-your-ai-chat) dans le chat pour guider et protéger votre design. Vous pouvez : * Définir des directives de design qui s'appliquent à chaque prompt. * Geler des fichiers ou pages spécifiques pour que l'IA ne les modifie pas. * Établir un ton, comme minimal, audacieux ou ludique. Exemples de directives : ```text theme={null} Directives de design globales : - Privilégie des visuels calmes et minimaux avec beaucoup d'espace blanc - Utilise des coins arrondis avec un rayon de 12 sur les cartes et les boutons - Évite les dégradés lourds et les effets de verre - Garde des animations subtiles et respecte les préférences de mouvement réduit ``` Soyez toujours explicite sur la portée dans vos prompts. La même modification peut s'appliquer à toute l'application, à une page ou à un seul élément, et l'IA suivra vos indications : ```text theme={null} Mets à jour le style du bouton principal et propage-le partout où le composant de bouton principal est utilisé. Ne modifie pas les boutons secondaires. ``` ```text theme={null} Mets à jour uniquement la section hero de la page d'accueil : - Change l'arrière-plan en un dégradé doux - Augmente la taille du titre - Utilise le style de bouton principal pour l'appel à l'action principal Ne modifie pas les autres sections ou pages. ``` Pour protéger les zones qui vous conviennent pendant que vous expérimentez ailleurs : * Utilisez les contrôles de l'IA pour geler des fichiers ou pages spécifiques afin que l'IA ne les modifie pas. * Utilisez l'option **Revert** sur des prompts individuels pour annuler une seule modification. * Utilisez l'historique de versions pour revenir à un état antérieur. *** ## FAQ Cliquez sur une question ci-dessous pour en savoir plus sur le design avec l'IA. Oui. Les prompts de design sont des messages du chat IA, ils utilisent donc vos crédits de messages de la même manière que toute autre demande dans le chat. Le mode **Edit** stylise un élément ou une section à la fois. Le panneau **Theme** change les couleurs et polices de toute votre application d'un coup. Pour en savoir plus sur le panneau Theme, consultez [Personnaliser le design de votre application](/Building-your-app/Design). Cette page a été traduite par IA. Pour les informations les plus précises et à jour, consultez la [version anglaise](/).