102.7K+Télécharger
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.

Télécharger OpenDesign Aller à la configuration

TROIS VOIES VERS LE GUIDE KILO

Décidez de votre point de départ pour Kilo

CE GUIDE · CONCEPTION D'INTERFACE

Faire passer une interface produit du brief au HTML dans Kilo

Cette page couvre le brief, les références, les règles de design et un résultat HTML vérifié.

Lire ce guide CONFIGURATION

Configurer Kilo de zéro

Le parcours complet, d'une machine propre à Kilo Code qui construit et vérifie l'interface.

Accéder à la configuration COMPARAISON

Comparer Kilo avec d'autres agents

Où Kilo se distingue de Codex, Claude Code et Cursor sur le travail de design, et quand un autre flux de travail est plus indiqué.

Voir la comparaison
Sur cette page Exemple
  1. Exemple
  2. Adéquation
  3. Compatibilité
  4. Configuration
  5. Workflow
  6. Ressources
  7. Limites
  8. FAQ

Une tâche de design Kilo complète

Une tâche de design Kilo : du brief à l'interface

La tâche part du brief et des contraintes que vous transmettez, passe par l'artefact renvoyé par Kilo, jusqu'aux vérifications que vous effectuez encore avant de la déclarer terminée. L'interface ci-dessous est un exemple illustratif créé pour cette page, et non une exécution Kilo enregistrée.

1Brief de conception et contraintes

Brief

À partir de la capture d'écran jointe, concevez une page de détail produit pour une marque outdoor : galerie, prix, choix de taille et de couleur, ajout au panier, produits associés. Desktop et mobile.

  • Système de conceptionAlbert Sans et un accent vert sur le canevas papier OpenDesign
  • Points de rupture1440px desktop et 390px mobile, sans défilement horizontal
  • InteractionsVignettes de galerie, sélection d'options, ajout au panier, défilement des produits associés
  • SortieUn seul fichier HTML autonome portant des crochets data-od-id stables

2Qui fait quoi : vous, Kilo, OpenDesign

  • Vous

    Vous rédigez le brief, choisissez le système de design et définissez les critères d'acceptation.

  • Kilo

    Kilo planifie la mise en page, écrit le HTML, le CSS et le JavaScript, puis révise sur demande.

  • OpenDesign

    OpenDesign fournit le système de design et la compétence, effectue le rendu de l'aperçu et conserve chaque version sous forme de fichier de projet.

  • Révision

    Avant la remise, vous vérifiez la hiérarchie visuelle, l'espacement en grille de 8px, les deux points de rupture et chaque interaction.

3L'artefact de Kilo : page produit en 1440px et 390px

L'artefact de Kilo : page produit en 1440px et 390px — Bureau
Exemple illustratif

4Vérification avant transmission

Mise en page

Grille et espacement

La galerie et les informations s'alignent sur la grille de 8px ; en 1440, la colonne d'informations reste dans la hauteur de la galerie.

Hiérarchie

Hiérarchie visuelle

Le nom et le prix viennent en premier, puis les options ; l'accent est réservé au bouton d'ajout au panier.

Réactif

Mise en page mobile

Ordre mobile : galerie, nom et prix, options, un bouton pleine largeur ; défilement des produits associés.

Interaction

Vérifications d'interaction

Interactions à tester : changer de vignette, choisir la taille, ajouter au panier, faire défiler les articles associés.

Adéquation

Où Kilo s'intègre — et où il ne s'intègre pas

Kilo convient quand

  • Choix du modèle pour capture d'écran → UI. Dirigez Kilo vers le modèle doté de vision qui convertit le mieux une image de référence en balisage réactif, puis comparez le résultat à cette image.
  • BYOK multi-fournisseurs. Utilisez vos propres clés pour Anthropic, OpenAI, Google, OpenRouter et d'autres, ou la passerelle de Kilo, en gardant le coût et les identifiants entre vos mains.
  • Modes, règles personnalisées, MCP. Le mode Architect pour la planification, le mode Code pour la construction, des règles personnalisées pour les conventions, et le serveur MCP Figma pour un contexte de design réel.
  • Open source. Les prompts et les charges utiles de contexte sont inspectables, rien n'est caché, et Kilo s'exécute dans votre IDE ou votre CLI.

