102.7K+Download
Kilo OpenDesign

Mit Kilo
in OpenDesign
gestalten.

So gestalten Sie Interfaces mit Kilo Code in OpenDesign: das gewählte Modell, Ihre eigenen Regeln und Modi, eine Produktseiten-Aufgabe vom Screenshot bis zur geprüften Datei sowie die Grenzen, die Sie vorher kennen sollten.

OpenDesign herunterladen Zur Einrichtung

DREI WEGE IN DEN KILO-LEITFADEN

Legen Sie Ihren Startpunkt für Kilo fest

DIESER LEITFADEN · UI-DESIGN

Eine Produktoberfläche in Kilo vom Brief bis zu HTML führen

Diese Seite behandelt das Briefing, die Referenzen, die Designregeln und ein geprüftes HTML-Ergebnis.

Diese Anleitung lesen EINRICHTUNG

Kilo von Grund auf einrichten

Der vollständige Weg von einem sauberen Rechner bis zum Aufbauen und Verifizieren von UI durch Kilo Code.

Zum Setup VERGLEICH

Vergleichen Sie Kilo mit anderen Agents

Wo Kilo bei Designarbeit von Codex, Claude Code und Cursor abweicht und wann ein anderer Workflow die bessere Wahl ist.

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 Kilo-Design-Aufgabe

Eine Kilo-Designaufgabe: Vom Briefing bis zur Oberfläche

Die Aufgabe reicht vom Briefing und den Vorgaben, die Sie übergeben, über das Artefakt, das Kilo zurückgibt, bis zu den Prüfungen, die Sie weiterhin 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 Kilo-Lauf.

1Design-Briefing und Vorgaben

Briefing

Entwerfen Sie anhand des beigefügten Screenshots eine Produktdetailseite für eine Outdoor-Marke: Galerie, Preis, Größen- und Farbauswahl, In den Warenkorb, verwandte Produkte. Desktop und Smartphone.

  • Design-SystemAlbert Sans und ein grüner Akzent auf der Papier-Canvas von OpenDesign
  • Breakpoints1440px Desktop und 390px Mobil, ohne horizontales Scrollen
  • InteraktionenGalerie-Miniaturansichten, Optionsauswahl, In-den-Warenkorb, Scrollen verwandter Produkte
  • AusgabeEine einzelne eigenständige HTML-Datei mit stabilen data-od-id-Hooks

2Wer macht was: Sie, Kilo, OpenDesign

  • Sie

    Sie schreiben das Briefing, wählen das Designsystem und legen die Abnahmekriterien fest.

  • Kilo

    Kilo plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet dann auf Anfrage.

  • OpenDesign

    OpenDesign stellt das Designsystem und den Skill bereit, rendert die Vorschau und bewahrt jede Version als Projektdatei auf.

  • Prüfung

    Vor der Übergabe prüfen Sie die visuelle Hierarchie, den Abstand im 8px-Raster, beide Breakpoints und jede Interaktion.

3Kilos Artefakt: Produktseite bei 1440px und 390px

Kilos Artefakt: Produktseite bei 1440px und 390px — Desktop
Illustratives Beispiel

4Überprüfung vor der Übergabe

Layout

Raster und Abstände

Galerie und Infos richten sich am 8px-Raster aus; bei 1440 bleibt die Info-Spalte innerhalb der Galeriehöhe.

Hierarchie

Visuelle Hierarchie

Name und Preis kommen zuerst, dann die Optionen; der Akzent ist der In-den-Warenkorb-Schaltfläche vorbehalten.

Responsive

Mobiles Layout

Mobile Reihenfolge: Galerie, Name und Preis, Optionen, eine Schaltfläche über die volle Breite; verwandte Produkte scrollen.

Interaktion

Interaktionsprüfungen

Zu testende Interaktionen: Miniaturansicht wechseln, Größe wählen, in den Warenkorb legen, verwandte Artikel scrollen.

Eignung

Wo Kilo passt – und wo nicht

