Design EditorDokuDen Editor verwenden
Variablen und Themes
Variablen enthalten die Farben, Größen und Texte, die sich in einem Design wiederholen. Themes schalten sie alle auf einmal um, etwa zwischen hell und dunkel.
1Variablen
Öffnen Sie das Panel Variablen mit Cmd+Shift+V. Erstellen Sie Farb-, Zahl- und Textvariablen, durchsuchen Sie sie und binden Sie sie an Füllungen, Konturen, Größen oder Text. Agenten können auch Wahr/Falsch-Variablen erstellen.
2Themes
Fügen Sie ein Theme hinzu, um eine Achse wie Modus anzulegen, und dann Varianten wie Hell und Dunkel. Jede Variable kann pro Variante einen Wert haben; beim Umschalten der Variante wird alles neu gezeichnet, was daran gebunden ist.
Speichern Sie den aktuellen Satz als Preset, um ihn in anderen Dateien wiederzuverwenden. Presets lassen sich als .optheme-Dateien exportieren und daraus importieren.
3Designsysteme
Vier vollständige Designsysteme werden mit der App ausgeliefert: Halo, Lunaris, Nitro und shadcn. Jedes ist ein kompletter Token-Satz mit hellem und dunklem Theme. Wenden Sie eines auf dem Startbildschirm unter Designsysteme an, oder bitten Sie einen Agenten darum.
4design.md
Das Panel Designsystem (Cmd+Shift+D) enthält eine schriftliche Beschreibung des Designs: visuelles Thema, Farben, Typografie, Komponentenstile, Layout-Prinzipien und Generierungshinweise. Agenten lesen sie, bevor sie zeichnen.
- Importieren oder exportieren Sie sie als
design.md-Datei. - Generieren Sie sie mit Ihrem KI-Modell automatisch aus dem aktuellen Design.
- Alle mit Variablen synchronisieren macht aus ihren Farben Variablen; +Var fügt sie einzeln hinzu.
5Styleguides
Das Asset-Center enthält 63 integrierte Styleguides, denen der Agent folgen kann, und Ihre eigenen: Importieren Sie unter Stile eine beliebige DESIGN.md-Datei oder fügen Sie sie ein. Heften Sie einen Stil an, damit der Agent ihn für jedes neue Design verwendet.