Choisissez un autre workflow quand

  • Vous avez besoin de fichiers vectoriels modifiables. Ce qui revient est du HTML, pas un document de design modifiable. Tournez-vous vers un flux de travail vectoriel distinct pour le format d'actif dont vous avez besoin.
  • Il n'y a ni référence ni contrainte. Sans système de design ni exemples, la sortie devient générique ; rédigez d'abord le brief.
  • L'identifiant requis est manquant. Kilo a besoin soit de votre propre clé API de fournisseur (BYOK), soit de la passerelle de Kilo. OpenDesign ne fournit ni ne proxifie les identifiants.
  • Votre équipe travaille dans OpenCode ou Aider. Ces agents ont leurs propres pages ; l'espace de travail est conservé tandis que la configuration diffère. Voir agents associés.

Compatibilité

Prérequis Kilo avant de commencer

Cette page couvre Kilo connecté via l’application de bureau OpenDesign. Les références ont été vérifiées le 6 septembre 2026.

Portée de l'outilKilo, par Kilo Code, Inc.

Kilo Code, par Kilo Code, Inc., est un agent de codage IA open source. Il fonctionne dans VS Code, les IDE JetBrains et le terminal : il lit votre base de code, modifie des fichiers et exécute des commandes. Le sujet ici est la conception d’interfaces avec Kilo via OpenDesign, pas l’interface propre à Kilo. Les notes d’installation de OpenDesign listent les agents disponibles.