Kilo passt, wenn

  • Modellwahl für Screenshot → UI. Richten Sie Kilo auf das vision-fähige Modell aus, das ein Referenzbild am besten in responsives Markup umwandelt, und vergleichen Sie das Ergebnis dann mit diesem Bild.
  • BYOK über Anbieter hinweg. Verwenden Sie Ihre eigenen Schlüssel für Anthropic, OpenAI, Google, OpenRouter und andere oder Kilos Gateway, sodass Kosten und Anmeldedaten in Ihrer Hand bleiben.
  • Modi, benutzerdefinierte Regeln, MCP. Architect-Modus zum Planen, Code-Modus zum Erstellen, benutzerdefinierte Regeln für Konventionen und der Figma-MCP-Server für echten Designkontext.
  • Open Source. Prompts und Kontext-Payloads sind einsehbar, nichts ist verborgen, und Kilo läuft in Ihrer IDE oder CLI.

Wählen Sie einen anderen Workflow, wenn

  • Sie benötigen editierbare Vektordateien. Zurück kommt HTML, kein editierbares Designdokument. Wenden Sie sich für das benötigte Asset-Format an einen separaten Vektor-Workflow.
  • Es gibt keine Referenz und keine Vorgabe. Ohne Designsystem oder Beispiele driftet die Ausgabe ins Generische; schreiben Sie zuerst das Briefing.
  • Die erforderliche Anmeldedatei fehlt. Kilo benötigt entweder Ihren eigenen Anbieter-API-Schlüssel (BYOK) oder Kilos Gateway. OpenDesign stellt keine Anmeldedaten bereit und fungiert nicht als Proxy dafür.
  • Ihr Team arbeitet in OpenCode oder Aider. Diese Agenten haben eigene Seiten; der Workspace bleibt bestehen, während sich das Setup unterscheidet. Siehe verwandte Agenten.

Kompatibilität

Kilo-Voraussetzungen, bevor Sie beginnen

Diese Seite behandelt Kilo in Verbindung über die OpenDesign-Desktop-App. Referenzen wurden am 6. September 2026 geprüft.

WerkzeugumfangKilo, von Kilo Code, Inc.

Kilo Code von Kilo Code, Inc. ist ein Open-Source-KI-Coding-Agent. Er funktioniert in VS Code, JetBrains-IDEs und im Terminal: Er liest Ihre Codebasis, bearbeitet Dateien und führt Befehle aus. Thema hier ist das Entwerfen von Oberflächen mit Kilo über OpenDesign, nicht Kilos eigene Oberfläche. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agenten auf.

Konten und AuthentifizierungEin von Ihnen bereitgestellter Anbieter-API-Schlüssel (BYOK) oder Kilos

Ihr eigener Anbieter-API-Schlüssel (BYOK) oder Kilos Gateway. Authentifizieren Sie sich mit Ihrem eigenen Anbieterschlüssel (BYOK) oder Kilos Gateway; die Anmeldedaten verbleiben auf Ihrem Rechner. Hier wird kein Kontingent und kein Preis zugesagt.

System und VersionenDesktop-App oder Quellcode

Desktop-Builds befinden sich auf der Downloadseite. Die Node.js- und pnpm-Anforderungen im Quellcode-Schnellstart gelten beim Ausführen aus dem Quellcode, nicht bei der Installation eines Desktop-Pakets. Minimale kompatible Kilo-Version: auf dieser Seite nicht verifiziert.

VerbindungsprüfungDas Erfolgssignal

Verwenden Sie die Verbindungsanweisungen, die Ihre installierte Version anzeigt, und versuchen Sie dann eine kleine Aufgabe. Prüfen Sie, ob Kilo sie abgeschlossen hat und das Artefakt sich öffnet. Ein Download allein beweist keine funktionierende Verbindung.

Mit der Desktop-App beginnen

Kilo-Einrichtung in drei Schritten

