KI-Chat

Drücken Sie ⌘J (Ctrl + J), um den KI-Assistenten zu öffnen. Beschreiben Sie, was Sie möchten — er erstellt Formen, setzt Stile, verwaltet Layouts, arbeitet mit Komponenten und analysiert Ihr Design.

Einrichtung

1. Öffnen Sie das KI-Chat-Panel (⌘J)
2. Klicken Sie auf das Einstellungs-Symbol
3. Wählen Sie einen Anbieter und geben Sie Ihren API-Schlüssel ein
4. Wählen Sie ein Modell

Unterstützte Anbieter

Anbieter	Modelle	Einrichtung
OpenRouter	Claude, GPT-4, Gemini, DeepSeek u. a.	API-Schlüssel von openrouter.ai
Anthropic	Claude 3.5 Sonnet, Claude 3 Opus usw.	API-Schlüssel von console.anthropic.com
OpenAI	GPT-4o, GPT-4 usw.	API-Schlüssel von platform.openai.com
Google AI	Gemini 2.0, Gemini 1.5 usw.	API-Schlüssel von aistudio.google.dev
OpenAI-kompatibel	Jeder Endpunkt mit OpenAI-API-Format	Eigene Basis-URL + Schlüssel. Unterstützt Completions- und Responses-API-Umschaltung.
Anthropic-kompatibel	Jeder Endpunkt mit Anthropic-API-Format	Eigene Basis-URL + Schlüssel

Kein Backend, kein Abonnement — Ihr Schlüssel kommuniziert direkt mit dem Anbieter.

Funktionen

Der Assistent verfügt über 90+ Werkzeuge in diesen Kategorien:

• Erstellen — Frames, Formen, Text, Komponenten, Seiten. Rendert JSX für komplexe Layouts.
• Stylen — Füllungen, Konturen, Effekte, Deckkraft, Eckenradius, Mischmodi.
• Layout — Auto-Layout, Grid, Ausrichtung, Abstände, Größenbestimmung.
• Komponenten — Komponenten, Instanzen, Komponentensätze erstellen. Überschreibungen verwalten.
• Variablen — Variablen, Sammlungen, Modi erstellen/bearbeiten. An Füllungen binden.
• Abfragen — Knoten finden, XPath-Selektoren, Eigenschaften lesen, Seiten, Schriften, Auswahl auflisten.
• Inspizieren — get_jsx für JSX-Ansicht, diff_jsx für strukturelle Vergleiche, describe für semantische Rolle und Design-Probleme.
• Analysieren — Farbpalette, Typografie-Audit, Abstands-Konsistenz, Muster-Erkennung.
• Exportieren — PNG, SVG, JSX mit Tailwind-Klassen. Visuelle Überprüfung via export_image.
• Vektor — Boolesche Operationen, Pfadmanipulation.

Visuelle Überprüfung

Der Assistent kann seine Arbeit visuell überprüfen. Nach dem Erstellen oder Ändern von Designs nutzt er export_image, um einen Screenshot aufzunehmen und das Ergebnis mit der ursprünglichen Anforderung zu vergleichen.

Beispiel-Prompts

• „Erstelle eine Karte mit Titel, Beschreibung und einem blauen Button"
• „Alle Buttons auf dieser Seite sollen denselben Eckenradius verwenden"
• „Welche Schriften werden in dieser Datei verwendet?"
• „Ändere den Hintergrund des ausgewählten Frames in einen Verlauf von Blau nach Lila"
• „Exportiere den ausgewählten Frame als SVG"
• „Zeige mir das JSX für diesen Frame"

Tipps

• Wählen Sie Knoten aus, bevor Sie fragen — der Assistent weiß, was ausgewählt ist.
• Seien Sie präzise bei Farben, Größen und Positionen für exakte Ergebnisse.
• Der Assistent kann mehrere Knoten in einer Nachricht bearbeiten.
• Nutzen Sie „Rückgängig" im Editor — KI-Mutationen unterstützen volles Undo.
• Alle Layouts werden nach jeder Werkzeugausführung automatisch neu berechnet.