WEITERE LEKTÜRE
Weiterführende Informationen zu Kimi
Tutorials, Dokumentation und Anleitungen zum Design mit Kimi, wie im veröffentlichten Guide aufgeführt.
Kimi 
OpenDesign Mit Kimi
in OpenDesign
gestalten.
So gestalten Sie Interfaces mit Kimi CLI in OpenDesign: ein Referenz-Screenshot als Input, AGENTS.md als Regelwerk, eine Aufgabe zu Benachrichtigungseinstellungen vom Briefing bis zur geprüften Datei – und die Grenzen, die Sie vorher kennen sollten.
Vom Briefing zur Oberfläche01 / Kimi
SIE BRINGEN DIE IDEE EIN↗
„Benachrichtigungseinstellungen, die man
in einer Minute abschließen kann.“
DREI EINSTIEGE IN DIESEN KIMI-GUIDE
Wählen Sie Ihren Einstieg mit Kimi
DIESER LEITFADEN · UI-DESIGN
Ein Produkt-Interface mit Kimi erstellen
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGKimi von Grund auf einrichten
Hier finden Sie den vollständigen Weg von einer leeren Maschine bis zu einer Kimi CLI, die UI erstellen und prüfen kann.
Zum Setup VERGLEICHKimi mit anderen Agents vergleichen
Wie sich Kimi bei Design-Arbeit von Codex, Claude Code, Cursor unterscheidet, und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Kimi-Design-Aufgabe
Eine Kimi-Design-Aufgabe, vom Briefing zum Interface
Eine einzelne Aufgabe, end-to-end 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. Das Interface unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Kimi-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalten Sie Benachrichtigungseinstellungen für eine Collaboration-App: Kanäle (E-Mail, Push, In-App), Ruhezeiten und projektbezogene Ausnahmen. Orientieren Sie sich beim Ton, nicht beim Layout, an der beigefügten Referenz. Desktop und Smartphone.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenToggles, Zeitwähler für Ruhezeiten, projektbezogenes Aufklappen
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Arbeitsteilung: Sie, Kimi und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Kimi
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.
3Kimi-Artefakt: Der Notification Settings Screen bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Abschnitte, Zeilen und die Speichern-Aktion liegen auf dem 8px-Raster; Zeitwähler richten sich an den Toggles aus.
Hierarchie
Visuelle Hierarchie
Kanalnamen haben Vorrang vor Hilfetexten; der Akzent markiert ausschließlich aktivierte Toggles.
Responsive
Mobiles Layout
Abschnitte werden zu einem segmentierten Switch; jede Zeile behält einen einzelnen Toggle rechts.
Interaktion
Interaktionsprüfungen
Einen Kanal umschalten, Ruhezeiten festlegen, eine Projekt-Ausnahme aufklappen.
Eignung
Wann Kimi zur Aufgabe passt – und wann nicht
Kimi passt, wenn
- Agentische Referenz → UI. Langfristig angelegtes Coding mit Kimi K2 wandelt Referenzen in responsives Markup um und prüft das Ergebnis in einem echten Browser gegen sie.
- 256k-Token-Kontext. Ein komplettes Designsystem, eine Komponentenbibliothek und ein Referenzset passen gleichzeitig hinein, sodass die Ausgabe Ihre echten Primitives wiederverwendet.
- AGENTS.md + MCP. Kontextdateien tragen Ihre Konventionen; der Figma-MCP-Server bringt echten Design-Kontext in den Code.
- Offen und BYOK. Apache-2.0 mit OAuth-Login oder eigenem Moonshot-API-Key, plus OpenAI- und Anthropic-kompatiblen Endpunkten.
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 haben nicht die Zugangsdaten, die dieser Agent benötigt. Erforderlich: Moonshot-API-Key (eigenen Key mitbringen). OpenDesign stellt keine Zugangsdaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet mit Qwen oder DeepSeek. Diese Agents haben eigene Seiten; der Workspace ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Kimi-Voraussetzungen, bevor Sie beginnen
Dieser Leitfaden behandelt Kimi, wie es über die OpenDesign-Desktop-App verbunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangKimi, von Moonshot
Kimi CLI ist Moonshot AIs Open-Source-(Apache-2.0-)Terminal-KI-Agent, angetrieben von der Kimi-K2-Modellreihe. Er liest Ihre Codebasis, bearbeitet Dateien, führt Befehle aus, durchsucht Dateien und ruft Webinhalte ab. Diese Seite behandelt das Gestalten von Interfaces mit Kimi über OpenDesign, nicht Kimis eigene Oberfläche. OpenDesigns Setup-Hinweise listen die verfügbaren Agents auf.
Konten und AuthentifizierungMoonshot-API-Key (BYOK)
Moonshot-API-Key (BYOK). Authentifizieren Sie sich mit Ihrem Moonshot-API-Key (BYOK) — 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 auf Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Source-Quickstart gelten für das Ausführen aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Kimi-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 Kimi sie bearbeitet hat und dass sich das Artifact öffnen lässt. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Kimi-Setup in drei Schritten
Laden Sie zunächst herunter, schließen Sie das Kimi-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 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 Kimi-Verbindung vor
Folgen Sie den Kimi-Anweisungen Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem Moonshot-API-Key (BYOK) — Zugangsdaten bleiben auf Ihrem Rechner.
Kimi CLI Dokumentation — Erste Schritte# 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended) curl -LsSf https://code.kimi.com/install.sh | bash # or, if you already have uv: uv tool install --python 3.13 kimi-cli # 2. Start it in your project and authenticate on first run cd your-project kimi # then run /login: OAuth via Kimi Code, or paste a Moonshot API keyAus den Kimi-Setup-Hinweisen im veröffentlichten Leitfaden; prüfen Sie die Hersteller-Dokumentation auf 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 Kimi-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 Kimi-Design-Workflow
Der Kimi-Design-Workflow in fünf Schritten
Die gleiche Notification-Settings-Screen-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Kimi macht, 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.
- KimiLiest 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.
- KimiLädt die DESIGN.md-Tokens und Posture-Regeln in den Kontext, bevor auch nur 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
Kimi schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- KimiPlant 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.
- KimiLiest 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.
- KimiWendet 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
Kimi-Designressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Kimi in OpenDesign erzeugen kann, ein Skill pro Typ.
Design Systems
Brand-Tokens und Komponenten, die Sie einbinden, bevor Kimi etwas generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Einschränkungen, manuelle Prüfungen und Fallbacks für Kimi
- UmfangDie Kimi-K2-Modelle sind auf agentisches Coding über lange Zeiträume ausgelegt, und das Kontextfenster reicht bis zu 256k Token, sodass es ein gesamtes Design System gleichzeitig aufnehmen kann. Diese Seite behandelt Kimi als mit OpenDesign verbundenen Agent, nicht jede Kimi-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Zugangsdaten (Moonshot-API-Key). Diese Seite macht 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 Kimi und OpenDesign
Kann Kimi CLI wirklich Designarbeit leisten?
Ja — mit einem ästhetischen Skill, einem Design System und echten Referenzbildern im Kontext erzeugt Kimi CLI produktionsreife, responsive UI, und die agentischen Kimi-K2-Modelle können die Ausgabe rendern und gegen Referenzen prüfen. Ohne diesen Kontext tendiert es zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Muss ich bezahlen, um mit Kimi CLI zu designen?
Sie bringen Ihre eigenen Zugangsdaten mit: Autorisieren Sie sich über den Kimi Code OAuth-Login oder fügen Sie einen Moonshot-API-Key ein (BYOK), abgerechnet über die Plattform von Moonshot. OpenDesign leitet Ihre Zugangsdaten in keinem Fall über einen Proxy.
Was macht Kimi CLI speziell für Design gut?
Zwei Dinge: Die Kimi-K2-Modelle sind auf agentisches Coding über lange Zeiträume und Tool-Einsatz ausgelegt, sodass der Agent bis zu einem funktionierenden Ergebnis bauen und verfeinern kann, und das Kontextfenster reicht bis zu 256k Token, genug, um ein gesamtes Design System und einen Referenzsatz gleichzeitig aufzunehmen. Beides hilft — aber der Geschmack kommt weiterhin aus dem Design System, dem Skill und den Referenzen, die Sie bereitstellen.
Kimi CLI oder Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für spezifische, codebasis-bewusste Designentscheidungen; der Vorteil von Kimi CLI liegt in seinen agentischen Kimi-K2-Modellen und einem großen Kontext mit BYOK-Ökonomie. Viele Teams nutzen beide — OpenDesign lässt Sie Agents wechseln, ohne Ihren Design-Workflow zu ändern.
Wie verbinde ich Kimi CLI mit Figma?
Führen Sie /mcp-config in Kimi CLI aus, um den Figma-MCP-Server hinzuzufügen und zu authentifizieren. Kimi kann dann echten Design-Kontext abrufen — Komponenten, Variablen, Layout-Daten —, sodass der generierte Code der Quelle entspricht, statt sie nur anzunähern.
Erste Design-Aufgabe mit Kimi 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.