POUR ALLER PLUS LOIN
Pour aller plus loin avec Kiro
Tutoriels, documentation et guides pas à pas pour le travail de design avec Kiro, tels que rassemblés dans le guide publié.
Kiro 
OpenDesign Concevoir avec
Kiro dans
OpenDesign.
Comment concevoir des interfaces avec Kiro dans OpenDesign : une spec avant tout code, des fichiers de steering pour le texte et la gestion des erreurs, une tâche de checkout complète du brief au fichier validé, et les limites à connaître avant de commencer.
Du brief à l’interface01 / Kiro
VOUS APPORTEZ L'IDÉE↗
« Un tunnel de paiement construit à partir de la spec,
pas d’un mood board. »
TROIS POINTS DE DÉPART POUR KIRO
Par où commencer avec Kiro
CE GUIDE · CONCEPTION D'INTERFACE
Créer une interface produit avec Kiro
Ce guide couvre un brief, des références, des règles de design et un résultat HTML vérifié.
Lire ce guide CONFIGURATIONConfigurer Kiro à partir de zéro
Le parcours complet depuis une machine vierge jusqu'à une CLI Kiro qui construit et vérifie l'interface utilisateur.
Accéder à la configuration COMPARAISONComparer Kiro à d'autres agents
Comment Kiro se compare à Codex, Claude Code et Cursor pour le travail de design—et quand choisir un autre flux de travail.
Voir la comparaisonSur cette page Exemple
Une tâche de design Kiro complète
Du brief à l'interface : une tâche de design Kiro
Une tâche, du début à la fin : le brief et les contraintes que vous transmettez, l'artefact qui revient, et les vérifications que vous effectuez avant de la déclarer terminée. L'interface ci-dessous est un exemple illustratif créé pour cette page, et non une exécution Kiro enregistrée.
1Brief de conception et contraintes
BriefConcevez un tunnel de paiement en deux pages basé sur la spécification jointe : livraison et paiement, avec un récapitulatif de commande qui reste visible. Utilisez les fichiers de pilotage pour le texte et la gestion des erreurs. Bureau et téléphone.
- Système de conceptionToile papier OpenDesign : Albert Sans, un accent vert
- Points de rupture1440px bureau et 390px mobile, pas de barre de défilement horizontale
- InteractionsNavigation par étapes, autocomplétion d'adresse, validation de carte et champ de code promo
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Kiro et OpenDesign
- Vous
Rédigez le brief, choisissez le système de design et définissez les critères d'acceptation.
- Kiro
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript, et révise sur demande.
- OpenDesign
Fournit le système de design et la compétence, génère l'aperçu et stocke chaque version dans un fichier de projet.
- Révision
Avant la livraison, vérifiez la hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction.
3Artefact Kiro : tunnel de paiement à 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Formulaire et récapitulatif alignés sur la grille de 8px ; le récapitulatif reste fixe sur bureau et se replie sur téléphone.
Hiérarchie
Hiérarchie visuelle
Question, puis champs, puis bouton ; l'accent met en évidence uniquement l'étape en cours.
Réactif
Mise en page mobile
Le récapitulatif se replie en une ligne de total au-dessus du formulaire ; le bouton s'étend sur toute la largeur.
Interaction
Vérifications d'interaction
Déclenchez une erreur d'adresse, appliquez un code promo et revenez au panier.
Adéquation
Quand Kiro convient à la tâche, et quand ce n'est pas le cas
Kiro convient quand
- Spécification avant le code. Kiro rédige les exigences, un document de design et une liste de tâches en amont, vous permettant de corriger la mise en page et la portée avant que la construction ne s'engage.
- Fichiers de pilotage. Vos normes, conventions et jetons sont repris à chaque exécution, de sorte que le résultat corresponde à une marque plutôt qu'à un aspect par défaut.
- Crochets d'agent. Les automatisations se déclenchent sur des événements tels que l'enregistrement de fichier—un endroit pour imposer une étape de vérification ou de révision sans compter sur la mémoire.
- MCP et gratuit pour commencer. Kiro CLI gère les serveurs MCP pour le contexte externe, se connecte via Builder ID, Google, GitHub ou votre organisation, et est gratuit pour commencer en preview.
Choisissez un autre workflow quand
- Vous avez besoin de fichiers vectoriels modifiables. L'artefact est du HTML, pas un document de design modifiable. Tournez-vous vers un flux de travail vectoriel distinct pour le format d'actif requis.
- Vous n'avez ni référence ni contraintes. En l'absence d'un système de design ou d'exemples, le résultat dérive vers un aspect générique ; rédigez d'abord le brief.
- Vous ne disposez pas de l'identifiant requis par cet agent. Requis : AWS Builder ID, Google, GitHub ou AWS IAM Identity Center (aucun compte AWS requis). OpenDesign ne fournit ni ne proxifie les identifiants.
- Votre équipe travaille dans Cursor ou Antigravity. Ces agents ont leurs propres pages ; l'espace de travail reste identique, mais la configuration diffère. Voir agents apparentés.
Compatibilité
Prérequis Kiro avant de commencer
Ce guide se concentre sur Kiro connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
Portée de l'outilKiro, par Amazon
Kiro est une IA agentique d'Amazon (AWS), disponible sous forme d'IDE, de CLI et d'interface web, conçue pour le développement piloté par les spécifications, du prototype à la production. Elle est en preview. Cette page couvre la conception d'interfaces avec Kiro via OpenDesign, et non l'interface propre de Kiro. Les notes de configuration de OpenDesign listent les agents disponibles.
Comptes et authentificationAWS Builder ID, Google, GitHub, ou AWS IAM
Options d'authentification : AWS Builder ID, Google, GitHub ou AWS IAM Identity Center (aucun compte AWS requis). Connectez-vous avec votre AWS Builder ID ou une autre méthode—les identifiants restent sur votre machine. Cette page ne promet rien concernant les quotas ou la tarification.
Système et versionsApplication de bureau ou source
Voir la page de téléchargement pour les builds de bureau. Les exigences Node.js et pnpm dans le guide de démarrage rapide depuis les sources s'appliquent uniquement à l'exécution depuis les sources, pas à l'installation d'un paquet de bureau. Version minimale compatible de Kiro : non vérifiée ici.
Vérification de la connexionLe signal de réussite
Suivez les instructions de connexion de votre version installée, puis exécutez une petite tâche. Confirmez que Kiro l'a traitée et que l'artefact s'ouvre. Un simple téléchargement ne garantit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Kiro en trois étapes
Commencez par télécharger, effectuez la configuration de Kiro pour votre version installée, puis vérifiez un petit résultat. La compilation de OpenDesign depuis les sources n'est pas nécessaire pour ce parcours.
- 1
Téléchargez l’application de bureau OpenDesign
Sélectionnez le paquet pour 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 ; pas besoin de télécharger à nouveau. - 2
Préparez votre connexion Kiro
Suivez les instructions Kiro fournies dans votre version installée. Authentifiez-vous avec votre AWS Builder ID ou une autre méthode de connexion—les identifiants restent sur votre machine.
Documentation Kiro CLI# 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 whoamiD'après les notes de configuration Kiro dans le guide publié ; voir la documentation du fournisseur pour la commande actuelle.
POINT DE CONTRÔLEConfirmez l'agent et le compte prévus. Si indisponible, vérifiez la compatibilité avant de tenter une tâche plus importante. - 3
Exécutez une petite tâche Kiro
Commencez par un brief compact afin de pouvoir juger l'ensemble de la boucle, y compris une révision.
Brief de démarrageConstruisez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez aux largeurs bureau et mobile.
POINT DE CONTRÔLEOuvrez le résultat, testez l'état de sauvegarde et demandez une modification spécifique. Un fichier généré démarre le processus de révision ; il ne le conclut pas.
Pour exécuter OpenDesign depuis les sources, reportez-vous plutôt au guide de démarrage technique.
Le workflow de conception Kiro
Flux de travail de design en cinq étapes de Kiro
Une tâche de tunnel de paiement trace le chemin de votre brief à un fichier vérifié. Chaque étape montre ce que vous fournissez, ce que fait Kiro, ce qu'apporte OpenDesign et ce que vous vérifiez.
- 1
Brief de design
Restez simple : trois à six lignes nommant le public, la fonction de l'écran et les plateformes.
- VousVous rédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
- KiroKiro lit le brief et le fichier d'instructions du projet ; il pose des questions en cas d'ambiguïté.
- OpenDesignOpenDesign fournit le projet, la surface de prompt et la compétence pour le type d'artefact.
- VérificationVérifiez 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 système de design plus quelques règles fermes. Cette combinaison maintient le résultat dans l'image de marque plutôt que générique.
- VousChoisissez un système de design ; indiquez les points de rupture et les composants à utiliser obligatoirement.
- KiroAvant d'écrire le code, Kiro charge les jetons et règles de posture de DESIGN.md dans le contexte.
- OpenDesignOpenDesign fournit la bibliothèque de systèmes de design et lie celui choisi au modèle de compétence.
- VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.
- 3
Générer l'interface
Kiro produit un fichier HTML autonome : mise en page, styles, interactions et crochets stables.
- VousAttendez, ou répondez à une question de clarification. Aucune configuration n'est nécessaire.
- KiroKiro planifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
- OpenDesignOpenDesign enregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
- VérificationRien pour l'instant. Jugez le fichier après son rendu, pas à partir de sa source.
- 4
Aperçu
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est là que le jugement de design intervient.
- VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
- KiroKiro lit vos commentaires sur l’aperçu et prépare la prochaine révision.
- OpenDesignOpenDesign affiche l’aperçu et 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.
- KiroKiro applique les modifications sur place et réexécute le fichier.
- OpenDesignOpenDesign conserve les versions côte à côte ; exporte une image ou le HTML lorsque vous avez terminé.
- VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.
Ressources
Ressources de conception Kiro
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Types d’artefacts que Kiro peut produire dans OpenDesign, une compétence par type.
Design systems
Tokens de marque et composants à relier avant que Kiro ne génère quoi que ce soit.
Modèles
Points de départ pour les présentations, les pages d’atterrissage et les écrans produit.
Limites
Limites de Kiro, vérifications manuelles et solutions de repli
- PérimètreKiro CLI place l’agent dans votre terminal — session de chat interactive, agents personnalisés, fichiers de pilotage, hooks d’agent et serveurs Model Context Protocol. Cette page couvre Kiro en tant qu’agent connecté à OpenDesign, et non toutes les fonctionnalités de Kiro.
- Limites d'utilisationLes limites d'utilisation et les coûts dépendent de l'identifiant utilisé (AWS Builder ID, Google, GitHub, ou AWS IAM Identity Center (aucun compte AWS requis)). Cette page ne fait aucune affirmation concernant des 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 Kiro et OpenDesign
Kiro CLI gère-t-il vraiment le travail de design ?
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.
Ai-je besoin d'un compte AWS pour utiliser Kiro CLI ?
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.
Qu’est-ce qui donne à Kiro CLI son avantage en design ?
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.
Design frontend : Kiro CLI ou Claude Code ?
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.
Comment connecter Kiro CLI à des outils de design externes ?
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.
Ce qu’est Kiro CLI, exactement
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)
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)
Pourquoi le développement piloté par les spécifications convient au design
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).
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).
Configurer Kiro CLI pour le design, en partant de zéro
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.
Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
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.
Workflow de capture d’écran à l’UI avec Kiro
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.
Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
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.
Spécifications, pilotage, hooks et MCP
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.
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.
Comparaison de design : Kiro vs Codex vs Claude Code vs Cursor vs Gemini CLI
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
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
Pièges courants et comment éviter l’aspect « AI slop »
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.
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.
Utiliser Kiro CLI dans OpenDesign pour le design
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.
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.
OpenDesign est-il affilié à Amazon ou AWS ?
Non. OpenDesign est indépendant ; Kiro est une marque déposée d’Amazon.
Commencer une première tâche de design avec Kiro
Commencez par une petite tâche, jugez l’aller-retour complet, puis apportez le vrai brief. Choisissez l’option qui correspond à votre configuration ; cette page ne la détecte pas.