48 translated pages (de, es, fr, it, pl, ru) for the Programmable section: overview, AI Chat, Collaboration, JSX Renderer, CLI (inspecting, exporting, analyzing, scripting). CLI reference and MCP server pages copied as-is (mostly code/tables).
48 lines
2.2 KiB
Markdown
48 lines
2.2 KiB
Markdown
---
|
|
title: KI-Chat
|
|
description: Integrierter KI-Assistent mit 87 Werkzeugen zum Erstellen und Bearbeiten von Designs.
|
|
---
|
|
|
|
# KI-Chat
|
|
|
|
Drücke <kbd>⌘</kbd><kbd>J</kbd> (<kbd>Ctrl</kbd> + <kbd>J</kbd>), um den KI-Assistenten zu öffnen. Beschreibe, was du möchtest — er erstellt Formen, setzt Stile, verwaltet Layout, arbeitet mit Komponenten und analysiert dein Design.
|
|
|
|
## Einrichtung
|
|
|
|
1. Öffne das KI-Chat-Panel (<kbd>⌘</kbd><kbd>J</kbd>)
|
|
2. Klicke auf das Einstellungssymbol
|
|
3. Gib deinen OpenRouter API-Schlüssel ein
|
|
4. Wähle ein Modell (Claude, GPT-4, Gemini, etc.)
|
|
|
|
Kein Backend, kein Abonnement — dein Schlüssel kommuniziert direkt mit OpenRouter.
|
|
|
|
## Was er kann
|
|
|
|
Der Assistent hat 87 Werkzeuge in diesen Kategorien:
|
|
|
|
- **Erstellen** — Frames, Formen, Text, Komponenten, Seiten. Rendert JSX für komplexe Layouts.
|
|
- **Gestalten** — Füllungen, Konturen, Effekte, Deckkraft, Eckenradius, Mischmodi.
|
|
- **Layout** — Auto-Layout, Ausrichtung, Abstände, Größenanpassung.
|
|
- **Komponenten** — Komponenten, Instanzen, Komponentensets erstellen. Überschreibungen verwalten.
|
|
- **Variablen** — Variablen, Sammlungen, Modi erstellen/bearbeiten. An Füllungen binden.
|
|
- **Abfragen** — Knoten finden, Eigenschaften lesen, Seiten, Schriften, Auswahl auflisten.
|
|
- **Analysieren** — Farbpalette, Typografie-Audit, Abstandskonsistenz, Cluster-Erkennung.
|
|
- **Exportieren** — PNG, SVG, JSX mit Tailwind-Klassen.
|
|
- **Vektor** — Boolesche Operationen, Pfadbearbeitung.
|
|
|
|
## Beispiel-Prompts
|
|
|
|
- „Erstelle eine Karte mit Titel, Beschreibung und einem blauen Button"
|
|
- „Gib allen Buttons auf dieser Seite den gleichen Eckenradius"
|
|
- „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"
|
|
- „Finde alle Textknoten mit einer Schriftgröße kleiner als 12"
|
|
|
|
## Tipps
|
|
|
|
- Wähle Knoten aus, bevor du fragst — der Assistent weiß, was ausgewählt ist.
|
|
- Sei spezifisch bei Farben, Größen und Positionen für präzise Ergebnisse.
|
|
- Der Assistent kann mehrere Knoten in einer Nachricht bearbeiten.
|
|
- Verwende „Rückgängig" im Editor, wenn dir das Ergebnis nicht gefällt.
|