65 lines
3.6 KiB
Markdown
65 lines
3.6 KiB
Markdown
---
|
|
title: KI-Chat
|
|
description: Integrierter KI-Assistent mit über 90 Werkzeugen zum Erstellen und Bearbeiten von Designs.
|
|
---
|
|
|
|
# KI-Chat
|
|
|
|
Drücken Sie <kbd>⌘</kbd><kbd>J</kbd> (<kbd>Ctrl</kbd> + <kbd>J</kbd>), 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 (<kbd>⌘</kbd><kbd>J</kbd>)
|
|
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](https://openrouter.ai) |
|
|
| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus usw. | API-Schlüssel von [console.anthropic.com](https://console.anthropic.com) |
|
|
| **OpenAI** | GPT-4o, GPT-4 usw. | API-Schlüssel von [platform.openai.com](https://platform.openai.com) |
|
|
| **Google AI** | Gemini 2.0, Gemini 1.5 usw. | API-Schlüssel von [aistudio.google.dev](https://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.
|