WEITERE LEKTÜRE
Weiterführende Lektüre zu Kilo
Tutorials, Dokumentation und Walkthroughs für das Design mit Kilo, wie im veröffentlichten Guide aufgeführt.
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.
Vom Briefing zum Interface01 / Kilo
SIE BRINGEN DIE IDEE EIN↗
„Eine Produktseite aus einem Screenshot,
mit dem Modell meiner Wahl.“
Drei Wege in diesen Kilo-Guide
Wählen Sie Ihren Einstieg mit Kilo
DIESER LEITFADEN · UI-DESIGN
Bauen Sie ein Produkt-Interface mit Kilo
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGKilo von Grund auf einrichten
Hier ist der vollständige Weg von einer leeren Maschine bis zu einem Kilo Code, der UI bauen und prüfen kann.
Zum Setup VERGLEICHVergleichen Sie Kilo mit anderen Agents
Wie sich Kilo von Codex, Claude Code, Cursor bei Design-Arbeit unterscheidet und wann sich ein anderer Workflow lohnt.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Kilo-Design-Aufgabe
Eine Kilo-Design-Aufgabe, vom Briefing bis zum Interface
Eine einzelne Aufgabe, von Anfang bis Ende gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das dabei entsteht, und die Prüfungen, die Sie danach noch durchführen. Das Interface unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Kilo-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalten Sie anhand des angehängten Screenshots eine Produktdetailseite für eine Outdoor-Marke: Galerie, Preis, Größen- und Farboptionen, In-den-Warenkorb-Button und ähnliche Produkte. Desktop und Smartphone.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenGalerie-Thumbnails, Optionsauswahl, In den Warenkorb, Scroll durch ähnliche Produkte
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Aufgabenteilung: Sie, Kilo und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Kilo
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.
3Kilo-Artefakt: Die Produktseite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Galerie und Info im 8px-Raster; die Info-Spalte überschreitet bei 1440 nie die Höhe der Galerie.
Hierarchie
Visuelle Hierarchie
Name, Preis, dann Optionen; der Akzent markiert ausschließlich die Schaltfläche „In den Warenkorb“.
Responsive
Mobiles Layout
Zuerst die Galerie, dann Name und Preis, Optionen, eine Schaltfläche in voller Breite; verwandte Produkte scrollen.
Interaktion
Interaktionsprüfungen
Ein Thumbnail wechseln, eine Größe wählen, in den Warenkorb legen, durch verwandte Artikel scrollen.
Eignung
Wann Kilo zur Aufgabe passt – und wann nicht
Kilo passt, wenn
- Modellunabhängiger Screenshot → UI. Nutzen Sie dafür das visionsfähige Modell, das ein Referenzbild am besten in responsives Markup umwandelt, und prüfen Sie das Ergebnis anschließend dagegen.
- BYOK über Anbieter hinweg. Bringen Sie Ihre eigenen Keys für Anthropic, OpenAI, Google, OpenRouter und mehr mit – oder nutzen Sie Kilos Gateway – sodass Kosten und Zugangsdaten bei Ihnen bleiben.
- Modes + Custom Rules + MCP. Planen Sie im Architect-Modus, bauen Sie im Code-Modus, tragen Sie Konventionen in Custom Rules und bringen Sie über den Figma-MCP-Server echten Design-Kontext ein.
- Open Source. Prüfen Sie jeden Prompt und jede Kontext-Payload; nichts ist verborgen, und der Agent läuft in Ihrer IDE oder CLI.
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 besitzen die Zugangsdaten nicht, die dieser Agent benötigt. Erforderlich: Ihr eigener Provider-API-Key (Bring your own key) oder Kilos Gateway. OpenDesign stellt keine Zugangsdaten bereit und leitet keine weiter.
- Ihr Team arbeitet mit OpenCode oder Aider. Diese Agents haben eigene Seiten; der Arbeitsbereich ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Kilo-Voraussetzungen, bevor Sie beginnen
Dieser Leitfaden behandelt Kilo, wie es über die OpenDesign-Desktop-App angebunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
WerkzeugumfangKilo, von Kilo Code, Inc.
Kilo Code ist ein Open-Source-KI-Coding-Agent von Kilo Code, Inc. Er läuft in VS Code, JetBrains-IDEs und im Terminal, liest Ihre Codebasis, bearbeitet Dateien und führt Befehle aus. Diese Seite behandelt das Design von Interfaces mit Kilo über OpenDesign, nicht Kilos eigene Oberfläche. OpenDesigns Einrichtungshinweise listen die verfügbaren Agenten auf.
Konten und AuthentifizierungIhr eigener Provider-API-Schlüssel (BYOK) oder Kilos
Ihr eigener Provider-API-Schlüssel (BYOK) oder Kilos Gateway. Authentifizieren Sie sich mit Ihrem eigenen Provider-Schlüssel (BYOK) oder Kilos Gateway — Zugangsdaten bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite für Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quellcode-Quickstart gelten für den Betrieb aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Kilo-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie anschließend eine kleine Aufgabe aus. Bestätigen Sie, dass Kilo sie ausgeführt hat und dass sich das Artefakt öffnet. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Kilo-Einrichtung in drei Schritten
Laden Sie zuerst herunter, schließen Sie die Kilo-Einrichtung für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesen Weg zu gehen.
- 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 Kilo-Verbindung vor
Folgen Sie den Kilo-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem eigenen Provider-Key (BYOK) oder über Kilos Gateway – Zugangsdaten bleiben 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 gatewayAus den Kilo-Setup-Hinweisen im veröffentlichten Guide; prüfen Sie die Hersteller-Dokumentation 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 Kilo-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 Kilo-Design-Workflow
Der Kilo-Design-Workflow in fünf Schritten
Die gleiche Produktseiten-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Kilo ü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.
- KiloLiest das Briefing und die Anweisungsdatei des Projekts; fragt nach, wenn etwas mehrdeutig 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.
- KiloLädt die DESIGN.md-Tokens und Haltungsregeln 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
Kilo schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- KiloPlant 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.
- KiloLiest Ihre Kommentare zur Vorschau und bereitet die nächste Revision 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.
- KiloWendet 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
Kilo-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Kilo in OpenDesign erzeugen kann, ein Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die Sie einbinden, bevor Kilo etwas generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Kilo-Einschränkungen, manuelle Prüfungen und Fallbacks
- UmfangEs ist modellunabhängig und BYOK-fähig über viele Provider hinweg, mit Architect-/Code-/Debug-/Ask-Modi und MCP-Unterstützung, sodass Sie das Modell wählen und die Kontrolle über Ihre Zugangsdaten behalten. Diese Seite behandelt Kilo als mit OpenDesign verbundenen Agent, nicht jede Kilo-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach der verwendeten Zugangsdaten (Ihr eigener Provider-API-Key oder Kilos Gateway). Diese Seite trifft keine Aussage zu kostenlosen Kontingenten.
- 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 Kilo und OpenDesign
Kann Kilo Code wirklich Designarbeit leisten?
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.
Muss ich bezahlen, um mit Kilo Code zu designen?
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 speziell für Design gut?
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 verbinde ich 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.
Starten Sie eine erste Design-Aufgabe mit Kilo
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.