WEITERE LEKTÜRE
Weiterführende Lektüre zu Kiro
Tutorials, Dokumentation und Walkthroughs zum Designen mit Kiro, wie im veröffentlichten Guide aufgeführt.
Kiro 
OpenDesign Mit Kiro
in OpenDesign
gestalten.
Wie man Oberflächen mit Kiro in OpenDesign gestaltet: eine Spec vor jedem Code, Steering-Dateien für Texte und Fehlerbehandlung, eine Checkout-Aufgabe vom Briefing bis zur geprüften Datei, und die Grenzen, die Sie vorher kennen sollten.
Vom Briefing zum Interface01 / Kiro
SIE BRINGEN DIE IDEE EIN↗
„Ein Checkout, gebaut nach der Spezifikation,
nicht nach einem Moodboard.“
DREI EINSTIEGE IN DIESEN KIRO-LEITFADEN
Wählen Sie Ihren Einstieg mit Kiro
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche mit Kiro bauen
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGKiro von Null einrichten
Hier ist der vollständige Weg von einer sauberen Maschine zu einem Kiro CLI, das UI bauen und prüfen kann.
Zum Setup VERGLEICHKiro mit anderen Agents vergleichen
Wie sich Kiro von Codex, Claude Code, Cursor bei Design-Arbeit unterscheidet, und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Kiro-Design-Aufgabe
Eine Kiro-Design-Aufgabe, vom Briefing bis zur Oberfläche
Eine einzelne Aufgabe, von Anfang bis Ende gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie vor dem Abschluss noch durchführen. Die Oberfläche unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Kiro-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalten Sie einen zweiseitigen Checkout nach der beigefügten Spec: Versand und Zahlung, mit einer Bestellübersicht, die sichtbar bleibt. Halten Sie sich an die Steering-Dateien für Texte und Fehlerbehandlung. Desktop und Smartphone.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenSchrittnavigation, Adress-Autovervollständigung, Kartenvalidierung, Aktionscode
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Aufteilung der Arbeit: Sie, Kiro und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Kiro
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
- OpenDesign
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
- Prüfung
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
3Kiro-Artefakt: Der Checkout-Flow bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Formular und Zusammenfassung im 8px-Raster; die Zusammenfassung ist auf dem Desktop sticky und auf dem Smartphone einklappbar.
Hierarchie
Visuelle Hierarchie
Zuerst die Frage, dann die Felder, dann der Button; der Akzent markiert nur den aktuellen Schritt.
Responsive
Mobiles Layout
Die Zusammenfassung wird zu einer eingeklappten Gesamtzeile über dem Formular; der Button nimmt die volle Breite ein.
Interaktion
Interaktionsprüfungen
Lösen Sie einen Adressfehler aus, wenden Sie einen Aktionscode an, gehen Sie zurück zum Warenkorb.
Eignung
Wann Kiro zur Aufgabe passt – und wann nicht
Kiro passt, wenn
- Spezifikation vor Code. Kiro schreibt zunächst Anforderungen, ein Design-Dokument und eine Aufgabenliste, sodass Sie Layout und Umfang korrigieren, bevor der Build committet.
- Steering-Dateien. Ihre Standards, Konventionen und Tokens fließen in jeden Durchlauf ein, sodass die Ausgabe an einer Marke ausgerichtet ist statt an einem Standard-Look.
- Agent-Hooks. Automatisierungen werden durch Ereignisse wie das Speichern einer Datei ausgelöst — eine Stelle, um einen Verifizierungs- oder Review-Schritt zu erzwingen, ohne sich auf das Gedächtnis zu verlassen.
- MCP und kostenlos starten. Kiro CLI verwaltet MCP-Server für externen Kontext, meldet sich mit einer Builder ID, Google, GitHub oder Ihrer Organisation an und ist in der Preview kostenlos nutzbar.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt ist HTML, kein bearbeitbares Design-Dokument. Prüfen Sie einen separaten Vektor-Workflow für Ihr benötigtes Asset-Format.
- Sie haben weder Referenz noch Vorgaben. Ohne Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
- Sie verfügen nicht über die für diesen Agent erforderlichen Zugangsdaten. Erforderlich: AWS Builder ID, Google, GitHub oder AWS IAM Identity Center (kein AWS-Konto erforderlich). OpenDesign stellt keine Zugangsdaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet in Cursor oder Antigravity. Diese Agents haben eigene Seiten; der Workspace ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Kiro-Voraussetzungen, bevor Sie starten
Dieser Leitfaden behandelt Kiro, wie es über die OpenDesign-Desktop-App angebunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
WerkzeugumfangKiro, von Amazon
Kiro ist eine agentische KI von Amazon (AWS), die als IDE, CLI und Web-Interface verfügbar ist, entwickelt für spec-gesteuerte Entwicklung vom Prototyp bis zur Produktion. Sie befindet sich in der Preview. Diese Seite behandelt das Gestalten von Interfaces mit Kiro über OpenDesign, nicht die Oberfläche von Kiro selbst. Die Einrichtungshinweise von OpenDesign listen die verfügbaren Agenten auf.
Konten und AuthentifizierungAWS Builder ID, Google, GitHub oder AWS IAM
AWS Builder ID, Google, GitHub oder AWS IAM Identity Center (kein AWS-Konto erforderlich). Authentifizieren Sie sich mit Ihrer AWS Builder ID oder einem anderen Login – Anmeldedaten bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite auf Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quickstart der Quelle gelten für das Ausführen aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Minimal kompatible Kiro-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Kiro sie ausgeführt hat und dass sich das Artefakt öffnet. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Kiro-Setup in drei Schritten
Laden Sie zuerst herunter, schließen Sie das Kiro-Setup für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesem Weg zu folgen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Bereits installiert? Fahren Sie mit dem nächsten Schritt fort; ein erneuter Download ist nicht erforderlich. - 2
Bereiten Sie Ihre Kiro-Verbindung vor
Folgen Sie den Kiro-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrer AWS Builder ID oder einer anderen Anmeldemethode – Zugangsdaten bleiben auf Ihrem Rechner.
Kiro-CLI-Dokumentation# 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 whoamiAus den Kiro-Einrichtungshinweisen im veröffentlichten Guide; prüfen Sie die Herstellerdokumentation für den aktuellen Befehl.
MEILENSTEINBestätigen Sie den vorgesehenen Agent und das Konto. Ist er nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Kiro-Aufgabe aus
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherstatus und fordern Sie eine konkrete Änderung an. Eine generierte Datei ist der Beginn der Überprüfung, nicht das Ende.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Kiro-Design-Workflow
Der Kiro-Design-Workflow in fünf Schritten
Dieselbe Checkout-Flow-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt zeigt, was Sie bereitstellen, was Kiro übernimmt, was OpenDesign beiträgt und was Sie prüfen.
- 1
Design-Briefing
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
- SieSchreiben Sie das Briefing; hängen Sie einen Referenz-Screenshot an, falls vorhanden.
- KiroLiest das Briefing und die Instruktionsdatei des Projekts; fragt nach, wenn etwas unklar ist.
- OpenDesignStellt das Projekt, die Prompt-Oberfläche und das Skill für den Artefakttyp bereit.
- PrüfenStellen Sie sicher, dass das Briefing die Abnahmekriterien enthält. Diese jetzt hinzuzufügen ist günstiger als nach der Generierung.
- 2
Design-Vorgaben
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
- SieWählen Sie ein Design-System; legen Sie Breakpoints und verbindlich zu verwendende Komponenten fest.
- KiroLädt die DESIGN.md-Tokens und Posture-Regeln in den Kontext, bevor eine Zeile geschrieben wird.
- OpenDesignLiefert die Design-System-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
- PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Kiro schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- KiroPlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indexiert es für die Vorschau.
- PrüfenNoch nichts. Beurteilen Sie die Datei nach dem Rendern, nicht anhand des Quellcodes.
- 4
Vorschau
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
- SieWechseln Sie zwischen Breiten, klicken Sie sich durch die Interaktionen, hinterlassen Sie Kommentare zu Elementen.
- KiroLiest Ihre Kommentare zur Vorschau und bereitet die nächste Überarbeitung vor.
- OpenDesignRendert die Vorschau, stellt
data-od-id-Ziele für Kommentare und Änderungen bereit. - PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
- 5
Überarbeiten und Verifizieren
Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
- SieVerwandeln Kommentare in Anfragen; entscheiden, wann die Aufgabe abgeschlossen ist.
- KiroWendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignBehält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn Sie fertig sind.
- PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Kiro-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Kiro in OpenDesign erzeugen kann, ein Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die vor der Generierung durch Kiro gebunden werden müssen.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Kiro-Einschränkungen, manuelle Prüfungen und Fallbacks
- UmfangDie Kiro CLI bringt den Agent in Ihr Terminal – eine interaktive Chat-Sitzung, benutzerdefinierte Agents, Steering-Dateien, Agent-Hooks und Model Context Protocol-Server. Diese Seite behandelt Kiro als mit OpenDesign verbundenen Agent, nicht jede Kiro-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Zugangsdaten (AWS Builder ID, Google, GitHub oder AWS IAM Identity Center (kein AWS-Konto erforderlich)). Diese Seite macht keine Aussage über kostenlose Kontingente.
- NetzwerkLokale Projektdateien bedeuten nicht, dass die Inferenz offline erfolgt. Prüfen Sie die Anbietereinstellungen und Datenrichtlinien Ihres Agents, bevor Sie sensible Eingaben teilen.
- Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine Vektor-Designdateien.
- Manuelle ÜberprüfungBarrierefreiheit, echte Inhalte, Markenkonformität und korrekte Interaktionen werden von Ihnen in der Vorschau geprüft. Betrachten Sie jede Selbstprüfung des Agents als ersten Durchgang.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanleitung und Authentifizierung der installierten Version. Bewahren Sie den Fehler und das letzte funktionierende Artefakt auf, bevor Sie die Konfiguration ändern.
FAQ
Häufige Fragen zu Kiro und OpenDesign
Kann Kiro CLI wirklich Designarbeit leisten?
Ja — mit einem ästhetischen Skill, einem Design System und echten Referenzbildern im Kontext liefert Kiro CLI produktionsreife, responsive UI, und der spezifikationsgetriebene Workflow hält den Build rechenschaftspflichtig gegenüber der festgelegten Absicht. Ohne diesen Kontext tendiert er zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Benötige ich ein AWS-Konto, um Kiro CLI zu nutzen?
Nein — bei Kiro können Sie sich mit einer AWS Builder ID, Google, GitHub oder Ihrer Organisation (AWS IAM Identity Center) anmelden, und Sie benötigen kein AWS-Konto, um es zu nutzen. Kiro befindet sich in der Vorschau und ist kostenlos nutzbar. OpenDesign leitet Ihre Zugangsdaten in keinem Fall über einen Proxy weiter.
Was macht Kiro CLI speziell für Design gut?
Sein spezifikationsgetriebener Workflow: Kiro schreibt Anforderungen, ein Design-Dokument und eine Aufgabenliste, bevor es codiert, sodass Sie Layout und Umfang korrigieren können, bevor sich der Build festlegt. Steering-Dateien tragen Ihre Konventionen, und Hooks können Prüfungen erzwingen — der Geschmack kommt jedoch weiterhin aus dem Design System, dem Skill und den Referenzen, die Sie bereitstellen.
Kiro CLI oder Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für spezifische, codebasenbewusste Designentscheidungen; der Vorteil von Kiro CLI liegt in seinem spezifikationsgetriebenen, überprüfbaren Workflow mit Steering und Hooks. Viele Teams nutzen beides — mit OpenDesign können Sie Agents wechseln, ohne Ihren Design-Workflow zu ändern.
Wie verbinde ich Kiro CLI mit externen Design-Tools?
Kiro CLI verwaltet Model Context Protocol (MCP)-Server — nutzen Sie kiro-cli mcp, um sie hinzuzufügen. Ein MCP-Server kann echten Designkontext und Tools in den Agent einbringen, sodass der generierte Code der Quelle entspricht, statt sie nur anzunähern.
Erste Design-Aufgabe mit Kiro starten
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den Ablauf, und bringen Sie dann das eigentliche Briefing ein. Wählen Sie die Option, die zu Ihrem Setup passt; die Seite erkennt dies nicht automatisch.