POUR ALLER PLUS LOIN
Pour aller plus loin avec Kiro
Tutoriels, documentation et présentations guidées pour concevoir avec Kiro, tels que listé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 FAÇONS D'ABORDER CE GUIDE KIRO
Choisissez par où commencer avec Kiro
CE GUIDE · CONCEPTION D'INTERFACE
Construire une interface produit avec Kiro
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Kiro à partir de zéro
Voici le chemin complet, d'une machine vierge à un Kiro CLI capable de construire et de vérifier une UI.
Accéder à la configuration COMPARAISONComparer Kiro à d'autres agents
En quoi Kiro 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 Kiro complète
Une tâche de design Kiro, du brief à l'interface
Une seule tâche, montrée de bout en bout : le brief et les contraintes que vous transmettez, l'artefact obtenu, et les vérifications que vous effectuez encore avant qu'elle ne soit terminée. L'interface ci-dessous est un exemple illustratif conçu pour cette page, pas une exécution Kiro enregistrée.
1Brief de conception et contraintes
BriefConcevez un checkout en deux pages à partir de la spec ci-jointe : livraison et paiement, avec un récapitulatif de commande qui reste visible. Suivez les fichiers de steering pour le texte et la gestion des erreurs. Ordinateur 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
- InteractionsNavigation par étapes, autocomplétion d'adresse, validation de carte, 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, sélectionnez le système de conception et définissez les critères d'acceptation.
- Kiro
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 Kiro : le flux de paiement à 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Formulaire et récapitulatif sur la grille de 8px ; le récapitulatif est sticky sur ordinateur et repliable sur téléphone.
Hiérarchie
Hiérarchie visuelle
La question, puis les champs, puis le bouton ; l'accent ne marque que l'étape en cours.
Réactif
Mise en page mobile
Le récapitulatif devient une ligne de total repliée au-dessus du formulaire ; le bouton occupe toute la largeur.
Interaction
Vérifications d'interaction
Déclenchez une erreur d'adresse, appliquez un code promo, revenez au panier.
Adéquation
Quand Kiro convient à la tâche, et quand il ne convient pas
Kiro convient quand
- Le cahier des charges avant le code. Kiro rédige d'abord les exigences, un document de conception et une liste de tâches, afin que vous puissiez corriger la mise en page et le périmètre avant que la construction ne s'engage.
- Fichiers de pilotage. Vos standards, conventions et tokens accompagnent chaque exécution, afin que le résultat corresponde à une marque plutôt qu'à un rendu par défaut.
- Hooks d'agent. Des automatisations se déclenchent sur des événements comme l'enregistrement d'un fichier — un moyen d'imposer une étape de vérification ou de revue sans compter sur la mémoire.
- MCP et gratuit pour démarrer. Kiro CLI gère les serveurs MCP pour le contexte externe, se connecte avec un Builder ID, Google, GitHub ou votre organisation, et est gratuit pour démarrer en préversion.
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 n'avez pas les identifiants requis par cet agent. Requis : AWS Builder ID, Google, GitHub, ou AWS IAM Identity Center (aucun compte AWS requis). OpenDesign ne fournit ni ne relaie aucune identification.
- Votre équipe travaille dans Cursor ou Antigravity. Ces agents ont leurs propres pages ; l'espace de travail est le même, la configuration diffère. Voir les agents associés.
Compatibilité
Prérequis Kiro avant de commencer
Ce guide couvre Kiro 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'outilKiro, par Amazon
Kiro est une IA agentique d'Amazon (AWS) proposée sous forme d'IDE, de CLI et d'interface web, conçue pour le développement piloté par spécifications, du prototype à la production. Il est en préversion. Cette page traite de la conception d'interfaces avec Kiro via OpenDesign, pas de l'interface propre de Kiro. Les notes de configuration d'OpenDesign répertorient les agents disponibles.
Comptes et authentificationAWS Builder ID, Google, GitHub, ou AWS IAM
AWS Builder ID, Google, GitHub, ou AWS IAM Identity Center (aucun compte AWS requis). Authentifiez-vous avec votre AWS Builder ID ou une autre connexion — les identifiants restent sur votre machine. Cette page ne garantit ni quota ni tarif.
Système et versionsApplication de bureau ou source
Consultez la page de téléchargement pour les builds de bureau. Les exigences Node.js et pnpm du quickstart source s'appliquent à 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 affichées par votre version installée, puis exécutez une petite tâche. Vérifiez que Kiro l'a traitée et que l'artifact s'ouvre. Un simple téléchargement n'établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Kiro en trois étapes
Téléchargez d'abord, terminez la configuration de Kiro 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 parcours.
- 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 Kiro
Suivez les instructions Kiro de votre version installée. Authentifiez-vous avec votre AWS Builder ID ou un autre mode 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 du guide publié ; consultez 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 Kiro
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 conception Kiro
Le workflow de conception Kiro en cinq étapes
La même tâche de flux de paiement, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Kiro, 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.
- KiroLit le brief et le fichier d'instructions du projet ; pose une question en cas d'ambiguïté.
- 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.
- KiroCharge les tokens 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
Kiro é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.
- KiroPlanifie 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.
- KiroLit 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.
- KiroApplique les modifications 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 conception Kiro
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 Kiro peut générer dans OpenDesign, un skill 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 des présentations, des pages d'atterrissage et des écrans produit.
Limites
Limitations de Kiro, vérifications manuelles et solutions de repli
- PérimètreLe CLI Kiro apporte l'agent dans votre terminal — une session de chat interactive, des agents personnalisés, des fichiers de pilotage, des hooks d'agent et des serveurs Model Context Protocol. Cette page traite de Kiro en tant qu'agent connecté à OpenDesign, pas de l'ensemble des 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 peut-il vraiment faire du 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 rend Kiro CLI particulièrement bon pour le 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.
Kiro CLI ou Claude Code pour le design frontend ?
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.
Démarrer une première tâche de design avec Kiro
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.