Kombai : L'Agent IA Tout-en-un pour le Développement Frontend

Introduction

Kombai est un agent IA tout-en-un conçu pour résoudre le problème majeur du design d'interface utilisateur (UI) rencontré par d'autres agents de code. Il permet aux développeurs de créer des frontends visuellement attrayants et fonctionnels en intégrant le design, la génération de code et l'automatisation du navigateur dans un flux de travail cohérent.

Précis de configuration

Élément	Version / Lien
Langage / Runtime	TypeScript, JavaScript, HTML, CSS (pour le frontend de l'application)
Librairie principale	Kombai (extension VS Code)
APIs requises	Convex (pour l'application de démonstration thumbfa.st)
Clés / credentials nécessaires	Jetons d'utilisation Kombai (gratuits à l'inscription)

Guide étape par étape

Étape 1 — Activer le mode Design de Kombai

Pour construire et itérer sur des designs d'interface utilisateur, Kombai propose un mode Design spécialisé. Ce mode permet de se concentrer sur l'aspect visuel avant de passer à l'implémentation du code.

1. Sélectionner le mode Design : Dans l'extension Kombai de VS Code, choisissez Design dans le menu déroulant des modes.
2. Configurer les variations et passes : Ajustez le Nombre de variantes à créer pour chaque nouveau design (par exemple, 1 à 3) et le Nombre de passes de raffinement pour chaque nouveau design (par exemple, 1 à 3). Ces paramètres influencent la diversité et la qualité des designs générés.

Étape 2 — Créer un système de design et des variations de cartes

Kombai peut générer des éléments d'interface utilisateur cohérents et réutilisables en créant un système de design basé sur des instructions textuelles et des références visuelles.

1. Demander des variations de design : Dans le chat de Kombai, demandez de créer des variations pour un composant spécifique, comme une carte d'inspiration.

   create variations for inspirations card.
   

2. Affiner le style avec des références existantes : Fournissez des instructions supplémentaires pour que Kombai s'aligne sur le style de composants existants dans votre application (par exemple, des miniatures ou des profils d'utilisateurs).

   regarde le style qu'on a dans thumbnail et aussi dans persons et essaie de faire un style variations qui match tout ça
   

   Kombai va alors créer un Style Guide incluant les couleurs (arrière-plan, surface, bordure, couleurs primaires, texte, succès, avertissement), la typographie (police Inter, tailles pour titres, corps, étiquettes), l'espacement et les rayons de bordure. Il générera ensuite plusieurs variations de la carte d'inspiration sur un canevas.

3. Appliquer des modifications de style détaillées : Vous pouvez demander des ajustements précis pour améliorer l'esthétique et la fonctionnalité du design.

   delete inforomiton, decete tehe tags, show the inforamtion in a subtle way, remove the border red, only on hover, and make the things really minimalistic
   

   Kombai analysera le design, identifiera les éléments à modifier (icône YouTube, dégradé, badge de catégorie, chevauchement de la liste déroulante, zone de contenu) et appliquera les changements demandés.

Étape 3 — Itérer sur les styles et générer des versions

Kombai permet d'affiner le design et de l'adapter à différentes plateformes ou modes (clair/sombre) grâce à des options d'itération.

1. Améliorer les styles : Utilisez l'option Decorate pour demander à Kombai d'améliorer les styles de manière créative.

   Improve Styles
   Surprise me
   

2. Générer des versions spécifiques : Créez des versions du design adaptées à différents appareils (mobile, tablette, ordinateur portable) ou modes de couleur (clair/sombre).

   Generate Version
   Device: Mobile
   Mode: Dark
   

Étape 4 — Implémenter le design dans l'application (mode Code)

Une fois le design affiné, Kombai peut l'intégrer directement dans le code source de votre application, en respectant votre stack technique.

1. Passer en mode Code : Changez le mode de Kombai de Design à Code.

2. Demander l'implémentation du composant : Indiquez à Kombai d'implémenter le composant de design (par exemple, la carte d'inspiration) directement dans votre application, en utilisant les composants existants.

   implement this card inside the app using the app c components
   

3. Fournir des détails d'implémentation : Si nécessaire, précisez les composants à utiliser et les formats spécifiques (par exemple, un ratio d'aspect vidéo 16/9).

   non en utilisant les component card dropdown etc.. de l'application et utilise un format 16/9 aspect video tailwind aussi
   

   Kombai analysera votre base de code, identifiera les composants React/Tailwind CSS pertinents et effectuera les modifications nécessaires dans les fichiers (index.tsx, mutations Convex, etc.) pour intégrer le design.

