openpencil/packages/docs/fr/programmable/ai-chat.md
2026-03-09 17:43:11 +03:00

3.7 KiB

title description
Chat IA Assistant IA intégré avec plus de 90 outils pour créer et modifier des designs.

Chat IA

Appuyez sur ⌘J (Ctrl + J) pour ouvrir l'assistant IA. Décrivez ce que vous voulez — il crée des formes, définit des styles, gère la mise en page, travaille avec les composants et analyse votre design.

Configuration

  1. Ouvrez le panneau de chat IA (⌘J)
  2. Cliquez sur l'icône de paramètres
  3. Choisissez un fournisseur et entrez votre clé API
  4. Sélectionnez un modèle

Fournisseurs pris en charge

Fournisseur Modèles Configuration
OpenRouter Claude, GPT-4, Gemini, DeepSeek et autres Clé API de openrouter.ai
Anthropic Claude 3.5 Sonnet, Claude 3 Opus, etc. Clé API de console.anthropic.com
OpenAI GPT-4o, GPT-4, etc. Clé API de platform.openai.com
Google AI Gemini 2.0, Gemini 1.5, etc. Clé API de aistudio.google.dev
Compatible OpenAI Tout endpoint au format API OpenAI URL de base personnalisée + clé. Supporte le basculement entre API Completions et Responses.
Compatible Anthropic Tout endpoint au format API Anthropic URL de base personnalisée + clé

Pas de backend, pas d'abonnement — votre clé communique directement avec le fournisseur.

Fonctionnalités

L'assistant dispose de plus de 90 outils répartis dans ces catégories :

  • Créer — frames, formes, texte, composants, pages. Rendu JSX pour les mises en page complexes.
  • Styliser — remplissages, contours, effets, opacité, rayon d'arrondi, modes de fusion.
  • Mise en page — auto-layout, grille, alignement, espacement, dimensionnement.
  • Composants — créer des composants, des instances, des ensembles de composants. Gérer les surcharges.
  • Variables — créer/modifier des variables, des collections, des modes. Lier aux remplissages.
  • Requêter — trouver des nœuds, sélecteurs XPath, lire des propriétés, lister les pages, les polices, la sélection.
  • Inspecter — get_jsx pour la vue JSX, diff_jsx pour les différences structurelles, describe pour le rôle sémantique et les problèmes de design.
  • Analyser — palette de couleurs, audit typographique, cohérence de l'espacement, détection de motifs récurrents.
  • Exporter — PNG, SVG, JSX avec classes Tailwind. Vérification visuelle via export_image.
  • Vectoriel — opérations booléennes, manipulation de chemins.

Vérification visuelle

L'assistant peut vérifier visuellement son travail. Après avoir créé ou modifié des designs, il utilise export_image pour capturer une image et vérifier le résultat par rapport à la demande initiale.

Exemples de prompts

  • « Créer une carte avec un titre, une description et un bouton bleu »
  • « Faire en sorte que tous les boutons de cette page utilisent le même rayon d'arrondi »
  • « Quelles polices sont utilisées dans ce fichier ? »
  • « Changer l'arrière-plan du frame sélectionné en un dégradé du bleu au violet »
  • « Exporter le frame sélectionné en SVG »
  • « Montre-moi le JSX de ce frame »

Conseils

  • Sélectionnez des nœuds avant de poser votre question — l'assistant sait ce qui est sélectionné.
  • Soyez précis sur les couleurs, tailles et positions pour des résultats exacts.
  • L'assistant peut modifier plusieurs nœuds en un seul message.
  • Utilisez « annuler » dans l'éditeur — les mutations IA supportent l'annulation complète.
  • Tous les layouts sont recalculés automatiquement après chaque exécution d'outil.