Question 1

Kiro CLI gère-t-il vraiment le travail de design ?

Accepted Answer

Oui — avec un skill esthétique, un design system et de vraies images de référence dans le contexte, Kiro CLI produit une UI responsive de qualité production, et son workflow spec-driven maintient le build fidèle à l'intention énoncée. Sans ce contexte, il tend à revenir à un rendu générique, ce qui est l'écart qu'OpenDesign comble.

Question 2

Ai-je besoin d'un compte AWS pour utiliser Kiro CLI ?

Accepted Answer

Non — Kiro vous permet de vous connecter avec un AWS Builder ID, Google, GitHub ou votre organisation (AWS IAM Identity Center), et vous n'avez pas besoin d'un compte AWS pour l'utiliser. Kiro est en préversion et gratuit pour commencer. OpenDesign ne fait jamais transiter vos identifiants, dans un cas comme dans l'autre.

Question 3

Qu’est-ce qui donne à Kiro CLI son avantage en design ?

Accepted Answer

Son workflow spec-driven : Kiro rédige des exigences, un document de design et une liste de tâches avant de coder, afin que vous corrigiez la mise en page et le périmètre avant que le build ne s'engage. Les fichiers de steering portent vos conventions et les hooks peuvent imposer des vérifications — mais le goût vient toujours du design system, du skill et des références que vous fournissez.

Question 4

Design frontend : Kiro CLI ou Claude Code ?

Accepted Answer

Les deux sont solides. Claude Code est connu pour des décisions de design précises et sensibles au codebase ; l'atout de Kiro CLI est son workflow spec-driven et vérifiable, avec steering et hooks. De nombreuses équipes utilisent les deux — OpenDesign vous permet de changer d'agent sans changer votre workflow de design.

Question 5

Comment connecter Kiro CLI à des outils de design externes ?

Accepted Answer

Kiro CLI gère les serveurs Model Context Protocol (MCP) — utilisez kiro-cli mcp pour les ajouter. Un serveur MCP peut apporter à l'agent un vrai contexte de design et de vrais outils, afin que le code généré corresponde à la source plutôt que de l'approximer.

Question 6

Ce qu’est Kiro CLI, exactement

Accepted Answer

Kiro est une IA agentique d’Amazon, livrée sous forme d’IDE, d’interface en ligne de commande et d’interface web, conçue pour vous mener du prototype à la production avec le développement piloté par les spécifications. Kiro CLI apporte cet agent à votre terminal : vous pouvez démarrer une session de chat interactive, créer et gérer des agents, et exécuter des serveurs Model Context Protocol — le tout depuis la ligne de commande. Kiro est en préversion.

Pour le travail de design, la propriété déterminante est le flux de travail. Plutôt que de transformer un prompt directement en code, Kiro écrit d’abord une spec — exigences, document de conception et liste de tâches séquencée — puis implémente en s’y conformant. Cela rend le plan de l’agent visible et vérifiable avant qu’aucune UI ne soit construite, ce qui correspond parfaitement à la manière dont les décisions de design devraient être prises : d’abord l’intention, ensuite l’exécution.

Spécifications : Kiro transforme un prompt en une spec structurée — exigences, document de conception et tâches distinctes — avant d’écrire du code, afin que le plan soit vérifiable dès le départ.

Steering + hooks : Les fichiers Steering transmettent vos standards, conventions et outils préférés à chaque exécution ; les hooks d’agent se déclenchent sur des événements comme l’enregistrement d’un fichier pour exécuter automatiquement des tâches en arrière-plan.

Gratuit pour commencer, prêt pour MCP : Connectez-vous avec un Builder ID, Google, GitHub ou votre organisation et commencez gratuitement ; Kiro CLI gère aussi les serveurs MCP pour intégrer du contexte externe.

Identifiants : AWS Builder ID, Google, GitHub ou AWS IAM Identity Center via kiro-cli login (aucun compte AWS requis)

Statut : En préversion ; disponible sous forme d’IDE, de CLI et d’interface web

Éditeur : Amazon (AWS)

Question 7

Pourquoi le développement piloté par les spécifications convient au design

Accepted Answer

L’avantage de Kiro CLI en matière de design vient de son flux de travail — mais, comme pour tout agent, le goût doit encore être fourni.

L’intention avant les pixels : Comme Kiro rédige d’abord une spec et un document de conception, vous pouvez corriger la mise en page, la hiérarchie et la portée au stade de la planification — avant que l’agent ne se soit engagé dans une implémentation générique.

Steering porte votre marque : Les fichiers Steering gardent vos tokens, composants et conventions sous les yeux de l’agent à chaque exécution, afin que le résultat s’aligne sur une marque plutôt que sur une apparence par défaut.

Les hooks font respecter la boucle : Les hooks d’agent peuvent exécuter des vérifications automatiquement lors de l’enregistrement — un endroit où brancher une étape de vérification ou de revue plutôt que de compter sur l’agent pour s’en souvenir.

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