Beginnen Sie mit dem Download, schließen Sie das Kilo-Setup für Ihre installierte Version ab und testen Sie dann ein kleines Ergebnis. Diesen Weg zu verfolgen erfordert nicht, OpenDesign aus dem Quellcode zu bauen.

  1. 1

    Die OpenDesign-Desktop-App herunterladen

    Wählen Sie das Paket für Ihren Rechner, installieren Sie es und starten Sie die App.

    OpenDesign herunterladen
    MEILENSTEIN
    Die Desktop-App öffnet sich. Wenn Sie sie bereits haben, fahren Sie mit dem nächsten Schritt fort; ein zweiter Download ist nicht nötig.
  2. 2

    Bereiten Sie Ihre Kilo-Verbindung vor

    Verwenden Sie die Kilo-Anweisungen, die zu Ihrer installierten Version passen. Melden Sie sich mit Ihrem eigenen Anbieterschlüssel (BYOK) oder Kilos Gateway an; die Anmeldedaten bleiben lokal auf Ihrem Rechner.

    Kilo Code-Dokumentation 
    # 1. Install the Kilo Code extension from the VS Code
#    (or JetBrains) marketplace, or install the CLI.

# 2. Open your project and sign in / add a provider key
cd your-project
kilo              # connect your provider (BYOK) or Kilo's gateway

    Entnommen aus den Kilo-Setup-Hinweisen im veröffentlichten Leitfaden; den aktuellen Befehl finden Sie in der Herstellerdokumentation.

    MEILENSTEIN
    Stellen Sie sicher, dass es sich um den beabsichtigten Agenten und das beabsichtigte Konto handelt. Wenn nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen.
  3. 3

    Führen Sie eine kleine Kilo-Aufgabe aus

    Beginnen Sie mit einem Briefing, das klein genug ist, um den gesamten Ablauf einschließlich einer Überarbeitung zu beurteilen.

    Start-Briefing

    Baue einen Einstellungsbildschirm mit einem Profilformular und Speicherbestätigung. Befolge meine Designregeln. Prüfe ihn bei Desktop- und Mobilbreiten.

    MEILENSTEIN
    Öffnen Sie das Ergebnis, testen Sie den Speicherzustand und bitten Sie dann um eine bestimmte Änderung. Die generierte Datei beginnt die Überprüfung; sie beendet sie nicht.

Um OpenDesign stattdessen aus dem Quellcode auszuführen, siehe den technischen Schnellstart.

Der Kilo-Design-Workflow

Fünf Schritte durch eine Kilo-Designaufgabe

Eine Produktseite, verfolgt vom Eröffnungs-Briefing bis zu einer Datei, die Sie tatsächlich verifiziert haben. Jeder Schritt benennt Ihren Input, was Kilo tut, was OpenDesign beiträgt und die Prüfung, die ihn abschließt.

  1. 1

    Design-Briefing

    Halten Sie es einfach und kurz – drei bis sechs Zeilen. Sagen Sie, für wen der Bildschirm ist, was er tun muss und welche Plattformen wichtig sind.

    • SieSie schreiben das Briefing und fügen einen Referenz-Screenshot bei, wenn einer vorhanden ist.
    • KiloLiest Ihr Briefing und die Anweisungsdatei des Projekts und fragt nach, statt zu raten, wenn ein Detail unklar ist.
    • OpenDesignStellt das Projekt, die Prompt-Oberfläche und den zum Artefakttyp passenden Skill bereit.
    • PrüfenPrüfen Sie, dass das Briefing die Abnahmekriterien ausdrücklich nennt. Sie jetzt zu schreiben kostet weniger, als die Datei später zu korrigieren.
  2. 2

    Design-Vorgaben

    Ein Designsystem plus eine Handvoll fester Regeln – der Unterschied zwischen einer Ausgabe, die Ihre Marke trägt, und einer Ausgabe, die zu jedem gehören könnte.

    • SieWählen Sie ein Designsystem und benennen Sie dann Ihre Breakpoints sowie alle Komponenten, die erscheinen müssen.
    • KiloLädt die DESIGN.md-Tokens und Haltungsregeln in den Kontext, bevor jegliches Markup geschrieben wird.
    • OpenDesignLiefert die Designsystem-Bibliothek mit und bindet Ihr gewähltes System in die Skill-Vorlage ein.
    • PrüfenVerifizieren Sie, dass die Tokens zu Ihrer Marke passen: ein Akzent, korrekte Schriften, korrekter Radius.
  3. 3

    Die Oberfläche generieren

    Kilo schreibt eine eigenständige HTML-Datei – Layout, Stile, Interaktionen, stabile Hooks.

    • SieIhre Aufgabe ist hier zu warten oder eine klärende Frage zu beantworten. Es gibt nichts zu konfigurieren.
    • KiloPlant die Abschnitte, schreibt das HTML, CSS und JavaScript, führt die Datei aus, repariert, was fehlschlägt.
    • OpenDesignSpeichert das Artefakt im Projektordner und indiziert es, damit es in der Vorschau angezeigt werden kann.
    • PrüfenNoch nichts – beurteile es gerendert, nicht durch Lesen des Quellcodes.
  4. 4

    Vorschau

    OpenDesign rendert die Datei in den von dir angegebenen Breiten. Die Beurteilung findet hier statt, in der Vorschau.

    • SieÄndere Breiten, teste die Interaktionen und kommentiere bestimmte Elemente.
    • KiloLiest die Kommentare, die du in der Vorschau hinterlassen hast, und bereitet die nächste Überarbeitung vor.
    • OpenDesignRendert die Vorschau und stellt data-od-id-Ziele bereit, damit Kommentare und Bearbeitungen daran ansetzen können.
    • PrüfenPrüfe Hierarchie, Kontrast, Überlauf bei 390px und Fokuszustände und frage, ob der Akzent sparsam bleibt.
  5. 5

    Überarbeiten und Verifizieren

    Fordere Änderungen an, indem du auf Elemente in der Vorschau zeigst. Jede Überarbeitung kommt als neue Datei; nichts wird stillschweigend überschrieben.

    • SieVerwandelt Kommentare in Anforderungen und entscheidet, wann die Aufgabe abgeschlossen ist.
    • KiloWendet Änderungen direkt an und führt die Datei erneut aus.
    • OpenDesignHält Versionen nebeneinander und exportiert am Ende ein Bild oder das HTML.
    • PrüfenPrüfe nur den geänderten Bereich erneut und dann die gesamte Seite einmal pro Breakpoint.

