102.7K+Download
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.

OpenDesign herunterladen Zur Einrichtung

DREI AUSGANGSPUNKTE FÜR KIRO

Wo man mit Kiro beginnt

DIESER LEITFADEN · UI-DESIGN

Eine Produktoberfläche mit Kiro erstellen

Dieser Leitfaden behandelt ein Briefing, Referenzen, Designregeln und ein geprüftes HTML-Ergebnis.

Diese Anleitung lesen EINRICHTUNG

Kiro von Null einrichten

Der komplette Weg von einem sauberen Rechner bis zu einer Kiro CLI, die UI baut und verifiziert.

Zum Setup VERGLEICH

Kiro mit anderen Agents vergleichen

Wie Kiro im Vergleich zu Codex, Claude Code und Cursor bei Designarbeit abschneidet – und wann man einen anderen Workflow wählen sollte.

Zum Vergleich
Auf dieser Seite Beispiel
  1. Beispiel
  2. Eignung
  3. Kompatibilität
  4. Setup
  5. Workflow
  6. Ressourcen
  7. Einschränkungen
  8. FAQ

Eine vollständige Kiro-Design-Aufgabe

Vom Briefing zur Oberfläche: Eine Kiro-Designaufgabe

Eine Aufgabe von Anfang bis Ende: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie durchführen, bevor Sie sie als erledigt bezeichnen. Die folgende Oberfläche ist ein illustratives Beispiel, das für diese Seite erstellt wurde, kein aufgezeichneter Kiro-Lauf.

1Design-Briefing und Vorgaben

Briefing

Entwerfen Sie einen zweiseitigen Checkout basierend auf der beigefügten Spezifikation: Versand und Zahlung, mit einer Bestellübersicht, die sichtbar bleibt. Verwenden Sie die Steering-Dateien für Texte und Fehlerbehandlung. Desktop und Telefon.

  • Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
  • Breakpoints1440px Desktop und 390px Mobil, keine horizontale Bildlaufleiste
  • InteraktionenSchritt-Navigation, Adress-Autovervollständigung, Kartenvalidierung und ein Promo-Code-Feld
  • AusgabeEine in sich geschlossene HTML-Datei mit stabilen data-od-id-Hooks

2Arbeitsteilung: Sie, Kiro und OpenDesign

  • Sie

    Briefing schreiben, Designsystem auswählen und Abnahmekriterien definieren.

  • Kiro

    Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet auf Anfrage.

  • OpenDesign

    Stellt das Designsystem und den Skill bereit, rendert die Vorschau und speichert jede Version als Projektdatei.

  • Prüfung

    Vor der Übergabe visuelle Hierarchie, Abstände auf dem 8px-Raster, beide Breakpoints und jede Interaktion prüfen.

3Kiro-Artefakt: Checkout-Flow bei 1440px und 390px

Kiro-Artefakt: Checkout-Flow bei 1440px und 390px — Desktop
Illustratives Beispiel

4Überprüfung vor der Übergabe

Layout

Raster und Abstände

Formular und Übersicht am 8px-Raster ausgerichtet; die Übersicht bleibt auf Desktop haften und klappt auf dem Telefon zusammen.

Hierarchie

Visuelle Hierarchie

Frage, dann Felder, dann Schaltfläche; die Akzentfarbe hebt nur den aktuellen Schritt hervor.

Responsive

Mobiles Layout

Die Übersicht klappt zu einer Gesamtzeile über dem Formular zusammen; die Schaltfläche erstreckt sich über die volle Breite.

Interaktion

Interaktionsprüfungen

Einen Adressfehler auslösen, einen Promo-Code anwenden und zum Warenkorb zurückkehren.

Eignung

Wann Kiro zur Aufgabe passt – und wann nicht

Kiro passt, wenn

  • Spezifikation vor Code. Kiro entwirft vorab Anforderungen, ein Designdokument und eine Aufgabenliste, sodass Sie Layout und Umfang korrigieren können, bevor der Build festgelegt wird.
  • Steering-Dateien. Ihre Standards, Konventionen und Tokens fließen in jeden Lauf ein, sodass die Ausgabe zu einer Marke passt statt zu einem Standardlook.
  • Agent-Hooks. Automatisierungen werden durch Ereignisse wie Dateispeichern ausgelöst – ein Ort, um einen Verifizierungs- oder Review-Schritt durchzusetzen, ohne sich auf Erinnerung zu verlassen.
  • MCP und kostenlos zum Start. Kiro CLI verwaltet MCP-Server für externen Kontext, meldet sich über Builder ID, Google, GitHub oder Ihre Organisation an und ist in der Vorschau kostenlos zum Einstieg.