La leçon est la même que celle que tout agent enseigne : Kiro CLI n’a pas de goût par défaut. Une spec garde un build honnête, mais elle ne produit un bon design que lorsque vous lui donnez des contraintes — un design system, une compétence esthétique et des références concrètes. OpenDesign regroupe exactement ces entrées, c’est pourquoi les deux s’accordent (plus bas).

Question 8

Configurer Kiro CLI pour le design, en partant de zéro

Accepted Answer

La séquence de configuration : installer → s'authentifier → ajouter le pilotage et une spécification de design → ajouter une compétence → activer la vérification par navigateur.

Encodez vos règles de design : placez vos tokens, primitives et conventions dans des fichiers de pilotage afin que l'agent les lise à chaque exécution, et que le résultat corresponde à une marque plutôt que de se rabattre sur une apparence générique.

Ajoutez la vérification par navigateur : connectez un serveur Playwright ou MCP de navigateur afin que Kiro effectue le rendu dans un vrai navigateur et vérifie sa sortie sur différents breakpoints, au lieu de simplement confirmer que le build passe.

Utilisez la section de configuration actuelle pour les commandes et les détails spécifiques à la version, qui peuvent changer.

# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command)

# 2. Authenticate — opens your browser to complete sign-in
kiro-cli login   # choose Builder ID, Google, GitHub, or your organization

# 3. Confirm you are signed in
kiro-cli whoami

# 4. Start an interactive session in your project
cd your-project
kiro-cli chat

# 5. Wire MCP servers (optional, e.g. for design handoff)
kiro-cli mcp add ...

Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.

# 2. Authenticate — opens your browser to complete sign-in
kiro-cli login   # choose Builder ID, Google, GitHub, or your organization

# 3. Confirm you are signed in
kiro-cli whoami

# 4. Start an interactive session in your project
cd your-project
kiro-cli chat

# 5. Wire MCP servers (optional, e.g. for design handoff)
kiro-cli mcp add ...Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.

Question 9

Workflow de capture d’écran à l’UI avec Kiro

Accepted Answer

La boucle de design la plus efficace avec Kiro CLI consiste à transformer une image de référence en une UI fonctionnelle et responsive, puis à itérer jusqu'à ce qu'elle corresponde — en laissant d'abord la spécification capturer l'intention, puis en construisant en s'appuyant sur elle.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 seule image principale.Laissez Kiro écrire une spécification et un document de design à partir de votre prompt, et examinez le plan avant qu'il ne construise — c'est là que vous détectez tôt les problèmes de mise en page et de périmètre.Conservez votre système de design et vos conventions dans des fichiers de pilotage, et indiquez à Kiro où se trouvent les tokens et les primitives canoniques.Lancez un serveur de développement et faites en sorte que Kiro effectue le rendu dans un vrai navigateur, en redimensionnant aux breakpoints pour vérifier le résultat.Itérez en demandant à Kiro de comparer son implémentation aux références — pas simplement de confirmer qu'elle compile.Ouvrez une session interactive et donnez des contraintes concrètes d'emblée, afin que la spécification qu'il écrit reflète votre intention réelle :Gardez les tâches petites et ciblées, committez les bonnes itérations et annulez les mauvaises (en prévenant Kiro lorsque vous annulez), afin que chaque passe construise sur une base propre.kiro-cli chat
# in the prompt:
> Here are my references: reference-desktop.png and reference-mobile.png.
  Write a spec, then implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see my steering files).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.

Question 10

Spécifications, pilotage, hooks et MCP

Accepted Answer

Quatre points d'extension rendent Kiro CLI pratique pour un travail de conception soutenu, et tous les quatre s'intègrent parfaitement dans un flux de travail de conception ouvert.

Spécifications : Exigences, un document de conception et une liste de tâches séquencée — l'enregistrement durable de ce qu'une fonctionnalité est censée être, révisable avant et pendant la construction.

Fichiers de pilotage : Ajoutez du contexte, des normes de codage et des flux de travail ou outils préférés que l'agent lit à chaque exécution — le foyer naturel de vos conventions et jetons de conception.

Hooks d'agent : Automatisations qui se déclenchent sur des événements tels qu'une sauvegarde de fichier, exécutant des tâches en arrière-plan comme des vérifications ou des documents — un endroit pour imposer automatiquement une étape de vérification.

Serveurs MCP : Kiro CLI gère les serveurs du protocole Model Context Protocol, la manière portable d'intégrer un contexte de conception externe et des outils qui fonctionnent à travers les agents, pas seulement Kiro.

Ce sont des capacités portables et multi-agents — exactement le genre de chose que OpenDesign est conçu pour orchestrer, plutôt que de recréer par projet.

Question 11

Comparaison de design : Kiro vs Codex vs Claude Code vs Cursor vs Gemini CLI

Accepted Answer

Il n'y a pas de gagnant unique pour le travail de conception — chaque agent a une force différente, et les équipes expérimentées les empilent. Un résumé équitable :