Ressourcen

Kilo-Design-Ressourcen

Skills

Design Skills

Die Artefakttypen, die Kilo innerhalb von OpenDesign erzeugen kann — ein Skill pro Typ.

Skills durchsuchen Design-Systeme

Design Systems

Marken-Tokens und Komponenten, die gebunden werden müssen, bevor Kilo etwas generiert.

Systeme durchsuchen Vorlagen

Vorlagen

Ausgangspunkte für Decks, Landing Pages und Produkt-Screens.

Vorlagen durchsuchen

Einschränkungen

Wo Kilo aufhört: Grenzen, manuelle Prüfungen, Fallbacks

  • UmfangKilo ist modellagnostisch und BYOK über viele Anbieter hinweg, mit Architect/Code/Debug/Ask-Modi und MCP-Unterstützung, sodass die Modellwahl und die Zugangsdaten bei dir bleiben. Diese Seite behandelt Kilo als in OpenDesign eingebundenen Agenten, nicht jede Kilo-Funktion.
  • NutzungslimitsKosten- und Nutzungsgrenzen richten sich nach der Authentifizierung, die du verwendest — dein eigener Anbieter-API-Schlüssel oder das Gateway von Kilo. Ein kostenloses Kontingent wird hier nicht zugesagt.
  • NetzwerkDateien in deinem Projekt machen die Inferenz nicht offline. Bevor du sensible Eingaben teilst, prüfe die Anbieter-Einstellungen und Datenrichtlinien des Agenten.
  • Ausgabe ist HTMLDas Artefakt ist eine HTML-Datei; es ist keine Vektor-Designdatei.
  • Manuelle ÜberprüfungDu prüfst Barrierefreiheit, echte Inhalte, Markenpassung und die Korrektheit der Interaktionen in der Vorschau. Jede Selbstprüfung des Agenten ist ein erster Durchgang, keine Freigabe.
  • FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, lies die Verbindungsanweisungen und die Authentifizierung für deine installierte Version. Bevor du die Konfiguration änderst, bewahre den Fehler und das letzte funktionierende Artefakt auf.

FAQ

Häufige Fragen zu Kilo und OpenDesign