Wählen Sie einen anderen Workflow, wenn

  • Sie benötigen editierbare Vektordateien. Das Artefakt ist HTML, kein editierbares Designdokument. Wenden Sie sich für Ihr erforderliches Asset-Format an einen separaten Vektor-Workflow.
  • Sie haben keine Referenz und keine Vorgaben. Ohne Designsystem oder Beispiele driftet die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
  • Sie besitzen nicht die Anmeldedaten, die dieser Agent benötigt. Erforderlich: AWS Builder ID, Google, GitHub oder AWS IAM Identity Center (kein AWS-Konto erforderlich). OpenDesign stellt weder Anmeldedaten bereit noch fungiert es als Proxy dafür.
  • Ihr Team arbeitet in Cursor oder Antigravity. Diese Agenten haben eigene Seiten; der Arbeitsbereich bleibt identisch, aber die Einrichtung unterscheidet sich. Siehe verwandte Agenten.

Kompatibilität

Kiro-Voraussetzungen, bevor Sie starten

Dieser Leitfaden konzentriert sich auf Kiro, verbunden über die OpenDesign-Desktop-App. Veröffentlichte Referenzen geprüft am 6. September 2026.

WerkzeugumfangKiro, von Amazon

Kiro ist eine agentische KI von Amazon (AWS), verfügbar als IDE, CLI und Web-Oberfläche, entwickelt für spezifikationsgetriebene Entwicklung vom Prototyp bis zur Produktion. Sie befindet sich in der Vorschau. Diese Seite behandelt das Entwerfen von Oberflächen mit Kiro über OpenDesign, nicht Kiros eigene Oberfläche. Die Einrichtungsnotizen von OpenDesign listen die verfügbaren Agenten auf.

Konten und AuthentifizierungAWS Builder ID, Google, GitHub oder AWS IAM

Authentifizierungsoptionen: AWS Builder ID, Google, GitHub oder AWS IAM Identity Center (kein AWS-Konto erforderlich). Melden Sie sich mit Ihrer AWS Builder ID oder einer anderen Methode an – die Anmeldedaten verbleiben auf Ihrem Rechner. Diese Seite macht keine Zusagen zu Kontingenten oder Preisen.

System und VersionenDesktop-App oder Quellcode

Siehe die Downloadseite für Desktop-Builds. Node.js- und pnpm-Anforderungen im Quelltext-Quickstart gelten nur für die Ausführung aus dem Quelltext, nicht für die Installation eines Desktop-Pakets. Minimale kompatible Kiro-Version: hier nicht verifiziert.

VerbindungsprüfungDas Erfolgssignal

Befolgen Sie die Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Kiro sie bearbeitet hat und das Artefakt sich öffnet. Ein Download allein garantiert keine funktionierende Verbindung.

Mit der Desktop-App beginnen

Kiro-Setup in drei Schritten

Beginnen Sie mit dem Download, schließen Sie die Kiro-Einrichtung für Ihre installierte Version ab und überprüfen Sie dann ein kleines Ergebnis. Das Bauen von OpenDesign aus dem Quelltext ist für diesen Weg nicht erforderlich.

  1. 1

    Die OpenDesign-Desktop-App herunterladen

    Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.

    OpenDesign herunterladen
    MEILENSTEIN
    Die Desktop-App öffnet sich. Bereits installiert? Springen Sie zum nächsten Schritt; kein erneuter Download nötig.
  2. 2

    Bereiten Sie Ihre Kiro-Verbindung vor

    Befolgen Sie die Kiro-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrer AWS Builder ID oder einer anderen Anmeldung – die Anmeldedaten 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 whoami

    Aus den Kiro-Einrichtungsnotizen im veröffentlichten Leitfaden; siehe die Anbieterdokumentation für den aktuellen Befehl.

    MEILENSTEIN
    Bestätigen Sie den vorgesehenen Agenten und das Konto. Wenn nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen.
  3. 3

    Führen Sie eine kleine Kiro-Aufgabe aus

    Beginnen Sie mit einem kompakten Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.

    Start-Briefing

    Erstellen Sie einen Einstellungsbildschirm mit einem Profilformular und Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie bei Desktop- und Mobilbreiten.

    MEILENSTEIN
    Öffnen Sie das Ergebnis, testen Sie den Speicherzustand und fordern Sie eine konkrete Änderung an. Eine generierte Datei beginnt den Review-Prozess; sie schließt ihn nicht ab.