Comptes et authentificationUne clé API de fournisseur que vous fournissez (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. Aucun quota ni prix n’est promis ici.

Système et versionsApplication de bureau ou source

Les versions de bureau se trouvent sur la page de téléchargement. Les prérequis Node.js et pnpm du démarrage rapide source s’appliquent lors d’une exécution depuis les sources, pas lors de l’installation d’un paquet de bureau. Version minimale compatible de Kilo : non vérifiée sur cette page.

Vérification de la connexionLe signal de réussite

Utilisez les instructions de connexion affichées par votre version installée, puis essayez une petite tâche. Vérifiez que Kilo l’a terminée et que l’artefact s’ouvre. Le simple téléchargement ne prouve pas que la connexion fonctionne.

Commencez par l’application de bureau

Configuration de Kilo en trois étapes

Commencez par le téléchargement, terminez la configuration de Kilo pour votre version installée, puis testez un petit résultat. Suivre ce parcours ne nécessite pas de compiler OpenDesign depuis les sources.

  1. 1

    Téléchargez l’application de bureau OpenDesign

    Choisissez le paquet adapté à votre machine, installez-le et lancez l’application.

    Télécharger OpenDesign
    POINT DE CONTRÔLE
    L’application de bureau s’ouvre. Si vous l’avez déjà, passez à l’étape suivante ; aucun second téléchargement n’est nécessaire.
  2. 2

    Préparez votre connexion Kilo

    Utilisez les instructions Kilo correspondant à votre version installée. Connectez-vous avec votre propre clé de fournisseur (BYOK) ou la passerelle de Kilo ; les identifiants restent en local 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 gateway

    Tiré des notes de configuration Kilo du guide publié ; pour la commande actuelle, consultez la documentation du fournisseur.

    POINT DE CONTRÔLE
    Assurez-vous que l’agent et le compte sont bien ceux que vous vouliez. S’ils ne sont pas disponibles, consultez la compatibilité avant de tenter une tâche plus importante.
  3. 3

    Exécutez une petite tâche Kilo

    Commencez par un brief suffisamment petit pour juger toute la boucle, y compris une révision.

    Brief de démarrage

    Créez un écran de paramètres avec un formulaire de profil et une confirmation d’enregistrement. Suivez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.

    POINT DE CONTRÔLE
    Ouvrez le résultat, testez l’état d’enregistrement, puis demandez une modification précise. Le fichier généré lance la revue ; il ne la termine pas.

Pour exécuter OpenDesign depuis les sources à la place, consultez le démarrage rapide technique.

Le workflow de design Kilo

Cinq étapes pour une tâche de design avec Kilo

Une page produit, suivie du brief initial à un fichier que vous avez réellement vérifié. Chaque étape indique votre contribution, ce que fait Kilo, ce qu’apporte OpenDesign et la vérification qui la clôture.

  1. 1

    Brief de design

    Gardez-le simple et court — trois à six lignes. Dites à qui s’adresse l’écran, ce qu’il doit faire et quelles plateformes comptent.

    • VousVous rédigez le brief et joignez une capture d’écran de référence lorsqu’il en existe une.
    • KiloLit votre brief et le fichier d’instructions du projet, et pose des questions plutôt que de deviner lorsqu’un détail est ambigu.
    • OpenDesignFournit le projet, la surface de prompt et la compétence correspondant au type d’artefact.
    • VérificationVérifiez que le brief énonce clairement les critères d’acceptation. Les écrire maintenant coûte moins cher que corriger le fichier plus tard.
  2. 2

    Contraintes de design

    Un système de design plus une poignée de règles fermes — la différence entre une production qui porte votre marque et une production qui pourrait appartenir à n’importe qui.

    • VousChoisissez un système de design, puis nommez vos points de rupture et les composants qui doivent apparaître.
    • KiloCharge les tokens et les règles de posture de DESIGN.md dans le contexte avant d’écrire le moindre balisage.
    • OpenDesignFournit la bibliothèque de système de design et intègre le système choisi dans le modèle de compétence.
    • VérificationVérifiez que les tokens correspondent à votre marque : une couleur d’accent, des polices correctes, un rayon correct.
  3. 3

    Générer l'interface

    Kilo écrit un seul fichier HTML autonome — mise en page, styles, interactions, hooks stables.

    • VousVotre rôle ici est d’attendre ou de répondre à une question de clarification. Il n’y a rien à configurer.
    • KiloPlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier, répare ce qui échoue.
    • OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour qu'il puisse être prévisualisé.
    • VérificationRien pour l'instant — jugez-le une fois rendu, pas en lisant la source.
  4. 4

    Aperçu

    OpenDesign rend le fichier aux largeurs que vous avez spécifiées. Le jugement se fait ici, sur l'aperçu.

    • VousModifiez les largeurs, testez les interactions et commentez des éléments précis.
    • KiloLit les commentaires que vous avez laissés sur l'aperçu et prépare la révision suivante.
    • OpenDesignGénère l'aperçu et expose les cibles data-od-id afin que les commentaires et modifications puissent s'y rattacher.
    • VérificationVérifiez la hiérarchie, le contraste, le débordement à 390px et les états de focus, et demandez si l'accent reste parcimonieux.
  5. 5

    Réviser et vérifier

    Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision arrive sous forme de nouveau fichier ; rien n'est écrasé silencieusement.

    • VousConvertissez les commentaires en demandes et décidez quand la tâche est terminée.
    • KiloApplique les modifications sur place et exécute à nouveau le fichier.
    • OpenDesignConserve les versions côte à côte et, à la fin, exporte une image ou le HTML.
    • VérificationRevérifiez uniquement la zone modifiée, puis la page entière une fois par point de rupture.

Ressources

Ressources de design Kilo

Skills

Skills de design

Les types d'artefacts que Kilo peut produire dans OpenDesign — une compétence par type.

Parcourir les skills Systèmes de design

Design systems

Jetons de marque et composants à lier avant que Kilo ne génère quoi que ce soit.

Parcourir les systèmes Modèles

Modèles

Points de départ pour des présentations, pages d'atterrissage et écrans produit.

Parcourir les modèles

Limites

Là où Kilo s'arrête : limites, vérifications manuelles, solutions de repli

  • PérimètreKilo est agnostique quant au modèle et BYOK chez de nombreux fournisseurs, avec les modes Architect/Code/Debug/Ask et la prise en charge de MCP, donc le choix du modèle et les identifiants vous restent propres. Cette page porte sur Kilo en tant qu'agent intégré à OpenDesign, et non sur toutes les fonctionnalités de Kilo.
  • Limites d'utilisationLes limites de coût et d'utilisation suivent l'identifiant que vous utilisez pour vous authentifier — votre propre clé API de fournisseur ou la passerelle de Kilo. Aucune affirmation de quota gratuit n'est faite ici.
  • RéseauLes fichiers présents dans votre projet ne rendent pas l'inférence hors ligne. Avant de partager des entrées sensibles, examinez les paramètres du fournisseur et les politiques de données de l'agent.
  • La sortie est en HTMLL'artefact est un fichier HTML ; ce n'est pas un fichier de design vectoriel.
  • Revue manuelleVous évaluez l'accessibilité, le contenu réel, l'adéquation à la marque et la justesse des interactions dans l'aperçu. Toute auto-vérification effectuée par l'agent est une première passe, pas une validation.
  • Solution de repliLorsque l'agent est indisponible ou qu'une tâche échoue, consultez les instructions de connexion et d'authentification pour votre version installée. Avant de modifier la configuration, conservez l'erreur et le dernier artefact qui a fonctionné.

FAQ

Questions fréquentes sur Kilo et OpenDesign

Kilo Code fait-il vraiment du 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.
Y a-t-il un coût à 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 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 Kilo Code se connecte-t-il à 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.
Ce qu'est Kilo Code
Kilo Code est un agent de codage IA open source développé par Kilo Code, Inc. Il s'exécute comme extension VS Code, dans les IDE JetBrains et en interface en ligne de commande — il lit votre dépôt, modifie des fichiers, exécute des commandes et planifie puis vérifie le travail à partir de tâches en langage naturel plutôt que de simplement compléter des lignes. Son trait distinctif est qu'il est agnostique quant au modèle : vous choisissez le modèle qui le pilote, et vous apportez vos propres clés de fournisseur.

Pour le travail de design, deux propriétés se distinguent. Parce qu'il est agnostique quant au modèle, vous pouvez le pointer vers le modèle doté de vision le plus performant pour lire une capture d'écran de référence et raisonner sur la mise en page. Et parce qu'il est open source et BYOK, vous pouvez inspecter exactement le contexte envoyé et garder les identifiants et les coûts sous votre propre contrôle.

Modes d'agent : Kilo fournit des modes spécialisés — Architect pour la planification, Code pour la construction, Debug pour la correction et Ask pour les questions — ainsi que des modes personnalisés, ce qui vous permet de planifier un design puis de l'implémenter en passes séparées et ciblées.

Règles personnalisées + MCP : Il lit les règles personnalisées au niveau du projet pour un contexte persistant et prend en charge les serveurs MCP (avec une place de marché MCP), afin que vous puissiez ajouter du contexte externe comme un fichier Figma en direct ou des outils de design.

Apportez vos propres clés : Kilo fonctionne en BYOK avec de nombreux fournisseurs — Anthropic, OpenAI, Google, OpenRouter, et d'autres — ou vous pouvez utiliser la passerelle de Kilo, qui expose plus de 500 modèles au coût du fournisseur.

Identifiant : votre propre clé API de fournisseur (BYOK — Anthropic, OpenAI, Google, OpenRouter, et d'autres) ou la passerelle de Kilo

Éditeur : Kilo Code, Inc. (open source)

Licence : open source
Pourquoi un agent ouvert et agnostique au modèle convient au design
L'avantage de Kilo Code en matière de design vient de son ouverture et du choix du modèle — mais, comme pour tout agent, le goût doit encore être fourni.

Agnostique quant au modèle par conception : comme vous choisissez le modèle, vous pouvez piloter Kilo avec le modèle doté de vision qui lit le mieux les captures d'écran de référence — et en changer quand un meilleur apparaît, sans modifier votre flux de travail.

Ouvert et inspectable : Kilo est open source, vous pouvez donc voir exactement quels contexte et prompts sont envoyés — utile lorsque vous voulez que l'agent réutilise vos véritables primitives de design plutôt que d'inventer des styles ponctuels.

Conventions dans les règles personnalisées : les règles personnalisées du projet (plus un serveur MCP pour Figma) orientent l'agent vers vos tokens, vos composants et vos spécifications réelles, de sorte qu'il travaille pour une marque au lieu d'un rendu par défaut.

Le goût provient de trois entrées que vous fournissez : un design system, une skill et de vraies images de référence.

La leçon est la même que celle qu'enseigne tout agent : Kilo Code n'a pas de goût par défaut. Il produit un bon design lorsque vous lui donnez des contraintes — un design system, une skill esthétique et des références concrètes. OpenDesign empaquette exactement ces entrées, ce qui explique pourquoi les deux s'accordent si bien (davantage ci-dessous).
Configurer Kilo Code pour le design, à partir de zéro
La séquence de configuration : installer → connecter un fournisseur → ajouter des règles personnalisées → ajouter une skill → activer la vérification dans le navigateur.

Encodez vos règles de design : placez vos tokens, primitives et conventions dans les règles personnalisées de Kilo et orientez l'agent vers elles, afin que la sortie corresponde à une marque au lieu de tomber dans un rendu générique.

Ajoutez la vérification dans le navigateur : câblez un MCP Playwright ou navigateur afin que Kilo s'affiche dans un vrai navigateur et vérifie sa sortie sur différents breakpoints au lieu de seulement confirmer que le build passe.

Reportez-vous à la section de configuration actuelle pour les commandes et les détails propres à chaque version, qui peuvent changer.

# 1. Installez l'extension Kilo Code depuis la place de marché # VS Code (ou JetBrains), ou installez la CLI. # 2. Ouvrez votre projet et connectez-vous / ajoutez une clé de fournisseur cd your-project kilo # connectez votre fournisseur (BYOK) ou la passerelle de Kilo # 3. Ajoutez le contexte du projet # créez des règles personnalisées pour les conventions de design de ce projet # 4. Câblez le serveur MCP Figma (facultatif, pour le passage de relais design) # ajoutez-le depuis la place de marché MCP / les paramètres MCP
Exemple de commande historique tiré du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
La boucle capture d'écran vers UI
La boucle de design la plus rentable avec Kilo Code consiste à transformer une image de référence en une UI fonctionnelle et responsive, puis à itérer jusqu'à ce qu'elle corresponde — en s'appuyant sur un modèle doté de vision pour comparer la sortie à la référence.

Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (desktop et mobile, survol, vide, chargement), pas seulement une belle capture d'accroche.

Soyez précis dans le prompt ; des prompts vagues produisent une UI générique même avec un modèle puissant.

Conservez votre design system et vos conventions dans les règles personnalisées de Kilo, et indiquez à l'agent où se trouvent les tokens et les primitives canoniques.

Lancez un serveur de développement et faites afficher le rendu de Kilo dans un vrai navigateur, en redimensionnant selon les breakpoints pour vérifier le résultat.

Itérez en demandant à Kilo de comparer son implémentation aux captures d'écran — pas simplement de confirmer que le build passe.

Utilisez le mode Architect pour planifier la construction, puis passez en mode Code et joignez vos références avec des contraintes concrètes :

Gardez des prompts courts et ciblés, committez les bonnes itérations et annulez les mauvaises (en prévenant Kilo lorsque vous annulez), afin que chaque passe reparte d'une base propre.

# Planifiez en mode Architect, puis construisez en mode Code : > Implémente ce design à partir de @reference-desktop.png et @reference-mobile.png en React + Vite + Tailwind + TypeScript. Réutilise mes composants et tokens de design system existants issus des règles personnalisées. Respecte les espacements, la mise en page et la hiérarchie ; rends-le responsive. Affiche-le dans le navigateur et itère jusqu'à ce qu'il corresponde aux références sur tous les breakpoints.
Exemple de commande historique tiré du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Modes, règles personnalisées et MCP
Trois points d'extension rendent Kilo Code pratique pour un travail de design soutenu, et tous trois s'intègrent proprement à un flux de travail de design ouvert.

Modes (Architect → Code) : planifiez la structure d'un écran en mode Architect, puis implémentez-la en mode Code et corrigez les problèmes en mode Debug — en séparant l'intention de design de l'implémentation. Les modes personnalisés vous permettent d'encoder votre propre passe de revue de design.

Règles personnalisées : les règles personnalisées du projet sont le foyer durable de vos conventions de design — tokens, primitives et checklists de revue — lues à chaque exécution pour que l'agent travaille pour votre marque.

Serveurs MCP : Kilo prend en charge les serveurs MCP via sa place de marché — la façon portable d'intégrer du contexte de design et des outils externes, tout particulièrement un serveur MCP Figma, qui fonctionnent d'un agent à l'autre, pas seulement avec Kilo.

Ce sont des capacités portables et multi-agents — exactement le genre de choses qu'OpenDesign est conçu pour orchestrer, plutôt que de les recréer projet par projet.
Kilo Code face à Codex, Claude Code, Cursor et Gemini CLI pour le design
Il n'y a pas de vainqueur unique pour le travail de design — chaque agent a une force différente, et les équipes expérimentées les empilent. Un résumé équitable :

Kilo Code — Open source et agnostique quant au modèle, avec BYOK chez de nombreux fournisseurs ; modes Architect/Code et MCP — Choisir son propre modèle par tâche et garder coûts et identifiants sous son contrôle

Codex — Un fort poli visuel grâce à une skill frontend ; builds asynchrones en sandbox — Builds asynchrones délégués et règles AGENTS.md portables

Claude Code — Des décisions de design précises (hex, espacements, typographie) et une UX consciente de la base de code — Raisonnement frontend et refactorisations à grand contexte

Cursor — Une boucle visuelle construire-et-voir avec aperçu en direct et éditions en ligne — Travail d'UI serré, itérer-et-surveiller, dans un IDE

Gemini CLI — Une forte compréhension d'images multimodale et un contexte de 1M de tokens — Travail riche en captures d'écran et maintien de tout un design system dans le contexte

Le verdict récurrent de la communauté est que le goût vient des humains : tous tombent par défaut dans une esthétique générique sans skills, références et contraintes. C'est le vrai problème à résoudre — et il a la forme d'un outil de design, pas d'un modèle.

Agent — Force de design — Idéal pour
Pièges, et comment échapper à l'aspect « AI slop »
La plainte la plus courante à propos du design généré par IA est qu'il paraît générique — dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres dramatiques, une ambiance Inter-et-violet qui « crie qu'une IA a fait ça ». Parmi les autres problèmes signalés figurent des mises en page mobiles cassées et des instructions qui fuient dans les textes de l'UI. Aucun de ces problèmes n'est propre à Kilo Code ; c'est ce qui arrive quand un agent fonctionne sans contexte de design soigné.

Ajoutez une skill esthétique : une skill de design soignée force l'agent à s'engager dans une vraie direction au lieu du rendu par défaut.

Vérifiez dans un vrai navigateur : utilisez un modèle doté de vision pour afficher le rendu et s'auto-contrôler sur différents breakpoints, afin que les mises en page ne cassent pas silencieusement sur mobile.

Fournissez des tokens et des références : de vrais tokens de design et des captures d'écran de référence sont le plus grand levier unique sur la qualité de la sortie.

Encodez les règles dans les règles personnalisées : placez des règles du type « pas de cartes hero, deux polices maximum, hiérarchie priorisant la marque » là où l'agent les lit à chaque exécution.

Remarquez que chaque atténuation consiste à donner à l'agent un contexte de design soigné. Maintenir ce contexte à la main, projet par projet, est le labeur dont OpenDesign vous débarrasse.
Concevoir avec Kilo Code dans OpenDesign
OpenDesign est la couche de design open source que le flux de travail ci-dessus ne cesse de réclamer. Elle traite Kilo Code comme un adaptateur de première partie et l'enveloppe dans une bibliothèque soignée de skills et de design systems, un pipeline de rendu structuré et une UI de bureau locale — de sorte que le contexte de design qui rend Kilo bon est présent dès la première exécution, au lieu d'être assemblé à la main à chaque fois. Les deux sont open source et local-first, ce qui rend l'association naturelle.

Authentifiez-vous avec votre propre clé de fournisseur (BYOK) ou la passerelle de Kilo — les identifiants restent sur votre machine et ne passent jamais par nos serveurs.

Choisissez un design system et une skill, puis générez des decks, des prototypes et des landing pages avec un goût cohérent.

Chaque artefact et fichier DESIGN.md vit dans votre propre dépôt, pas dans un cloud hébergé.

Le même agent Kilo Code, les mêmes clés — plus un vrai flux de travail de design portable et open source autour. C'est local-first et open source, donc rien de votre travail ni de vos identifiants ne quitte votre machine.

Installez OpenDesign et sélectionnez Kilo Code comme agent.
OpenDesign est-il affilié à Kilo Code ?
Non. OpenDesign est un projet indépendant ; les deux sont open source, mais ils sont distincts.