Leistet Kilo Code tatsächlich Designarbeit?
Ja – mit einem Aesthetic-Skill, einem Design-System und echten Referenzbildern im Kontext erzeugt Kilo Code produktionsreife, responsive UI, und ein vision-fähiges Modell überprüft die Ausgabe anhand der Referenzen. Ohne diesen Kontext tendiert es zu einem generischen Look – genau diese Lücke schließt OpenDesign.
Entstehen Kosten beim Designen mit Kilo Code?
Kilo Code ist Open Source und kostenlos zu installieren. Sie bringen Ihren eigenen Provider-API-Key mit (BYOK) und bezahlen diesen Provider direkt, oder nutzen Kilos eigenes Gateway zu Provider-Kosten. OpenDesign leitet Ihre Zugangsdaten in keinem Fall über einen Proxy weiter.
Was macht Kilo Code für Design geeignet?
Es ist modellagnostisch und Open Source, sodass Sie es mit dem vision-fähigen Modell steuern können, das Referenz-Screenshots am besten liest, genau prüfen können, welcher Kontext gesendet wird, und Kosten sowie Zugangsdaten unter Ihrer Kontrolle behalten. Der gestalterische Anspruch kommt weiterhin aus dem Design-System, dem Skill und den Referenzen, die Sie bereitstellen.
Kilo Code oder Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für präzise, codebasis-bewusste Design-Entscheidungen; Kilo Codes Vorteil ist, Open Source und modellagnostisch mit BYOK zu sein, sodass Sie das Modell wählen. Viele Teams nutzen beide – OpenDesign ermöglicht den Wechsel des Agents, ohne den Design-Workflow zu ändern.
Wie verbindet sich Kilo Code mit Figma?
Fügen Sie einen Figma-MCP-Server über Kilos MCP-Marktplatz oder die MCP-Einstellungen hinzu. Kilo kann dann echten Design-Kontext abrufen – Komponenten, Variablen, Layout-Daten –, sodass der generierte Code der Quelle entspricht, statt sie nur anzunähern.
Was Kilo Code ist
Kilo Code ist ein quelloffener KI-Coding-Agent, entwickelt von Kilo Code, Inc. Er läuft als VS-Code-Erweiterung, in JetBrains-IDEs und als Kommandozeilenschnittstelle — er liest dein Repository, bearbeitet Dateien, führt Befehle aus und plant und verifiziert Arbeit anhand natürlichsprachlicher Aufgaben, statt nur Zeilen zu vervollständigen. Sein prägendes Merkmal ist die Modellunabhängigkeit: Du wählst, welches Modell ihn antreibt, und bringst deine eigenen Provider-Schlüssel mit.

Für Designarbeit stechen zwei Eigenschaften hervor. Weil er modellunabhängig ist, kannst du ihn auf jedes starke vision-fähige Modell richten, das einen Referenz-Screenshot am besten liest und über Layout schlussfolgert. Und weil er quelloffen ist und auf BYOK setzt, kannst du genau nachsehen, welcher Kontext gesendet wird, und behältst Anmeldedaten und Kosten unter eigener Kontrolle.

Agenten-Modi: Kilo liefert spezialisierte Modi mit — Architect für die Planung, Code für die Umsetzung, Debug für die Fehlerbehebung und Ask für Fragen — plus eigene Modi, sodass du ein Design planen und es anschließend in getrennten, fokussierten Durchgängen umsetzen kannst.

Eigene Regeln + MCP: Er liest projektspezifische eigene Regeln für persistenten Kontext und unterstützt MCP-Server (mit einem MCP-Marktplatz), sodass du externen Kontext wie eine live Figma-Datei oder Design-Tooling hinzufügen kannst.

Eigene Schlüssel mitbringen: Kilo ist BYOK über viele Anbieter hinweg — Anthropic, OpenAI, Google, OpenRouter und mehr —, oder du nutzt Kilos eigenes Gateway, das über 500 Modelle zu Anbieterkosten bereitstellt.

Anmeldedaten: dein eigener Provider-API-Schlüssel (BYOK — Anthropic, OpenAI, Google, OpenRouter und mehr) oder Kilos eigenes Gateway

Anbieter: Kilo Code, Inc. (Open Source)