Informationen zum Ausführen von OpenDesign aus dem Quelltext finden Sie stattdessen im technischen Quickstart.

Der Kiro-Design-Workflow

Kiros fünfstufiger Design-Workflow

Eine Checkout-Aufgabe zeichnet den Weg von Ihrem Briefing bis zu einer verifizierten Datei nach. Jeder Schritt zeigt, was Sie liefern, was Kiro tut, was OpenDesign beiträgt und was Sie prüfen.

  1. 1

    Design-Briefing

    Halten Sie es einfach: drei bis sechs Zeilen, die Zielgruppe, Aufgabe des Bildschirms und Plattformen nennen.

    • SieSie schreiben das Briefing; fügen Sie einen Referenz-Screenshot bei, falls vorhanden.
    • KiroKiro liest das Briefing und die Anweisungsdatei des Projekts; es fragt nach, wenn etwas unklar ist.
    • OpenDesignOpenDesign stellt das Projekt, die Prompt-Oberfläche und den Skill für den Artefakttyp bereit.
    • PrüfenPrüfen Sie, ob das Briefing Abnahmekriterien nennt. Sie jetzt hinzuzufügen ist weniger kostspielig als nach der Generierung.
  2. 2

    Design-Vorgaben

    Ein Designsystem plus ein paar feste Regeln. Diese Kombination hält die Ausgabe markenkonform statt generisch.

    • SieWählen Sie ein Designsystem; nennen Sie Breakpoints und alle Komponenten, die verwendet werden müssen.
    • KiroBevor Kiro Code schreibt, lädt es die Tokens und Haltungsregeln aus DESIGN.md in den Kontext.
    • OpenDesignOpenDesign liefert die Designsystem-Bibliothek mit und bindet das gewählte in die Skill-Vorlage ein.
    • PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
  3. 3

    Die Oberfläche generieren

    Kiro erzeugt eine eigenständige HTML-Datei: Layout, Stile, Interaktionen und stabile Hooks.

    • SieWarten Sie oder beantworten Sie eine Klärungsfrage. Es ist keine Konfiguration nötig.
    • KiroKiro plant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt, was fehlschlägt.
    • OpenDesignOpenDesign speichert das Artefakt im Projektordner und indexiert es für die Vorschau.
    • PrüfenNoch nichts. Beurteilen Sie die Datei, nachdem sie gerendert wurde, nicht anhand ihres Quelltexts.
  4. 4

    Vorschau

    Die Datei wird in OpenDesign in den von Ihnen angeforderten Breiten gerendert. Hier findet Designurteil statt.

    • SieBreiten wechseln, Interaktionen durchklicken, Kommentare an Elementen hinterlassen.
    • KiroKiro liest deine Kommentare in der Vorschau und bereitet die nächste Überarbeitung vor.
    • OpenDesignOpenDesign rendert die Vorschau und stellt data-od-id-Ziele für Kommentare und Bearbeitungen bereit.
    • PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
  5. 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.
    • KiroKiro wendet die Änderungen direkt an und führt die Datei erneut aus.
    • OpenDesignOpenDesign hält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn du fertig bist.
    • PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.

Ressourcen

Kiro-Design-Ressourcen

Skills

Design Skills

Artefakttypen, die Kiro in OpenDesign erzeugen kann, eine Fähigkeit pro Typ.

Skills durchsuchen Design-Systeme

Design Systems

Marken-Tokens und Komponenten, die vor der Generierung durch Kiro gebunden werden müssen.

Systeme durchsuchen Vorlagen

Vorlagen

Startpunkte für Präsentationen, Landing Pages und Produktbildschirme.

Vorlagen durchsuchen

Einschränkungen

Kiro-Grenzen, manuelle Prüfungen und Fallbacks

  • UmfangKiro CLI bringt den Agenten in dein Terminal — interaktive Chat-Sitzung, benutzerdefinierte Agenten, Steuerungsdateien, Agenten-Hooks und Model Context Protocol-Server. Diese Seite behandelt Kiro als einen mit OpenDesign verbundenen Agenten, 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