Étape 5 — Tester et affiner l'intégration dans le navigateur

Kombai permet de visualiser le design implémenté dans un navigateur réel et d'interagir avec l'agent pour des ajustements en temps réel.

1. Lancer l'application locale : Démarrez votre application de développement localement.

   pnpm start-all --port 3010
   

2. Connecter Kombai au navigateur : Utilisez l'extension Kombai dans votre navigateur pour vous connecter à l'application en cours d'exécution.

3. Vérifier et ajuster les styles : Sélectionnez des éléments DOM dans le navigateur et envoyez des instructions à Kombai pour vérifier ou modifier leurs styles, en vous assurant qu'ils correspondent au système de design de l'application.

   vérifie qu'on utilise le component Typography et les styles disponible dans l'application pour le titre et le sous titre
   

   Kombai analysera le code et le rendu, et proposera des corrections ou des améliorations pour assurer la cohérence et la fidélité du design.

⚠️ Erreurs fréquentes et pièges

1. Ne pas changer de mode (Design/Code) au bon moment : Tenter de générer du code en mode Design ou d'itérer sur un design en mode Code peut entraîner des erreurs ou des résultats inattendus. Assurez-vous de sélectionner le mode approprié pour la tâche en cours.
2. Ne pas fournir suffisamment de contexte : Kombai s'appuie sur le contexte (Style Guides, Thèmes, Blocs, code existant) pour générer des designs cohérents. Un manque de contexte peut entraîner des designs génériques ou non alignés avec l'esthétique de votre application.
3. Ignorer les suggestions de Kombai : L'agent fournit des analyses et des recommandations pour améliorer le design ou la structure. Les ignorer peut vous faire passer à côté d'optimisations importantes.
4. Problèmes de rafraîchissement du navigateur : Lors de modifications de code, le navigateur peut nécessiter un rafraîchissement. Kombai gère souvent cela automatiquement, mais des problèmes de synchronisation peuvent survenir.
5. Attendre une perfection immédiate : L'IA est un outil d'itération. Les premiers designs ou implémentations peuvent nécessiter plusieurs passes de raffinement et de feedback pour atteindre le résultat souhaité.

Glossaire

Agent IA : Un programme informatique capable de percevoir son environnement, de prendre des décisions et d'agir pour atteindre des objectifs spécifiques, souvent en apprenant de l'expérience.
Frontend : La partie d'une application web ou mobile avec laquelle l'utilisateur interagit directement, incluant l'interface utilisateur (UI) et l'expérience utilisateur (UX).
Design Mode : Un mode spécialisé dans Kombai qui permet de générer et d'itérer sur des designs d'interface utilisateur (UI) en utilisant des compétences intégrées et le contexte du projet.
Style Guide : Une collection de règles et de ressources (couleurs, typographie, espacement, composants) qui assurent la cohérence visuelle et fonctionnelle d'un design.
Canvas : Un espace de travail infini dans Kombai où les designs sont créés, stockés et manipulés.

Points clés à retenir

• Kombai est un agent IA tout-en-un pour le développement frontend, capable de gérer le design, la génération de code et l'automatisation du navigateur.
• Le mode Design permet de créer des interfaces utilisateur visuellement attrayantes et cohérentes à partir de prompts textuels.
• Il intègre des Style Guides, Thèmes et Blocs pour maintenir la cohérence du design à travers l'application.
• Kombai peut générer des variations de design et des versions adaptées à différents appareils (mobile, tablette, ordinateur) et modes (clair/sombre).
• L'agent peut interagir directement avec le code de l'application (via VS Code) et le navigateur pour implémenter et tester les designs en temps réel.
• La capacité de Kombai à comprendre le contexte de l'application (stack technique, composants existants) est un avantage majeur pour des implémentations précises et pertinentes.
• Kombai propose un plan gratuit avec 300 crédits par mois, permettant aux développeurs d'explorer ses fonctionnalités.

Ressources

• Site officiel de Kombai : kombai.com
• Application de démonstration : thumbfa.st
• Documentation Kombai : docs.kombai.com