Lizenz: Open Source
Warum ein offener, modellagnostischer Agent für Design geeignet ist
Kilo Codes Design-Vorsprung entsteht aus Offenheit und Modellwahl — doch wie bei jedem Agenten muss der Geschmack weiterhin von außen kommen.

Von Grund auf modellunabhängig: Weil du das Modell wählst, kannst du Kilo mit dem vision-fähigen Modell antreiben, das Referenz-Screenshots am besten liest — und wechseln, wenn ein besseres erscheint, ohne deinen Workflow zu ändern.

Offen und überprüfbar: Kilo ist quelloffen, du siehst also genau, welcher Kontext und welche Prompts gesendet werden — nützlich, wenn der Agent deine echten Design-Primitives wiederverwenden und nicht Einmal-Stile erfinden soll.

Konventionen in eigenen Regeln: Projektspezifische eigene Regeln (plus ein MCP-Server für Figma) richten den Agenten auf deine Tokens, Komponenten und echten Spezifikationen aus, sodass er gegen eine Marke arbeitet statt gegen ein Standardaussehen.

Geschmack kommt aus drei Inputs, die du lieferst: ein Designsystem, ein Skill und echte Referenzbilder.

Die Lektion ist dieselbe, die jeder Agent lehrt: Kilo Code hat nicht von sich aus Geschmack. Er liefert gutes Design, wenn du ihm Vorgaben machst — ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr unten).
Kilo Code für Design von null an einrichten
Die Einrichtungsreihenfolge: installieren → Anbieter verbinden → eigene Regeln hinzufügen → Skill hinzufügen → Browser-Verifikation aktivieren.

Kodiere deine Designregeln: Lege deine Tokens, Primitives und Konventionen in Kilos eigenen Regeln ab und richte den Agenten darauf aus, damit die Ausgabe zu einer Marke passt statt auf ein generisches Aussehen zurückzufallen.

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

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

# 1. Installiere die Kilo-Code-Erweiterung aus dem VS Code # (oder JetBrains) Marketplace oder installiere die CLI. # 2. Öffne dein Projekt und melde dich an / füge einen Provider-Schlüssel hinzu cd your-project kilo # verbinde deinen Provider (BYOK) oder Kilos Gateway # 3. Projektkontext hinzufügen # erstelle eigene Regeln für die Designkonventionen dieses Projekts # 4. Verbinde den Figma-MCP-Server (optional, für Design-Übergabe) # füge ihn aus dem MCP-Marktplatz / den MCP-Einstellungen hinzu
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; überprüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Der Screenshot-zu-UI-Loop
Die wirkungsvollste Designschleife mit Kilo Code besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt — dabei stützt man sich auf ein vision-fähiges Modell, das die Ausgabe mit der Referenz abgleicht.

Beginne mit den klarsten visuellen Referenzen, die du hast — und schließe mehrere Zustände ein (Desktop und Mobil, Hover, Leer, Laden), nicht nur einen Hero-Shot.

Sei konkret im Prompt; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.

Halte dein Designsystem und deine Konventionen in Kilos eigenen Regeln und sag dem Agenten, wo die Tokens und kanonischen Primitives liegen.

Starte einen Dev-Server und lass Kilo in einem echten Browser rendern, wobei er auf Breakpoints umstellt, um das Ergebnis zu prüfen.

Iteriere, indem Kilo seine Implementierung mit den Screenshots abgleicht — nicht bloß bestätigt, dass sie baut.

Nutze den Architect-Modus, um die Umsetzung zu planen, wechsle dann in den Code-Modus und hänge deine Referenzen mit konkreten Vorgaben an:

Halte Prompts klein und fokussiert, committe gute Iterationen und mach schlechte rückgängig (sag Kilo, wenn du etwas zurücksetzt), damit jeder Durchgang auf einer sauberen Basis aufbaut.