Übernimmt Kiro CLI tatsächlich Designarbeit?
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 verleiht Kiro CLI seinen Design-Vorteil?
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.
Frontend-Design: Kiro CLI oder Claude Code?
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.
Was Kiro CLI genau ist
Kiro ist eine agentische KI von Amazon, die als IDE, Kommandozeilenschnittstelle und Weboberfläche ausgeliefert wird und dazu entwickelt wurde, Sie mit spezifikationsgetriebener Entwicklung vom Prototyp zur Produktion zu bringen. Die Kiro CLI bringt diesen Agenten in Ihr Terminal: Sie können eine interaktive Chat-Sitzung starten, Agenten erstellen und verwalten und Model Context Protocol-Server ausführen — alles über die Kommandozeile. Kiro ist in der Vorschau.

Für Designarbeit ist die entscheidende Eigenschaft der Workflow. Anstatt einen Prompt direkt in Code umzuwandeln, schreibt Kiro zuerst eine Spezifikation — Anforderungen, ein Designdokument und eine sequenzierte Aufgabenliste — und implementiert anhand dieser. Das macht den Plan des Agenten sichtbar und überprüfbar, bevor eine UI erstellt wird, was sich sauber darauf abbilden lässt, wie Designentscheidungen getroffen werden sollten: zuerst die Absicht, dann die Ausführung.

Spezifikationen: Kiro verwandelt einen Prompt in eine strukturierte Spezifikation — Anforderungen, ein Designdokument und diskrete Aufgaben —, bevor es Code schreibt, sodass der Plan von Anfang an überprüfbar ist.

Steering + Hooks: Steering-Dateien tragen Ihre Standards, Konventionen und bevorzugten Tools in jeden Durchlauf; Agent-Hooks werden bei Ereignissen wie dem Speichern einer Datei ausgelöst, um Hintergrundaufgaben automatisch auszuführen.

Kostenlos starten, MCP-fähig: Melden Sie sich mit einer Builder-ID, Google, GitHub oder Ihrer Organisation an und starten Sie kostenlos; Kiro CLI verwaltet auch MCP-Server, um externen Kontext einzubinden.

Anmeldedaten: AWS Builder ID, Google, GitHub oder AWS IAM Identity Center über kiro-cli login (kein AWS-Konto erforderlich)

Status: In Vorschau; verfügbar als IDE, CLI und Weboberfläche

Anbieter: Amazon (AWS)
Warum spezifikationsgetriebene Entwicklung zu Design passt
Der Designvorteil der Kiro CLI kommt aus seinem Workflow — aber wie bei jedem Agenten muss der Geschmack immer noch geliefert werden.

Absicht vor Pixeln: Weil Kiro zuerst eine Spezifikation und ein Designdokument schreibt, können Sie Layout, Hierarchie und Umfang in der Planungsphase korrigieren — bevor sich der Agent auf eine generische Implementierung festgelegt hat.

Steering trägt Ihre Marke: Steering-Dateien halten Ihre Tokens, Komponenten und Konventionen bei jedem Durchlauf vor dem Agenten, sodass die Ausgabe gegen eine Marke statt gegen ein Standardaussehen arbeitet.

Hooks erzwingen die Schleife: Agent-Hooks können bei Speichern automatisch Prüfungen ausführen — ein Ort, um einen Verifizierungs- oder Überprüfungsschritt einzubinden, anstatt sich darauf zu verlassen, dass der Agent sich daran erinnert.

Geschmack kommt von drei Eingaben, die Sie bereitstellen: einem Designsystem, einem Skill und echten Referenzbildern.

Die Lektion ist dieselbe, die jeder Agent lehrt: Kiro CLI hat nicht standardmäßig Geschmack. Eine Spezifikation hält einen Build ehrlich, aber sie produziert nur dann gutes Design, wenn Sie ihr Einschränkungen geben — ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Eingaben, weshalb die beiden zusammenpassen (mehr unten).
Kiro CLI für Design einrichten, von Null an
Die Einrichtungssequenz: installieren → authentifizieren → Steering und eine Design-Spezifikation hinzufügen → einen Skill hinzufügen → Browser-Verifikation aktivieren.

