POUR ALLER PLUS LOIN
Pour aller plus loin avec Kilo
Tutoriels, documentation et démonstrations pour concevoir avec Kilo, tels que listés dans le guide publié.
Kilo 
OpenDesign Concevoir avec
Kilo dans
OpenDesign.
Comment concevoir des interfaces avec Kilo Code dans OpenDesign : le modèle que vous choisissez, vos propres règles et modes, une tâche de page produit de la capture d'écran au fichier revu, et les limites à connaître avant de commencer.
Du brief à l'interface01 / Kilo
VOUS APPORTEZ L'IDÉE↗
« Une page produit à partir d’une capture d’écran,
avec le modèle de mon choix. »
TROIS FAÇONS D'ABORDER CE GUIDE KILO
Choisissez par où commencer avec Kilo
CE GUIDE · CONCEPTION D'INTERFACE
Construire une interface produit avec Kilo
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Kilo de zéro
Voici le parcours complet, d'une machine vierge jusqu'à un Kilo Code capable de construire et de vérifier une UI.
Accéder à la configuration COMPARAISONComparer Kilo avec d'autres agents
En quoi Kilo diffère de Codex, Claude Code, Cursor pour le travail de design, et quand choisir un autre workflow.
Voir la comparaisonSur cette page Exemple
Une tâche de design Kilo complète
Une tâche de design Kilo, du brief à l'interface
Une tâche unique, montrée de bout en bout : le brief et les contraintes que vous transmettez, l'artefact qui en résulte, et les vérifications que vous effectuez encore avant que ce soit terminé. L'interface ci-dessous est un exemple illustratif conçu pour cette page, pas une exécution Kilo enregistrée.
1Brief de conception et contraintes
BriefConcevez une page de détail produit pour une marque outdoor à partir de la capture d'écran jointe : galerie, prix, options de taille et de couleur, ajout au panier, et produits associés. Bureau et téléphone.
- Système de conceptionToile papier OpenDesign : Albert Sans, un accent vert
- Points de rupture1440px pour le bureau et 390px pour le mobile, sans défilement horizontal
- InteractionsMiniatures de galerie, sélection d'options, ajout au panier, défilement des produits associés
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Kilo et OpenDesign
- Vous
Rédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
- Kilo
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript et le révise sur demande.
- OpenDesign
Fournit le système de conception et le skill, génère l'aperçu et enregistre chaque version comme un fichier dans le projet.
- Révision
La hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction sont vérifiés avant la remise.
3Artefact Kilo : la page produit en 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Galerie et informations sur la grille de 8px ; la colonne d'informations ne dépasse jamais la hauteur de la galerie à 1440.
Hiérarchie
Hiérarchie visuelle
Nom, prix, puis options ; l'accent ne marque que le bouton d'ajout au panier.
Réactif
Mise en page mobile
Galerie d'abord, puis nom et prix, options, un bouton pleine largeur ; les produits associés défilent.
Interaction
Vérifications d'interaction
Changez de miniature, choisissez une taille, ajoutez au panier, faites défiler les articles associés.
Adéquation
Quand Kilo convient à la tâche, et quand ce n'est pas le cas
Kilo convient quand
- Capture d'écran → UI, indépendant du modèle. Pilotez-le avec le modèle capable de vision qui transforme le mieux une image de référence en balisage responsive, et vérifiez le résultat par rapport à celle-ci.
- BYOK sur tous les fournisseurs. Apportez vos propres clés pour Anthropic, OpenAI, Google, OpenRouter et plus encore — ou utilisez la passerelle de Kilo — afin que le coût et les identifiants restent les vôtres.
- Modes + règles personnalisées + MCP. Planifiez en mode Architect, construisez en mode Code, conservez vos conventions dans des règles personnalisées, et apportez un contexte de design réel via le serveur MCP Figma.
- Open source. Inspectez chaque prompt et chaque charge de contexte ; rien n'est caché, et l'agent s'exécute dans votre IDE ou CLI.
Choisissez un autre workflow quand
- Vous avez besoin de fichiers vectoriels modifiables. Le livrable est du HTML, pas un document de design modifiable. Vérifiez un workflow vectoriel distinct pour le format d'asset requis.
- Vous n'avez ni référence ni contrainte. Sans design system ni exemples, le résultat tend vers un aspect générique ; rédigez d'abord le brief.
- Vous ne disposez pas de l'identifiant requis par cet agent. Requis : votre propre clé API de fournisseur (apportez votre propre clé) ou la passerelle de Kilo. OpenDesign ne fournit ni ne relaie d'identifiants.
- Votre équipe travaille dans OpenCode ou Aider. Ces agents ont leurs propres pages ; l'espace de travail est le même, la configuration diffère. Voir agents associés.
Compatibilité
Prérequis Kilo avant de commencer
Ce guide couvre Kilo tel que connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
Portée de l'outilKilo, par Kilo Code, Inc.
Kilo Code est un agent de code IA open source de Kilo Code, Inc. Il s'exécute dans VS Code, les IDE JetBrains et le terminal, lisant votre base de code, modifiant des fichiers et exécutant des commandes. Cette page traite de la conception d'interfaces avec Kilo via OpenDesign, pas de l'interface propre à Kilo. Les notes de configuration d'OpenDesign répertorient les agents disponibles.
Comptes et authentificationVotre propre clé API de fournisseur (BYOK) ou celle de Kilo
Votre propre clé API de fournisseur (BYOK) ou la passerelle de Kilo. Authentifiez-vous avec votre propre clé de fournisseur (BYOK) ou la passerelle de Kilo — les identifiants restent sur votre machine. Cette page ne garantit ni quota ni prix.
Système et versionsApplication de bureau ou source
Consultez la page de téléchargement pour les versions de bureau. Les exigences Node.js et pnpm du guide de démarrage rapide source s'appliquent à l'exécution depuis les sources, pas à l'installation d'un paquet de bureau. Version minimale compatible de Kilo : non vérifiée ici.
Vérification de la connexionLe signal de réussite
Suivez les instructions de connexion affichées par votre version installée, puis exécutez une petite tâche. Confirmez que Kilo l'a traitée et que l'artefact s'ouvre. Un simple téléchargement n'établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Kilo en trois étapes
Téléchargez d'abord, terminez la configuration de Kilo pour votre version installée, puis vérifiez un petit résultat. Vous n'avez pas besoin de compiler OpenDesign depuis les sources pour suivre ce chemin.
- 1
Téléchargez l’application de bureau OpenDesign
Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.
Télécharger OpenDesignPOINT DE CONTRÔLEL'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau. - 2
Préparez votre connexion Kilo
Suivez les instructions Kilo dans votre version installée. Authentifiez-vous avec votre propre clé fournisseur (BYOK) ou la passerelle de Kilo — les identifiants restent sur votre machine.
Documentation Kilo Code# 1. Install the Kilo Code extension from the VS Code # (or JetBrains) marketplace, or install the CLI. # 2. Open your project and sign in / add a provider key cd your-project kilo # connect your provider (BYOK) or Kilo's gatewayD'après les notes de configuration Kilo du guide publié ; vérifiez la documentation du fournisseur pour la commande actuelle.
POINT DE CONTRÔLEConfirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante. - 3
Exécutez une petite tâche Kilo
Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.
Brief de démarrageCréez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.
POINT DE CONTRÔLEOuvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.
Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.
Le workflow de design Kilo
Le workflow de design Kilo en cinq étapes
La même tâche de page produit, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Kilo, ce qu'apporte OpenDesign et ce que vous vérifiez.
- 1
Brief de design
Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.
- VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
- KiloLit le brief et le fichier d'instructions du projet ; pose une question quand quelque chose est ambigu.
- OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
- VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.
- 2
Contraintes de design
Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.
- VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
- KiloCharge les tokens de DESIGN.md et les règles de posture dans le contexte avant d'écrire une ligne.
- OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
- VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.
- 3
Générer l'interface
Kilo écrit un fichier HTML autonome : mise en page, styles, interactions et points d'ancrage stables.
- VousAttendez, ou répondez à une question de clarification. Rien à configurer.
- KiloPlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
- OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
- VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.
- 4
Aperçu
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.
- VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
- KiloLit vos commentaires sur l'aperçu et prépare la révision suivante.
- OpenDesignAffiche l'aperçu, expose des cibles
data-od-idpour les commentaires et les modifications. - VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.
- 5
Réviser et vérifier
Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.
- VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
- KiloApplique les changements sur place et relance le fichier.
- OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
- VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.
Ressources
Ressources de design Kilo
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Les types de produits que Kilo peut réaliser dans OpenDesign, un skill par type.
Design systems
Tokens de marque et composants à lier avant que Kilo ne génère quoi que ce soit.
Modèles
Points de départ pour des présentations, des pages d'atterrissage et des écrans produit.
Limites
Limites de Kilo, vérifications manuelles et solutions de repli
- PérimètreIl est agnostique au modèle et compatible BYOK auprès de nombreux fournisseurs, avec des modes Architect/Code/Debug/Ask et le support MCP, ce qui vous permet de choisir le modèle et de garder le contrôle de vos identifiants. Cette page couvre Kilo en tant qu'agent connecté à OpenDesign, pas l'ensemble de ses fonctionnalités.
- Limites d'utilisationLes limites d'utilisation et les coûts dépendent des identifiants utilisés (votre propre clé API fournisseur ou la passerelle de Kilo). Cette page n'affirme rien sur d'éventuels quotas gratuits.
- RéseauDes fichiers de projet locaux ne signifient pas une inférence hors ligne. Vérifiez les paramètres du fournisseur et les politiques de données de votre agent avant de partager des informations sensibles.
- La sortie est en HTMLLes artefacts sont des fichiers HTML, pas des fichiers de design vectoriels.
- Revue manuelleL'accessibilité, le contenu réel, l'adéquation à la marque et la justesse des interactions sont vérifiés par vous dans l'aperçu. Considérez toute autovérification de l'agent comme une première passe.
- Solution de repliSi l'agent est indisponible ou qu'une tâche échoue, vérifiez les instructions de connexion et l'authentification de la version installée. Conservez l'erreur et le dernier artefact fonctionnel avant de modifier la configuration.
FAQ
Questions fréquentes sur Kilo et OpenDesign
Kilo Code peut-il vraiment faire du travail de design ?
Oui — avec un skill esthétique, un design system et de véritables images de référence dans le contexte, Kilo Code produit une UI responsive de qualité production, et un modèle capable de vision vérifie le résultat par rapport aux références. Sans ce contexte, il tend à revenir à un rendu générique par défaut, ce qui est précisément la lacune que OpenDesign comble.
Dois-je payer pour concevoir avec Kilo Code ?
Kilo Code est open-source et gratuit à installer. Vous apportez votre propre clé API de fournisseur (BYOK) et payez ce fournisseur directement, ou utilisez la passerelle propre de Kilo au tarif du fournisseur. Dans les deux cas, OpenDesign ne fait jamais transiter vos identifiants.
Qu'est-ce qui rend Kilo Code particulièrement adapté au design ?
Il est agnostique en matière de modèle et open-source, ce qui vous permet de le piloter avec le modèle capable de vision qui lit le mieux les captures de référence, d'inspecter exactement le contexte envoyé, et de garder le coût et les identifiants sous votre contrôle. Le goût provient toujours du design system, du skill et des références que vous fournissez.
Kilo Code ou Claude Code pour le design frontend ?
Les deux sont solides. Claude Code est réputé pour des décisions de design précises et conscientes de la base de code ; l'avantage de Kilo Code est d'être open-source et agnostique en matière de modèle avec BYOK, ce qui vous laisse choisir le modèle. De nombreuses équipes utilisent les deux — OpenDesign vous permet de changer d'agent sans modifier votre workflow de design.
Comment connecter Kilo Code à Figma ?
Ajoutez un serveur MCP Figma depuis la marketplace MCP de Kilo ou les paramètres MCP. Kilo peut alors récupérer un contexte de design réel — composants, variables, données de mise en page — afin que le code généré corresponde à la source au lieu de l'approximer.
Démarrer une première tâche de design avec Kilo
Commencez par une petite tâche, évaluez l'aller-retour, puis apportez le véritable brief. Choisissez l'option correspondant à votre configuration ; la page ne la détecte pas.