# Plane im Architect-Modus, baue dann im Code-Modus: > Implementiere dieses Design aus @reference-desktop.png und @reference-mobile.png in React + Vite + Tailwind + TypeScript. Verwende meine vorhandenen Designsystem-Komponenten und -Tokens aus den eigenen Regeln wieder. Triff Abstände, Layout und Hierarchie; mach es responsive. Rendere es im Browser und iteriere, bis es den Referenzen über alle Breakpoints hinweg entspricht.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; überprüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Modi, eigene Regeln und MCP
Drei Erweiterungspunkte machen Kilo Code für dauerhafte Designarbeit praktikabel, und alle drei passen sauber auf einen offenen Design-Workflow.

Modi (Architect → Code): Plane die Struktur eines Screens im Architect-Modus, setze sie dann im Code-Modus um und behebe Probleme im Debug-Modus — das trennt Designabsicht von Implementierung. Eigene Modi lassen dich einen eigenen Design-Review-Durchgang kodieren.

Eigene Regeln: Projektspezifische eigene Regeln sind das dauerhafte Zuhause für deine Designkonventionen — Tokens, Primitives und Review-Checklisten — und werden bei jedem Lauf gelesen, damit der Agent gegen deine Marke arbeitet.

MCP-Server: Kilo unterstützt MCP-Server über seinen Marktplatz — der portable Weg, Designkontext und externe Tools einzubringen, am relevantesten ein Figma-MCP-Server, die agentenübergreifend funktionieren, nicht nur bei Kilo.

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

Kilo Code — Quelloffen und modellunabhängig mit BYOK über viele Anbieter; Architect-/Code-Modi und MCP — Das eigene Modell pro Aufgabe wählen und Kosten und Anmeldedaten unter eigener Kontrolle halten

Codex — Starker visueller Feinschliff mit einem 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 — Engmaschige Iterate-and-watch-UI-Arbeit innerhalb einer IDE

Gemini CLI — Starkes multimodales Bildverständnis und ein Kontext von 1 Mio. Tokens — Arbeit mit vielen Screenshots und ein komplettes Designsystem im Kontext halten

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

Agent — Designstärke — Am besten für
Fallstricke und wie man dem „AI slop“-Look entkommt
Die häufigste Beschwerde über KI-generiertes Design ist, dass es generisch aussieht — weiche Verläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, eine Inter-und-Lila-Stimmung, die förmlich schreit: „Das hat eine KI gemacht.“ Weitere berichtete Probleme sind kaputte mobile Layouts und Anweisungen, die in die UI-Texte durchsickern. Nichts davon ist Kilo Code eigen; es passiert, wenn ein Agent ohne kuratierten Designkontext läuft.

Einen ästhetischen Skill hinzufügen: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen statt auf das Standardaussehen.

In einem echten Browser verifizieren: Nutze ein vision-fähiges Modell, um über Breakpoints hinweg zu rendern und selbst zu prüfen, damit Layouts auf Mobil nicht still kaputtgehen.

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

Regeln in eigenen Regeln kodieren: Lege Regeln wie „keine Hero-Cards, maximal zwei Schriften, markenfirste Hierarchie“ dort ab, wo der Agent sie bei jedem Lauf liest.

Beachte, dass jede Gegenmaßnahme 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.
Designen mit Kilo Code in OpenDesign
OpenDesign ist die quelloffene Designschicht, nach der der obige Workflow ständig verlangt. Es behandelt Kilo Code als First-Party-Adapter und umhüllt ihn mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Rendering-Pipeline und einer lokalen Desktop-UI — sodass der Designkontext, der Kilo gut macht, ab dem ersten Lauf vorhanden ist und nicht jedes Mal von Hand zusammengesetzt wird. Beide sind quelloffen und local-first, was die Paarung zu einem natürlichen Fit macht.

Authentifiziere dich mit deinem eigenen Provider-Schlüssel (BYOK) oder Kilos Gateway — die 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 Kilo-Code-Agent, dieselben Schlüssel — plus ein echter, portabler, quelloffener Design-Workflow drumherum. Er ist local-first und quelloffen, sodass nichts an deiner Arbeit oder deinen Anmeldedaten deinen Rechner verlässt.

Installiere OpenDesign und wähle Kilo Code als deinen Agenten.
Ist OpenDesign mit Kilo Code verbunden?
Nein. OpenDesign ist ein unabhängiges Projekt; beide sind quelloffen, aber sie sind getrennt.