Kodifizieren Sie Ihre Designregeln: Legen Sie Ihre Tokens, Primitives und Konventionen in Steering-Dateien ab, damit der Agent sie bei jedem Lauf liest und die Ausgabe zu einer Marke passt, anstatt auf ein generisches Aussehen zurückzufallen.

Browser-Verifikation hinzufügen: Binden Sie einen Playwright- oder Browser-MCP-Server ein, damit Kiro in einem echten Browser rendert und seine Ausgabe über Breakpoints hinweg prüft, anstatt nur zu bestätigen, dass der Build durchläuft.

Verwenden Sie den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.

# 1. Kiro CLI installieren (siehe kiro.dev/docs/cli für den Befehl unter macOS/Linux/Windows) # 2. Authentifizieren — öffnet Ihren Browser, um die Anmeldung abzuschließen kiro-cli login # wählen Sie Builder ID, Google, GitHub oder Ihre Organisation # 3. Bestätigen Sie, dass Sie angemeldet sind kiro-cli whoami # 4. Starten Sie eine interaktive Sitzung in Ihrem Projekt cd your-project kiro-cli chat # 5. MCP-Server einbinden (optional, z. B. für Design-Übergabe) kiro-cli mcp add ...
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; überprüfen Sie die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Screenshot-zu-UI-Workflow mit Kiro
Der effektivste Design-Loop mit Kiro CLI besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt — lassen Sie zuerst die Spezifikation die Absicht festhalten und bauen Sie dann dagegen.

Beginnen Sie mit den klarsten visuellen Referenzen, die Sie haben — und beziehen Sie mehrere Zustände ein (Desktop und Mobil, Hover, Leer, Laden), nicht nur einen Hero-Shot.

Lassen Sie Kiro eine Spezifikation und ein Designdokument aus Ihrem Prompt schreiben, und prüfen Sie den Plan, bevor es baut — hier erkennen Sie Layout- und Umfangsprobleme frühzeitig.

Halten Sie Ihr Designsystem und Ihre Konventionen in Steering-Dateien fest, und sagen Sie Kiro, wo die Tokens und kanonischen Primitives liegen.

Starten Sie einen Dev-Server und lassen Sie Kiro in einem echten Browser rendern, wobei Sie die Größe auf Breakpoints anpassen, um das Ergebnis zu prüfen.

Iterieren Sie, indem Sie Kiro seine Implementierung mit den Referenzen vergleichen lassen — nicht nur bestätigen, dass es baut.

Öffnen Sie eine interaktive Sitzung und geben Sie konkrete Vorgaben von Anfang an, damit die Spezifikation, die es schreibt, Ihre tatsächliche Absicht widerspiegelt:

Halten Sie Aufgaben klein und fokussiert, committen Sie gute Iterationen und machen Sie schlechte rückgängig (sagen Sie Kiro, wenn Sie rückgängig machen), damit jeder Durchlauf auf einer sauberen Basis aufbaut.

kiro-cli chat # im Prompt: > Hier sind meine Referenzen: reference-desktop.png und reference-mobile.png. Schreiben Sie eine Spezifikation und implementieren Sie dann dieses Design in React + Vite + Tailwind + TypeScript. Verwenden Sie meine vorhandenen Designsystem-Komponenten und Tokens wieder (siehe meine Steering-Dateien). Passen Sie Abstände, Layout und Hierarchie an; machen Sie es responsive. Rendern Sie es im Browser und iterieren Sie, bis es an allen Breakpoints mit den Referenzen übereinstimmt.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; überprüfen Sie die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Specs, Steering, Hooks und MCP
Vier Erweiterungspunkte machen Kiro CLI für kontinuierliche Designarbeit praktikabel, und alle vier lassen sich sauber auf einen offenen Design-Workflow abbilden.

Specs: Anforderungen, ein Designdokument und eine sequenzierte Aufgabenliste — die dauerhafte Aufzeichnung dessen, was ein Feature sein soll, überprüfbar vor und während der Umsetzung.

Steering-Dateien: Kontext, Coding-Standards und bevorzugte Workflows oder Tools, die der Agent bei jedem Lauf liest, hinzufügen — der natürliche Ort für Ihre Design-Konventionen und Tokens.

Agent-Hooks: Automatisierungen, die bei Ereignissen wie dem Speichern einer Datei ausgelöst werden und Hintergrundaufgaben wie Checks oder Docs ausführen — ein Ort, um einen Verifizierungsschritt automatisch zu erzwingen.

