KI für UI-Design.Deine Agenten zeichnen die Oberfläche, in der Datei.
Gestalten mit KI heißt in Kite: Ein Agent schreibt HTML und CSS in die gemeinsame Datei, kein Chat über ein Mockup und kein Bild von einem Screen. Kite ist die Arbeitsfläche. Claude, ChatGPT, Cursor oder jeder MCP-Client zeichnet, während dein Team dieselben Frames bearbeitet. Es gibt kein eigenes Design-Modell, das du extra bezahlst.
So gestaltet ein Agent eine Oberfläche.
Öffne eine Datei, verbinde einen Client, gib ihm das Designsystem, dann die erste Änderung und einen Kommentar.
1. Öffne eine Datei
Leg eine Datei an oder lass den Agenten eine anlegen. Er arbeitet mit deinen Rechten: Er kann öffnen und ändern, was du kannst, und sonst nichts. Das Team sieht die Arbeit live und kann direkt danach weiterbearbeiten.
2. Verbinde einen MCP-Client
Jedes Tool verbindest du einmal: unter Settings → Agents, im Dateimenü oder mit Ask your agent in einer neuen Datei. Die meisten brauchen einen Klick, dann erlaubst du den Zugriff. Es gibt keinen Schlüssel zum Kopieren. Der gehostete Server nimmt jeden Agenten von überall an, mit OAuth. Kite für Mac betreibt einen lokalen Server für Claude Code, Codex, Cursor und Claude, ganz ohne Anmeldung.
3. Gib ihm das Designsystem
Bevor er zeichnet, liest der Agent die Variablen, Stile und Skills der Datei und schreibt var(--name), samt hellem und dunklem Modus. In einer Datei ohne Designsystem trifft der Agent eigene Entscheidungen. Wähl eines unter Assets aus oder lass den Agenten eines bauen.
4. Bitte um die erste Änderung
Frag in der App des Agenten, so wie du schon mit ihm sprichst. Nenn die Datei oder wähl einen Frame aus, damit „das hier“ diesen Frame meint. Er zeichnet Stück für Stück. Der Frame leuchtet, ein Etikett zeigt, wer gestaltet, und die Ebenen sind normale Ebenen, die du ändern oder rückgängig machen kannst. Agenten haben 59 Werkzeuge, um ihre Arbeit zu lesen, zu zeichnen, zu bearbeiten und zu prüfen.
5. Gib ihm einen Auftrag per Kommentar
Pinne einen Kommentar an den Frame und tipp @, um deinen Agenten zu erwähnen. Er liest den Kommentar, den Frame und die Ebene, die du angeklickt hast. Der Thread zeigt Waiting for, dann is working, dann Done by. Im Browser wartet der Auftrag, bis du dem Agenten in seiner App „do my Kite requests“ sagst.
Kein Bildgenerator.
Diese vier generieren einen Screen und berechnen ihn. Kite hält den Agenten in der Datei. Jede Zelle stammt aus der Doku des jeweiligen Tools, Stand Oktober 2026.
| Funktion | Kite | Uizard | Google Stitch | Wonder | MagicPath |
|---|---|---|---|---|---|
| Welche Agenten | Claude, ChatGPT, Cursor, Codex oder jeder MCP-Client | Nur die eigene KI | Ja, jeder MCP-Agent; Gemini generiert | Ja | Ja |
| Was Agenten können | 59 Werkzeuge: Agenten lesen, zeichnen, bearbeiten und prüfen ihre eigene Arbeit | Agenten können sich nicht verbinden | Ja, über Prompts an Gemini | Ja | Ja |
| KI-Credits | Keine: Dein Agent läuft mit dem Plan, den du schon bezahlst | Generierungen | Tägliche Credits | KI-Tokens, 20 $ pro Platz und Monat | Ja, mit Paketen |
| Limits für Agenten | 200 Agenten-Aktionen pro Tag in Free; unbegrenzt in Pro | Generierungen | Tägliche Credits | MCP unbegrenzt; Tokens für den KI-Chat | 50 Aufrufe pro Woche kostenlos |
| Kostenloser Plan | Unbegrenzt viele Editoren und Betrachter und 3 Dateien, kostenlos | Ja, 3 Generierungen pro Monat | Kostenlos, mit täglichem Credit-Limit | Ja, begrenzte Tokens für den KI-Chat | 20 Credits pro Tag, bis zu 120 pro Monat |
| Figma | Aus Figma und nach Figma einfügen oder eine ganze Datei über ihren Link importieren | Importieren | Import und Export | Importieren | Import und Export |
Wenn du das mit Figma abwägst, lies Figma-Alternativen. Jedes Tool hat eine eigene Seite unter Vergleiche, auch paper.design.
Kurze Antworten.
Was KI für UI-Design ist, welche Agenten, und ob du doppelt zahlst.
Was ist KI für UI-Design?
Ein Agent, der die Oberfläche in die gemeinsame Datei schreibt. In Kite schreibt er echtes HTML und CSS auf die Arbeitsfläche, die dein Team bearbeitet, und du siehst die Arbeit entstehen. Es ist kein Chat, der ein Mockup beschreibt, und kein Generator, der dir ein Bild von einem Screen gibt.
Welche Agenten können in Kite Oberflächen gestalten?
Claude, ChatGPT, Cursor, Codex und jeder andere MCP-Client. Sie nutzen den gehosteten Server mit Anmeldung per OAuth oder den lokalen Server in Kite für Mac. Die Schritte für jeden Client stehen in der Doku.
Zahle ich doppelt?
Nein. Kite hat kein eigenes Modell und keine KI-Credits. Dein Agent läuft mit dem Plan, den du schon bezahlst. Uizard zählt Generierungen, Google Stitch hat ein tägliches Credit-Limit, und Wonder berechnet 20 $ an KI-Tokens pro Platz und Monat. Das sind eigene Zähler. Kite fügt keinen hinzu.
Fragen. KI für UI-Design, Agenten und MCP.
Was ist KI für UI-Design?
Ein Agent, der die Oberfläche in die gemeinsame Datei schreibt. In Kite schreibt er echtes HTML und CSS auf die Arbeitsfläche, die dein Team bearbeitet, und du siehst die Arbeit entstehen. Es ist kein Chat, der ein Mockup beschreibt, und kein Generator, der dir ein Bild von einem Screen gibt.
Welche Agenten können in Kite Oberflächen gestalten?
Claude, ChatGPT, Cursor, Codex und jeder andere MCP-Client. Sie nutzen den gehosteten Server mit Anmeldung per OAuth oder den lokalen Server in Kite für Mac. Die Schritte für jeden Client stehen in der Doku.
Zahle ich doppelt?
Nein. Kite hat kein eigenes Modell und keine KI-Credits. Dein Agent läuft mit dem Plan, den du schon bezahlst. Uizard zählt Generierungen, Google Stitch hat ein tägliches Credit-Limit, und Wonder berechnet 20 $ an KI-Tokens pro Platz und Monat. Das sind eigene Zähler. Kite fügt keinen hinzu.
Wie verbinde ich einen Agenten?
Unter Settings → Agents oder mit Connect an agent im Dateimenü. Wähl das Tool und erlaub den Zugriff. Es gibt keinen Schlüssel zum Kopieren. Kite für Mac fügt Claude Code, Codex, Cursor und Claude mit einem Klick hinzu, auf einem lokalen Server. Der gehostete Server ist für jeden MCP-Client, von überall, mit OAuth.
Kann ein Agent unser Designsystem einhalten?
Ja. Er liest die Variablen, Stile und Skills der Datei, bevor er zeichnet, und schreibt var(--name) statt einzelner Werte, samt Modi wie hell und dunkel. Mit Build with components wird ein Baustein, der sich wiederholt, einmal als Komponente gezeichnet und kopiert.
Wie funktioniert ein Auftrag per Kommentar?
Pinne den Kommentar dorthin, wo die Änderung hingehört, und erwähne deinen Agenten mit @. Der Kommentar zeigt Waiting for, dann is working, dann Done by. Der Agent liest den Kommentar und den Frame. Im Browser sagst du ihm in seiner App „do my Kite requests“, und er arbeitet jeden wartenden Auftrag ab.
Was ist der Unterschied zu einem Prompt-to-UI-Tool?
Ein Prompt-to-UI-Tool generiert einen Screen und berechnet diese Generierung. Die KI von Uizard lässt sich nicht gegen deine tauschen, und kostenlos gibt es 3 Generierungen im Monat. Bei Google Stitch prompten Agenten Gemini, mit täglichem Credit-Limit. Die Vektoren von Wonder sind KI-generierte SVGs ohne Punktbearbeitung, dazu 20 $ an Tokens pro Platz. In Kite bearbeitet der Agent weiter dasselbe HTML und CSS, neben deinem Team, ohne KI-Credits.
Was kostet Kite?
Kostenlos starten: unbegrenzt viele Editoren und Betrachter, ein Workspace mit 3 Dateien und 200 Agenten-Aktionen pro Tag. Pro kostet 20 $ pro Editor im Monat oder 16 $ bei jährlicher Abrechnung. Team kostet 35 $ oder 28 $ bei jährlicher Abrechnung. Keine KI-Credits: Dein Agent läuft mit dem Plan, den du schon bezahlst.
Du und deine Agenten, auf einem Board.
Im Browser oder in Kite für Mac. Bring den Agenten mit, den du schon nutzt, mit dem Plan, den du schon bezahlst.