Kiro CLI — Flux de travail axé sur les spécifications — exigences, document de conception et liste de tâches avant le code ; les fichiers de pilotage et les hooks maintiennent les builds dans l'identité de marque — Builds structurés et révisables où l'intention et la portée sont verrouillées avant l'implémentation

Codex — Forte finition visuelle avec une compétence frontend ; builds asynchrones sandboxés — Builds asynchrones délégués et règles portables AGENTS.md

Claude Code — Décisions de conception spécifiques (hex, espacement, typographie) et UX consciente de la base de code — Raisonnement frontend et refactorisations à grand contexte

Cursor — Boucle visuelle de construction et visualisation avec aperçu en direct et modifications en ligne — Travail d'interface itératif et surveillé serré dans un IDE

Gemini CLI — Forte compréhension multimodale des images et un très grand contexte ; open-source avec un niveau gratuit — Travail intensif sur captures d'écran et maintien de tout un système de conception en contexte

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

Agent — Force de conception — Idéal pour

Question 12

Pièges courants et comment éviter l’aspect « AI slop »

Accepted Answer

La plainte la plus fréquente à 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 violette 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 le texte de l’interface. Aucun n’est propre à Kiro CLI ; c’est ce qui se produit quand un agent tourne sans contexte de design soigné — une spec garde une build dans la bonne direction, mais elle n’apporte pas le goût.

Ajoutez une compétence esthétique : une compétence de design soignée force l’agent à s’engager dans une vraie direction au lieu de l’apparence par défaut.

Vérifiez dans un vrai navigateur : effectuez le rendu et l’auto-vérification sur plusieurs breakpoints — branchez-le comme un hook si vous pouvez — afin que les mises en page ne se cassent pas silencieusement sur mobile.

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

Encodez les règles dans les fichiers de steering : placez des règles de style du type « pas de cartes hero, deux polices maximum, hiérarchie centrée sur la marque » là où l’agent les lit à chaque exécution.

Notez que chaque mitigation consiste à donner à l’agent un contexte de design soigné. Maintenir ce contexte à la main, projet par projet, est le labeur que OpenDesign élimine.

Question 13

Utiliser Kiro CLI dans OpenDesign pour le design

Accepted Answer

OpenDesign est la couche de design open source que le workflow ci-dessus ne cesse de réclamer. Elle traite Kiro CLI comme un adaptateur first-party et l’enveloppe dans une compétence soignée et une bibliothèque de design systems, un pipeline de rendu structuré et une interface locale de bureau — ainsi le contexte de design qui fait la qualité de Kiro est présent dès la première exécution, et non assemblé à la main à chaque fois. OpenDesign est local-first, ce qui simplifie l’association : vos fichiers et votre connexion restent sur votre machine.

Authentifiez-vous avec votre AWS Builder ID ou un autre moyen de connexion — les identifiants restent sur votre machine et ne passent jamais par nos serveurs proxy.

Choisissez un design system et une compétence, puis générez des présentations, 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 Kiro CLI, la même connexion — plus un vrai workflow de design portable et open source autour de lui. OpenDesign est local-first et sous Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.

Installez OpenDesign et sélectionnez Kiro CLI comme agent.

Question 14

OpenDesign est-il affilié à Amazon ou AWS ?

Accepted Answer

Non. OpenDesign est indépendant ; Kiro est une marque déposée d’Amazon.

Concevoir avec
Kiro dans
OpenDesign.

Par où commencer avec Kiro

Créer une interface produit avec Kiro

Configurer Kiro à partir de zéro

Comparer Kiro à d'autres agents

Du brief à l'interface : une tâche de design Kiro

1Brief de conception et contraintes

2Répartition du travail : vous, Kiro et OpenDesign

3Artefact Kiro : tunnel de paiement à 1440px et 390px

4Vérification avant transmission

Grille et espacement

Hiérarchie visuelle

Mise en page mobile

Vérifications d'interaction

Quand Kiro convient à la tâche, et quand ce n'est pas le cas

Kiro convient quand

Choisissez un autre workflow quand

Prérequis Kiro avant de commencer

Portée de l'outilKiro, par Amazon

Comptes et authentificationAWS Builder ID, Google, GitHub, ou AWS IAM

Système et versionsApplication de bureau ou source

Vérification de la connexionLe signal de réussite

Configuration de Kiro en trois étapes

Téléchargez l’application de bureau OpenDesign

Préparez votre connexion Kiro

Exécutez une petite tâche Kiro

Flux de travail de design en cinq étapes de Kiro

Brief de design

Contraintes de design

Générer l'interface

Aperçu

Réviser et vérifier

Ressources de conception Kiro

Pour aller plus loin avec Kiro

Skills de design

Design systems

Modèles

Limites de Kiro, vérifications manuelles et solutions de repli

Questions fréquentes sur Kiro et OpenDesign

Concevoir avec Kiro dans OpenDesign.