MCP-Server: Kiro CLI verwaltet Model Context Protocol-Server, den portablen Weg, externen Designkontext und Tools einzubinden, die agentenübergreifend funktionieren, nicht nur mit Kiro.

Dies sind portable Multi-Agent-Fähigkeiten — genau die Art von Sache, für deren Orchestrierung OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.
Design-Vergleich: Kiro vs. Codex vs. Claude Code vs. Cursor vs. Gemini CLI
Es gibt keinen einzelnen Sieger für Designarbeit — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:

Kiro CLI — Spec-getriebener Workflow — Anforderungen, Designdokument und Aufgabenliste vor dem Code; Steering-Dateien und Hooks halten Builds markenkonform — Strukturierte, überprüfbare Builds, bei denen Absicht und Umfang vor der Implementierung festgeschrieben werden

Codex — Starke visuelle Politur mit einer Frontend-Skill; asynchrone Builds in der Sandbox — Delegierte asynchrone Builds und portable AGENTS.md-Regeln

Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebase-bewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext

Cursor — Visuelle Build-and-see-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Eng getaktete Iterate-and-watch-UI-Arbeit innerhalb einer IDE

Gemini CLI — Starkes multimodales Bildverständnis und ein sehr großer Kontext; Open Source mit einer kostenlosen Stufe — Screenshot-lastige Arbeit und ein komplettes Designsystem im Kontext halten

Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Ohne Skills, Referenzen und Constraints fallen alle auf eine generische Ästhetik zurück. Das ist das eigentliche zu lösende Problem — und es hat die Gestalt eines Design-Tools, nicht die eines Modells.

Agent — Design-Stärke — Am besten für
Häufige Fallstricke und wie man den „AI slop“-Look vermeidet
Die häufigste Beschwerde über KI-generiertes Design ist, dass es generisch wirkt – weiche Verläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, ein Inter-und-Lila-Vibe, der „schreit, dass eine KI das gemacht hat“. Weitere gemeldete Probleme sind kaputte mobile Layouts und Anweisungen, die in die UI-Texte durchsickern. Nichts davon ist einzigartig für Kiro CLI; es passiert, wenn ein Agent ohne kuratierten Designkontext läuft – eine Spezifikation hält einen Build auf Kurs, liefert aber keinen Geschmack.

Füge einen ästhetischen Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen statt auf den Standard-Look.

In einem echten Browser verifizieren: Über Breakpoints hinweg rendern und selbst prüfen – wenn möglich als Hook einbinden –, damit Layouts mobil nicht still kaputtgehen.

Tokens und Referenzen bereitstellen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.

Regeln in Steering-Dateien kodieren: Lege Regeln im Stil „keine Hero-Karten, maximal zwei Schriftarten, Marken-zuerst-Hierarchie“ dort ab, wo der Agent sie bei jedem Lauf liest.

Beachte, dass jede Abhilfe darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Kiro CLI in OpenDesign für Design verwenden
OpenDesign ist die Open-Source-Design-Schicht, nach der der obige Workflow immer wieder verlangt. Sie behandelt Kiro CLI als First-Party-Adapter und umhüllt es mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI – sodass der Designkontext, der Kiro gut macht, vom ersten Lauf an vorhanden ist und nicht jedes Mal von Hand zusammengesetzt werden muss. OpenDesign ist local-first, was die Kombination einfach hält: Deine Dateien und deine Anmeldung bleiben auf deinem Rechner.

Authentifiziere dich mit deiner AWS Builder ID oder einer anderen Anmeldung – Anmeldedaten bleiben auf deinem Rechner und werden niemals über uns geleitet.

Wähle ein Designsystem und einen Skill und generiere dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.

Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.

Derselbe Kiro CLI Agent, dieselbe Anmeldung – plus ein echter, portabler Open-Source-Design-Workflow darum herum. OpenDesign ist local-first und Apache-2.0, sodass nichts an deiner Arbeit oder deinen Anmeldedaten deinen Rechner verlässt.

Installiere OpenDesign und wähle Kiro CLI als deinen Agenten.
Steht OpenDesign mit Amazon oder AWS in Verbindung?
Nein. OpenDesign ist unabhängig; Kiro ist eine Marke von Amazon.