WEITERE LEKTÜRE
Weiterlesen zu Trae CLI
Tutorials, Dokumentationen und Walkthroughs für Designarbeit mit Trae CLI, wie im Leitfaden veröffentlicht.
Trae CLI 
OpenDesign Mit Trae CLI
in OpenDesign
gestalten.
Wie Sie Interfaces mit Trae CLI in OpenDesign designen: das Modell, das Sie mitbringen, ein echter Browser, der jeden Durchgang prüft, eine Landingpage-Aufgabe vom Briefing bis zur geprüften Datei, und die Grenzen, die Sie vorher kennen sollten.
DREI EINSTIEGSPUNKTE FÜR TRAE CLI
Wählen Sie Ihren Einstiegspunkt für Trae CLI
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche mit Trae CLI entwerfen
Dieser Pfad umfasst das Briefing, Referenzen, Designregeln und ein geprüftes HTML-Artefakt.
Diese Anleitung lesen EINRICHTUNGTrae CLI von Grund auf installieren und konfigurieren
Der Weg von einer sauberen Maschine zu einer Trae CLI, die eine UI erstellen und verifizieren kann.
Zum Setup VERGLEICHTrae CLI neben andere Agenten stellen
Worin sich Trae CLI bei Designarbeit von Codex, Claude Code und Cursor unterscheidet und wann ein anderer Workflow besser passt.
Zum VergleichAuf dieser Seite Beispiel
EIN VOLLSTÄNDIGER TRAE CLI DESIGN-DURCHLAUF
Trae CLI Design-Aufgabe: Briefing rein, Oberfläche raus
Das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die bleiben, bevor Sie es als fertig bezeichnen. Die untenstehende Oberfläche ist ein illustratives Beispiel, das für diese Seite erstellt wurde, kein aufgezeichneter Trae CLI-Lauf.
1Design-Briefing und Vorgaben
BriefingEntwerfen Sie eine Landingpage für ein Dokumentationsprodukt: Hero, eine lebendig wirkende Suchdemo, drei Vorteile und Kundenlogos. Prüfen Sie jeden Durchlauf in einem echten Browser bei beiden Breiten.
- Design-SystemOpenDesign Papierleinwand: Albert Sans mit einem grünen Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenFokuszustand der Such-Demo, CTA-Zustände, Logo-Zeile-Scroll
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Wer macht was: Sie, Trae CLI und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Designsystem und definieren Sie Abnahmekriterien.
- Trae CLI
Plant das Layout, schreibt das HTML, CSS und JavaScript und überarbeitet dann auf Anfrage.
- OpenDesign
Liefert das Designsystem und den Skill, rendert die Vorschau und speichert jede Version als Projektdatei.
- Prüfung
Visuelle Hierarchie, 8px-Raster-Abstände, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
3Trae CLI Artefakt: Produktseite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Hero und Vorteile sitzen auf dem 8px-Raster; die Suchdemo hat eine feste Höhe, damit die Seite nicht springt.
Hierarchie
Visuelle Hierarchie
Überschrift, Suchdemo, dann Vorteile; der Akzent markiert nur den Start-Button.
Responsive
Mobiles Layout
Text, dann die Demo, dann Vorteile; Logos scrollen horizontal innerhalb ihrer eigenen Zeile.
Interaktion
Interaktionsprüfungen
Fokussieren Sie die Demo, folgen Sie beiden CTAs, scrollen Sie die Logo-Zeile.
Eignung
Wann Trae CLI zur Aufgabe passt und wann nicht
Trae CLI passt, wenn
- Bringen Sie Ihr eigenes Modell mit. Modellagnostisch von Grund auf, sodass Sie UI-Arbeit an den LLM-Anbieter weiterleiten können, der am besten über Ihr Frontend nachdenkt — und ihn später austauschen.
- Offen und konfigurationsgesteuert. MIT-lizenziert und in einer trae_config.yaml festgeschrieben, sodass das Agentenverhalten transparent und teamübergreifend reproduzierbar bleibt.
- Echte Browser-Schleife. Datei-, Shell- und Reasoning-Tools ermöglichen es, einen Dev-Server zu bauen, auszuführen und die UI über Breakpoints hinweg zu verifizieren.
- Kostenlos starten. Der Agent selbst ist kostenlos; Ihre einzigen Kosten entstehen durch den gewählten Provider — oder gar keine bei einem lokalen Ollama-Modell.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt ist HTML, kein bearbeitbares Design-Dokument. Prüfen Sie einen separaten Vektor-Workflow für Ihr benötigtes Asset-Format.
- Sie haben keine Referenz und keine Vorgaben. Ohne Designsystem oder Beispiele neigt die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
- Sie besitzen die für diesen Agent benötigte Zugangsdaten nicht. Erforderlich: Ihr eigener LLM-Provider-API-Key (Bring your own key) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder lokal Ollama. OpenDesign stellt keine Zugangsdaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet in Qoder oder Kimi. Diese Agenten haben ihre eigenen Seiten; die Einrichtung variiert je nach Agent, selbst wenn der Workspace überlappt. Siehe verwandte Agenten.
Kompatibilität
Trae CLI-Anforderungen, bevor Sie beginnen
Dieser Leitfaden behandelt Trae CLI in Verbindung über die OpenDesign Desktop-App. Veröffentlichte Referenzen wurden am 6. September 2026 geprüft.
Tool-UmfangTrae CLI, von ByteDance
Trae CLI ist ByteDances Open-Source-Terminal-KI-Agent (MIT), der als trae-agent-Projekt ausgeliefert wird. Er liest Ihre Codebasis, bearbeitet Dateien und führt Shell-Befehle aus natürlichsprachlichen Aufgaben aus. Wenn Sie entscheiden müssen, ob OpenDesign die Trae IDE ersetzt oder ergänzt, siehe den OpenDesign vs Trae-Vergleich. Diese Seite betrifft das Entwerfen von Oberflächen mit Trae CLI über OpenDesign, nicht die Oberfläche von Trae CLI selbst. OpenDesigns Einrichtungshinweise listen verfügbare Agenten auf.
Konten und AuthentifizierungIhr eigener LLM-Provider-API-Key (BYOK) —
Ihr eigener LLM-Anbieter-API-Schlüssel (BYOK) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder lokales Ollama. Authentifizieren Sie sich mit Ihrem eigenen LLM-Anbieter-Schlüssel (BYOK) — Anmeldedaten bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Downloadseite für Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quell-Quickstart gelten für die Ausführung aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Minimale kompatible Trae CLI-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Trae CLI sie bearbeitet hat und dass sich das Artefakt öffnen lässt. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Trae CLI-Einrichtung in drei Schritten
Laden Sie zuerst herunter, schließen Sie die Trae CLI-Einrichtung für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Das Bauen von OpenDesign aus dem Quellcode ist für diesen Pfad nicht erforderlich.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Bereits installiert? Gehen Sie zum nächsten Schritt; kein erneuter Download erforderlich. - 2
Bereiten Sie Ihre Trae CLI-Verbindung vor
Folgen Sie den Trae CLI-Anweisungen Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem eigenen LLM-Provider-Key (BYOK) — die Zugangsdaten bleiben auf Ihrem Rechner.
Trae-Dokumentation# 1. Get Trae CLI (trae-agent) from source — needs uv git clone https://github.com/bytedance/trae-agent.git cd trae-agent uv sync --all-extras source .venv/bin/activate # 2. Authenticate by pointing it at your LLM provider key # set it in the environment (or a trae_config.yaml file) export OPENAI_API_KEY=... # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.Aus den Trae CLI-Einrichtungshinweisen im veröffentlichten Guide; prüfen Sie die Anbieterdokumentation für den aktuellen Befehl.
MEILENSTEINBestätigen Sie den vorgesehenen Agent und das Konto. Ist er nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Trae CLI-Aufgabe aus
Beginnen Sie mit einem Briefing, das klein genug ist, um den gesamten Durchlauf zu beurteilen, einschließlich einer Überarbeitung.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherzustand und fordern Sie eine bestimmte Änderung an. Die Generierung beginnt die Überprüfung; sie beendet sie nicht.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Trae CLI-Design-Workflow
Der Trae CLI Design-Workflow in fünf Schritten
Eine Produktseite durchläuft Trae CLIs Briefing, Regeln, Build, Browser-Überprüfung und Überarbeitungsdurchlauf. Jeder Schritt benennt Ihren Input, Trae CLIs Aktion, OpenDesigns Beitrag und Ihre Prüfung.
- 1
Design-Briefing
Drei bis sechs einfache Zeilen: Zielgruppe, Zweck des Bildschirms, Zielplattformen.
- SieEntwerfen Sie das Briefing und fügen Sie jeden Referenz-Screenshot bei, den Sie haben.
- Trae CLIParst das Briefing und Ihre Repo-Anweisungsdatei; macht Mehrdeutigkeiten vor dem Bauen sichtbar.
- OpenDesignLiefert das Projekt, die Prompt-Oberfläche und den Artefakttyp-Skill.
- PrüfenStellen Sie sicher, dass Abnahmekriterien im Briefing enthalten sind; sie vor der Generierung festzulegen kostet weniger als das Nachrüsten.
- 2
Design-Vorgaben
Ein Designsystem plus harte Vorgaben ist die Grenze zwischen markengerechter Ausgabe und Standard-KI-Styling.
- SieWählen Sie ein Designsystem; listen Sie Breakpoints und Pflichtkomponenten auf.
- Trae CLILädt DESIGN.md-Tokens und Haltungsregeln, bevor jegliches Markup geschrieben wird.
- OpenDesignLiefert die Designsystem-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
- PrüfenPrüfen Sie, ob die Tokens zu Ihrer Marke passen: einzelner Akzent, korrekte Schriften, korrekter Radius.
- 3
Die Oberfläche generieren
Trae CLI generiert eine eigenständige HTML-Datei: Layout, Stile, Interaktionen und stabile Hooks.
- SieWarten Sie oder beantworten Sie eine klärende Frage; es gibt nichts zu konfigurieren.
- Trae CLIPlant Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und repariert Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indiziert es für die Vorschau.
- PrüfenWarten Sie ab. Beurteilen Sie die gerenderte Datei, nicht den Quellcode.
- 4
Vorschau
OpenDesign rendert die Datei in den von Ihnen angegebenen Breiten. Dies ist der Beurteilungspunkt.
- SieÄndern Sie Breiten, üben Sie Interaktionen aus, kommentieren Sie bestimmte Elemente.
- Trae CLILiest Ihre Vorschau-Kommentare und bereitet die nächste Überarbeitung vor.
- OpenDesignRendert die Vorschau und stellt
data-od-id-Ziele für Kommentare und Bearbeitungen bereit. - PrüfenHierarchie, Kontrast, 390px-Überlauf, Fokus-Zustände und zurückhaltende Akzentnutzung.
- 5
Überarbeiten und Verifizieren
Zeigen Sie auf Vorschau-Elemente, um Änderungen anzufordern. Jede Überarbeitung wird zu einer neuen Datei; kein stilles Überschreiben.
- SieWandeln Sie Kommentare in Anfragen um und entscheiden Sie, wann die Aufgabe erledigt ist.
- Trae CLIÜbernimmt Änderungen direkt und führt die Datei erneut aus.
- OpenDesignHält Versionen nebeneinander und exportiert am Ende ein Bild oder das HTML.
- PrüfenPrüfe zuerst den geänderten Bereich erneut, dann die vollständige Seite einmal pro Breakpoint.
Ressourcen
Trae CLI-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Artefakttypen, die Trae CLI in OpenDesign erzeugen kann, mit je einem Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die gebunden werden müssen, bevor Trae CLI generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Grenzen von Trae CLI, manuelle Prüfungen und Fallback-Pfade
- UmfangEs ist modellagnostisch — du bringst deinen eigenen LLM-Anbieter-Schlüssel mit (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder ein lokales Ollama-Modell) — und sein Verhalten ist in einer trae_config.yaml festgeschrieben, die du committen kannst. Diese Seite behandelt Trae CLI als einen mit OpenDesign verbundenen Agenten, nicht als vollständige Übersicht aller Trae CLI-Funktionen.
- NutzungslimitsKosten- und Nutzungslimits richten sich nach dem von dir bereitgestellten Credential (deinem eigenen LLM-Anbieter-API-Schlüssel — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder lokalem Ollama). Hier wird kein kostenloses Kontingent zugesichert.
- NetzwerkLokale Projektdateien bedeuten nicht automatisch Offline-Inferenz. Prüfe die Anbieter-Einstellungen und Datenrichtlinien deines Agenten, bevor du sensible Eingaben sendest.
- Ausgabe ist HTMLDie Ergebnisse sind HTML-Dateien, keine Vektordesign-Dateien.
- Manuelle ÜberprüfungDu prüfst Barrierefreiheit, echte Inhalte, Markenpassung und Interaktionskorrektheit in der Vorschau. Behandle die Selbstprüfung des Agenten als ersten Durchlauf.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, ziehe die Verbindungsanweisungen und die Authentifizierung deiner installierten Version zu Rate. Behalte den Fehler und das letzte funktionierende Artefakt, bevor du die Konfiguration änderst.
FAQ
Häufige Fragen zu Trae CLI und OpenDesign
Übernimmt Trae CLI tatsächlich Design?
Ja – mit einem ästhetischen Skill, einem Designsystem und echtem Referenzkontext erzeugt Trae CLI produktionsreife, responsive UI, und da es modellunabhängig ist, können Sie die Arbeit an den Provider weiterleiten, der Ihr Frontend am besten durchdenkt. Ohne diesen Kontext tendiert es zu einem generischen Look – genau diese Lücke schließt OpenDesign.
Entstehen Kosten beim Design mit Trae CLI?
Trae CLI selbst ist kostenlos und Open Source (MIT). Sie bringen Ihren eigenen LLM-Provider-Key mit, sodass Ihre einzigen Kosten die des jeweiligen Providers sind – oder keine, wenn Sie ein lokales Modell über Ollama betreiben. OpenDesign leitet Ihre Zugangsdaten in keinem Fall über einen Proxy.
Was macht Trae CLI für Design geeignet?
Zwei Dinge: Es ist modellunabhängig, sodass Sie den LLM-Provider wählen können, der am besten für Frontend-Arbeit geeignet ist, und es ist vollständig offen und konfigurationsgesteuert, sodass sein Verhalten im Team transparent und reproduzierbar ist. Der Geschmack kommt jedoch weiterhin aus dem Designsystem, dem Skill und den Referenzen, die Sie bereitstellen.
Trae CLI oder Claude Code für Frontend-Design?
Beide sind leistungsfähig. Claude Code ist bekannt für spezifische, codebasis-bewusste Designentscheidungen; der Vorteil von Trae CLI liegt darin, Open Source und provider-flexibel zu sein, sodass Sie nie an ein einzelnes Modell gebunden sind. Viele Teams nutzen beide – mit OpenDesign können Sie Agenten wechseln, ohne Ihren Design-Workflow zu ändern.
Was benötigt OpenDesign, um Trae CLI auszuführen?
OpenDesign steuert die trae-cli-Binärdatei von Trae CLI über das Agent Client Protocol (ACP) und verwendet Ihren konfigurierten LLM-Provider-Key. Sie wählen Trae CLI als Ihren Agent, weisen ihm einen Provider zu, und OpenDesign liefert den kuratierten Designkontext darum herum.
Was Trae CLI ist
Trae CLI ist der Kommandozeilen-Agent aus ByteDances Open-Source-Projekt trae-agent. Es liest Ihr Repository, zeigt Dateien an, erstellt und bearbeitet sie und führt Shell-Befehle in einer persistenten Umgebung aus – es plant und überprüft Arbeit aus Aufgaben in natürlicher Sprache, anstatt nur Zeilen zu vervollständigen. Es ist MIT-lizenziert und um eine transparente, modulare Architektur herum aufgebaut, sodass es leicht zu inspizieren und zu erweitern ist. Es unterscheidet sich von der separaten Trae IDE, ByteDances VS Code-basiertem KI-Editor, obwohl beide vom selben Anbieter stammen.
Für Designarbeit stechen zwei Eigenschaften hervor. Es ist modellagnostisch – Sie wählen den LLM-Anbieter, sodass Sie nie an die Stärken oder Grenzen eines einzelnen Modells gebunden sind. Und es ist vollständig offen und konfigurationsgesteuert, sodass sein Verhalten, seine Werkzeuge und sein Anbieter in der Versionskontrolle zusammen mit Ihrem Projekt festgehalten werden können, anstatt hinter einem gehosteten Dienst verborgen zu sein.
Ausführungs- und interaktive Modi: Trae CLI führt eine einzelne Aufgabe mit `trae-cli run "..."` aus oder hält eine kontinuierliche Sitzung mit `trae-cli interactive` aufrecht – der natürliche Ort, um eine UI an Ihren Designkonventionen auszurichten.
Eingebaute Werkzeuge: Es liefert Dateibearbeitung, Bash-/Shell-Ausführung und strukturierte Reasoning-Werkzeuge von Haus aus mit, sodass es bauen, einen Dev-Server ausführen und Laufzeitfehler überprüfen kann, ohne das Terminal zu verlassen.
Eigenen Anbieter verwenden: Sie stellen einen API-Schlüssel für den Anbieter bereit, dem Sie vertrauen – OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder ein lokales Ollama-Modell – über Umgebungsvariablen oder eine Konfigurationsdatei.
Anmeldedaten: ein LLM-Anbieter-API-Schlüssel (BYOK) – z. B. OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder ein lokales Ollama-Modell
Anbieter: ByteDance (Open-Source-Projekt trae-agent)
Lizenz: MIT, Open Source
Für Designarbeit stechen zwei Eigenschaften hervor. Es ist modellagnostisch – Sie wählen den LLM-Anbieter, sodass Sie nie an die Stärken oder Grenzen eines einzelnen Modells gebunden sind. Und es ist vollständig offen und konfigurationsgesteuert, sodass sein Verhalten, seine Werkzeuge und sein Anbieter in der Versionskontrolle zusammen mit Ihrem Projekt festgehalten werden können, anstatt hinter einem gehosteten Dienst verborgen zu sein.
Ausführungs- und interaktive Modi: Trae CLI führt eine einzelne Aufgabe mit `trae-cli run "..."` aus oder hält eine kontinuierliche Sitzung mit `trae-cli interactive` aufrecht – der natürliche Ort, um eine UI an Ihren Designkonventionen auszurichten.
Eingebaute Werkzeuge: Es liefert Dateibearbeitung, Bash-/Shell-Ausführung und strukturierte Reasoning-Werkzeuge von Haus aus mit, sodass es bauen, einen Dev-Server ausführen und Laufzeitfehler überprüfen kann, ohne das Terminal zu verlassen.
Eigenen Anbieter verwenden: Sie stellen einen API-Schlüssel für den Anbieter bereit, dem Sie vertrauen – OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder ein lokales Ollama-Modell – über Umgebungsvariablen oder eine Konfigurationsdatei.
Anmeldedaten: ein LLM-Anbieter-API-Schlüssel (BYOK) – z. B. OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure oder ein lokales Ollama-Modell
Anbieter: ByteDance (Open-Source-Projekt trae-agent)
Lizenz: MIT, Open Source
Warum ein modellagnostischer offener Agent für Design geeignet ist
Der Design-Vorteil von Trae CLI rührt daher, dass es offen und anbieterflexibel ist – doch wie bei jedem Agenten muss der Geschmack weiterhin geliefert werden.
Modellagnostisch von Grund auf: Weil du den Anbieter wählst, kannst du Designarbeit an das Modell weiterleiten, das heute am besten über Layout und Frontend-Code nachdenken kann, und es später austauschen, ohne deinen Workflow zu ändern.
Offen und konfigurationsgesteuert: Der Agent, seine Tools und sein Anbieter werden in einer Konfigurationsdatei festgelegt, die du committen kannst, sodass ein Team auf jedem Rechner dasselbe Agentenverhalten erhält, statt pro Entwickler abzudriften.
Konventionen in deinem Repo: Richte den Agenten auf deine Tokens, Komponenten und echten Spezifikationen aus – im Projekt gehalten –, damit er gegen eine Marke arbeitet, statt standardmäßig zu einem generischen Look zu greifen.
Geschmack entsteht aus drei Inputs, die du bereitstellst: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Trae CLI hat nicht von Haus aus Geschmack. Es erzeugt gutes Design, wenn du ihm Constraints gibst – ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs und speist sie über ACP in Trae CLI ein, weshalb die beiden zusammenpassen (mehr unten).
Modellagnostisch von Grund auf: Weil du den Anbieter wählst, kannst du Designarbeit an das Modell weiterleiten, das heute am besten über Layout und Frontend-Code nachdenken kann, und es später austauschen, ohne deinen Workflow zu ändern.
Offen und konfigurationsgesteuert: Der Agent, seine Tools und sein Anbieter werden in einer Konfigurationsdatei festgelegt, die du committen kannst, sodass ein Team auf jedem Rechner dasselbe Agentenverhalten erhält, statt pro Entwickler abzudriften.
Konventionen in deinem Repo: Richte den Agenten auf deine Tokens, Komponenten und echten Spezifikationen aus – im Projekt gehalten –, damit er gegen eine Marke arbeitet, statt standardmäßig zu einem generischen Look zu greifen.
Geschmack entsteht aus drei Inputs, die du bereitstellst: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Trae CLI hat nicht von Haus aus Geschmack. Es erzeugt gutes Design, wenn du ihm Constraints gibst – ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs und speist sie über ACP in Trae CLI ein, weshalb die beiden zusammenpassen (mehr unten).
Trae CLI für Design einrichten – von Grund auf
Hier ist der vollständige Weg von einer sauberen Maschine bis zu einer Trae CLI, die UI bauen und verifizieren kann. Trae CLI wird mit uv aus dem Quellcode installiert und dann mit dem LLM-Anbieter konfiguriert, den du verwenden möchtest.
Die Einrichtungsreihenfolge: installieren → mit einem Anbieterschlüssel authentifizieren → deine Designkonventionen konfigurieren → einen Skill hinzufügen → Browser-Verifizierung aktivieren.
Kodiere deine Designregeln: Halte deine Tokens, Primitives und Konventionen im Repo und richte Trae CLI darauf aus, damit die Ausgabe zu einer Marke passt, statt standardmäßig zu einem generischen Look zu greifen.
Browser-Verifizierung hinzufügen: Lass Trae CLI einen Dev-Server ausführen und in einem echten Browser rendern, damit es seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build durchläuft.
Nutze den aktuellen Setup-Abschnitt für Befehle und versionsspezifische Details, die sich ändern können.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Die Einrichtungsreihenfolge: installieren → mit einem Anbieterschlüssel authentifizieren → deine Designkonventionen konfigurieren → einen Skill hinzufügen → Browser-Verifizierung aktivieren.
Kodiere deine Designregeln: Halte deine Tokens, Primitives und Konventionen im Repo und richte Trae CLI darauf aus, damit die Ausgabe zu einer Marke passt, statt standardmäßig zu einem generischen Look zu greifen.
Browser-Verifizierung hinzufügen: Lass Trae CLI einen Dev-Server ausführen und in einem echten Browser rendern, damit es seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build durchläuft.
Nutze den aktuellen Setup-Abschnitt für Befehle und versionsspezifische Details, die sich ändern können.
# 1. Trae CLI (trae-agent) aus dem Quellcode holen — benötigt uv
git clone https://github.com/bytedance/trae-agent.git
cd trae-agent
uv sync --all-extras
source .venv/bin/activate
# 2. Authentifiziere dich, indem du es auf den Schlüssel deines LLM-Anbieters ausrichtest
# lege ihn in der Umgebung fest (oder in einer trae_config.yaml-Datei)
export OPENAI_API_KEY=... # oder ANTHROPIC_API_KEY, GOOGLE_API_KEY usw.
# 3. Führe eine Aufgabe in deinem Projekt aus
trae-cli run "Create a hello world page"
# oder halte eine Sitzung ab:
trae-cli interactive
# 4. Prüfe die aufgelöste Konfiguration (Schlüssel sind maskiert)
trae-cli show-configHistorisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Der Workflow vom Referenzbild zur UI
Die wirkungsvollste Design-Schleife mit Trae CLI besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es übereinstimmt. Da Trae CLI modellagnostisch ist, richte es auf einen Provider aus, dessen Modell deine Referenzen gut verarbeitet, und nutze einen echten Browser, um das Ergebnis zu prüfen.
Beginne mit den klarsten visuellen Referenzen, die du hast — und beschreibe mehrere Zustände (Desktop und Mobile, Hover, leer, Ladevorgang), nicht nur einen Hero-Shot.
Sei im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.
Halte dein Designsystem und deine Konventionen im Repo und sage Trae CLI, wo die Tokens und kanonischen Primitives liegen.
Starte einen Dev-Server und lasse Trae CLI in einem echten Browser rendern, wobei du auf Breakpoints umstellst, um das Ergebnis zu prüfen.
Iteriere, indem du Trae CLI seine Implementierung mit den Referenzen vergleichen lässt — nicht nur bestätigen lässt, dass sie baut.
Führe eine interaktive Sitzung aus und gib konkrete Einschränkungen statt einer Ein-Zeilen-Anfrage:
Halte Prompts klein und fokussiert, committe gute Iterationen und mache schlechte rückgängig (sage Trae CLI, wenn du rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Beginne mit den klarsten visuellen Referenzen, die du hast — und beschreibe mehrere Zustände (Desktop und Mobile, Hover, leer, Ladevorgang), nicht nur einen Hero-Shot.
Sei im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.
Halte dein Designsystem und deine Konventionen im Repo und sage Trae CLI, wo die Tokens und kanonischen Primitives liegen.
Starte einen Dev-Server und lasse Trae CLI in einem echten Browser rendern, wobei du auf Breakpoints umstellst, um das Ergebnis zu prüfen.
Iteriere, indem du Trae CLI seine Implementierung mit den Referenzen vergleichen lässt — nicht nur bestätigen lässt, dass sie baut.
Führe eine interaktive Sitzung aus und gib konkrete Einschränkungen statt einer Ein-Zeilen-Anfrage:
Halte Prompts klein und fokussiert, committe gute Iterationen und mache schlechte rückgängig (sage Trae CLI, wenn du rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
trae-cli interactive
# in der Sitzung:
> Implementiere das angehängte Referenzdesign in React + Vite + Tailwind + TypeScript.
Verwende meine vorhandenen Design-System-Komponenten und -Tokens wieder.
Gleiche Abstände, Layout und Hierarchie ab; mache es responsiv.
Starte den Dev-Server, rendere es im Browser und iteriere, bis es
den Referenzen über Breakpoints hinweg entspricht.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Konfiguration, Tools und Provider
Drei Erweiterungspunkte machen Trae CLI für kontinuierliche Designarbeit praktikabel, und alle drei lassen sich sauber auf einen offenen Design-Workflow abbilden.
Konfigurationsdatei: Trae CLI liest eine trae_config.yaml, die deinen Provider, dein Modell und deine Einstellungen festlegt — der dauerhafte, versionskontrollierbare Ort dafür, wie der Agent in einem Projekt läuft.
Provider-Auswahl: Da es viele Provider unterstützt (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, Ollama), leitest du Designarbeit an das Modell weiter, dem du vertraust, und tauschst es aus, ohne deinen Workflow neu zu verdrahten.
Integrierte Tools: Seine Tools zum Bearbeiten von Dateien, für die Shell und für strukturiertes Denken ermöglichen es ihm, Kontext zu sammeln, zu bauen, einen Dev-Server auszuführen und die Verifikationsschleife zu durchlaufen, ohne das Terminal zu verlassen.
Dies sind portable Fähigkeiten auf Agentenebene — genau die Art von Sache, für deren Orchestrierung über ACP OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.
Konfigurationsdatei: Trae CLI liest eine trae_config.yaml, die deinen Provider, dein Modell und deine Einstellungen festlegt — der dauerhafte, versionskontrollierbare Ort dafür, wie der Agent in einem Projekt läuft.
Provider-Auswahl: Da es viele Provider unterstützt (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, Ollama), leitest du Designarbeit an das Modell weiter, dem du vertraust, und tauschst es aus, ohne deinen Workflow neu zu verdrahten.
Integrierte Tools: Seine Tools zum Bearbeiten von Dateien, für die Shell und für strukturiertes Denken ermöglichen es ihm, Kontext zu sammeln, zu bauen, einen Dev-Server auszuführen und die Verifikationsschleife zu durchlaufen, ohne das Terminal zu verlassen.
Dies sind portable Fähigkeiten auf Agentenebene — genau die Art von Sache, für deren Orchestrierung über ACP OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.
Trae CLI vs. Codex vs. Claude Code vs. Cursor vs. Gemini CLI für Design
Es gibt keinen einzelnen Gewinner für Designarbeit — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:
Trae CLI — Open Source (MIT) und modellagnostisch; eigenen Provider-Schlüssel mitbringen, konfigurationsgetrieben und transparent — Teams, die einen kostenlosen, überprüfbaren Agenten und die Freiheit wollen, LLM-Anbieter zu wählen oder zu wechseln
Codex — Starke visuelle Politur mit einem Frontend-Skill; sandboxed asynchrone Builds — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Spezifische Designentscheidungen (Hex, Abstände, Typografie) und codebasierte UX — Frontend-Argumentation und Refactorings mit großem Kontext
Cursor — Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Enges Iterieren-und-Beobachten bei UI-Arbeiten in einer IDE
Gemini CLI — Starkes multimodales Bildverständnis und ein 1M-Token-Kontext; Open Source mit einer kostenlosen Stufe — Screenshot-lastige Arbeit und ein ganzes Design-System im Kontext halten
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle von ihnen fallen ohne Skills, Referenzen und Einschränkungen auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das es zu lösen gilt — und es hat die Form eines Design-Tools, nicht eines Modells.
Agent — Designstärke — Am besten für
Trae CLI — Open Source (MIT) und modellagnostisch; eigenen Provider-Schlüssel mitbringen, konfigurationsgetrieben und transparent — Teams, die einen kostenlosen, überprüfbaren Agenten und die Freiheit wollen, LLM-Anbieter zu wählen oder zu wechseln
Codex — Starke visuelle Politur mit einem Frontend-Skill; sandboxed asynchrone Builds — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Spezifische Designentscheidungen (Hex, Abstände, Typografie) und codebasierte UX — Frontend-Argumentation und Refactorings mit großem Kontext
Cursor — Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Enges Iterieren-und-Beobachten bei UI-Arbeiten in einer IDE
Gemini CLI — Starkes multimodales Bildverständnis und ein 1M-Token-Kontext; Open Source mit einer kostenlosen Stufe — Screenshot-lastige Arbeit und ein ganzes Design-System im Kontext halten
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle von ihnen fallen ohne Skills, Referenzen und Einschränkungen auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das es zu lösen gilt — und es hat die Form eines Design-Tools, nicht eines Modells.
Agent — Designstärke — Am besten für
Fallstricke und wie man dem „AI Slop“-Look entkommt
Die häufigste Beschwerde über KI-generiertes Design ist, dass es generisch aussieht — weiche Farbverläufe, schwebende Panels, übergroße abgerundete Ecken, dramatische Schatten, eine Inter-und-Lila-Stimmung, die „schreit, dass eine KI das gemacht hat“. Weitere gemeldete Probleme sind defekte mobile Layouts und Anweisungen, die in UI-Texte durchsickern. Nichts davon ist einzigartig für Trae CLI; es passiert, wenn ein Agent ohne kuratierten Designkontext läuft.
Füge einen Ästhetik-Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, anstatt auf den Standard-Look.
Verifiziere in einem echten Browser: Lass Trae CLI über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend kaputtgehen.
Gib Tokens und Referenzen an: Echte Design-Tokens und Referenz-Screenshots sind der größte Hebel für die Ausgabequalität.
Kodiere Regeln in deinem Repo: Platziere Stilregeln wie „keine Hero-Cards, maximal zwei Schriftarten, Marken-zuerst-Hierarchie“ dort, wo der Agent sie bei jedem Lauf liest.
Beachte, dass jede Abhilfe darin besteht, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext manuell pro Projekt zu pflegen, ist die Mühe, die OpenDesign beseitigt.
Füge einen Ästhetik-Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, anstatt auf den Standard-Look.
Verifiziere in einem echten Browser: Lass Trae CLI über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend kaputtgehen.
Gib Tokens und Referenzen an: Echte Design-Tokens und Referenz-Screenshots sind der größte Hebel für die Ausgabequalität.
Kodiere Regeln in deinem Repo: Platziere Stilregeln wie „keine Hero-Cards, maximal zwei Schriftarten, Marken-zuerst-Hierarchie“ dort, wo der Agent sie bei jedem Lauf liest.
Beachte, dass jede Abhilfe darin besteht, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext manuell pro Projekt zu pflegen, ist die Mühe, die OpenDesign beseitigt.
Designen mit Trae CLI in OpenDesign
OpenDesign ist die Open-Source-Design-Schicht, die der obige Workflow immer wieder verlangt. Trae CLI wird als First-Party-Adapter behandelt – angesteuert über das Agent Client Protocol (ACP) über seine trae-cli-Binary – und in eine kuratierte Skill- und Designsystem-Bibliothek, eine strukturierte Render-Pipeline und eine lokale Desktop-UI eingebettet, sodass der Designkontext, der Trae CLI gut macht, vom ersten Lauf an vorhanden ist und nicht jedes Mal manuell zusammengesetzt wird. Beide sind Open Source und Local-First, was die Kombination zu einer natürlichen Passung macht.
Authentifiziere dich mit deinem eigenen LLM-Anbieter-Schlüssel (BYOK) – Anmeldedaten bleiben auf deinem Rechner und werden niemals über uns geleitet.
Wähle ein Designsystem und einen Skill aus und generiere dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Trae CLI Agent, derselbe Anbieter-Schlüssel – plus ein echter, portabler, Open-Source-Design-Workflow drumherum. Er ist Local-First und Open Source, sodass weder deine Arbeit noch deine Anmeldedaten deinen Rechner verlassen.
Installiere OpenDesign und wähle Trae CLI als deinen Agenten aus.
Authentifiziere dich mit deinem eigenen LLM-Anbieter-Schlüssel (BYOK) – Anmeldedaten bleiben auf deinem Rechner und werden niemals über uns geleitet.
Wähle ein Designsystem und einen Skill aus und generiere dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Trae CLI Agent, derselbe Anbieter-Schlüssel – plus ein echter, portabler, Open-Source-Design-Workflow drumherum. Er ist Local-First und Open Source, sodass weder deine Arbeit noch deine Anmeldedaten deinen Rechner verlassen.
Installiere OpenDesign und wähle Trae CLI als deinen Agenten aus.
Ist OpenDesign mit ByteDance verbunden?
Nein. OpenDesign ist unabhängig; Trae ist eine Marke von ByteDance.