OpenCode 
OpenDesign So gestalten Sie Interfaces mit OpenCode in OpenDesign: design.md wird gebunden, bevor irgendetwas generiert wird, der von Ihnen gewählte Provider, eine gemeinsame Inbox-Aufgabe vom Briefing bis zur geprüften Datei und die Grenzen, die Sie vor dem Start kennen sollten.
„Ein gemeinsamer Posteingang, aufgebaut auf
design.md, nicht auf Standardwerten.“
Drei Einstiege in diesen OpenCode-Leitfaden
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGHier ist der vollständige Weg von einem sauberen System bis zu einem OpenCode, das UI erstellen und verifizieren kann.
Zum Setup VERGLEICHWie sich OpenCode für Designarbeit von Codex, Claude Code und Cursor unterscheidet und wann sich ein anderer Workflow lohnt.
Zum VergleichEine vollständige OpenCode-Design-Aufgabe
Eine einzelne Aufgabe, end-to-end gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie vor dem Abschluss noch durchführen. Die unten gezeigte Oberfläche ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter OpenCode-Lauf.
BriefingEntwerfen Sie einen gemeinsamen Team-Posteingang: Konversationsliste mit Besitzern, eine Thread-Ansicht und eine rechte Seitenleiste mit Kundenkontext. Binden Sie das design.md-System vor der Generierung ein. Desktop und Smartphone.
data-od-id-HooksSchreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
Drei Bereiche im 8px-Raster; die Kontextleiste wird eingeklappt, bevor der Thread es wird.
Besitzer und Betreff zuerst; der Akzent markiert nur „Wartet auf uns“.
Liste, dann Thread bei Tap; die Kontextleiste wird zu einem Sheet.
Nach Besitzer filtern, einen Thread öffnen, die Leiste umschalten, eine Antwort senden.
Eignung
Kompatibilität
Dieser Leitfaden behandelt OpenCode, wie es über die OpenDesign-Desktop-App verbunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
OpenCode ist ein Open-Source-(MIT)-KI-Coding-Agent für das Terminal — ein TUI plus Desktop- und IDE-Oberflächen — betreut von Anomaly (dem SST-Team) unter github.com/anomalyco/opencode. Auf dieser Seite geht es um das Entwerfen von Interfaces mit OpenCode über OpenDesign, nicht um die eigene Oberfläche von OpenCode. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agenten auf.
Provider-Schlüssel über die OpenCode-Konfiguration (BYOK). OpenCode verwendet Ihre Provider-Schlüssel über die eigene Konfiguration (BYOK) — nichts wird weitergeleitet. Diese Seite garantiert kein Kontingent und keinen Preis.
Prüfen Sie die Download-Seite für Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Source-Quickstart gelten für die Ausführung aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible OpenCode-Version: hier nicht verifiziert.
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie anschließend eine kleine Aufgabe aus. Bestätigen Sie, dass OpenCode diese verarbeitet hat und dass sich das Artefakt öffnen lässt. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Laden Sie zuerst herunter, schließen Sie die OpenCode-Einrichtung für Ihre installierte Version ab und prüfen Sie danach ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesem Weg zu folgen.
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenFolgen Sie den OpenCode-Anweisungen in Ihrer installierten Version. OpenCode nutzt Ihre Provider-Keys über die eigene Konfiguration (BYOK) — nichts wird durchgeleitet.
# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode
# 2. Start the TUI in your project, then authenticate your provider
opencode # then run /login and pick your provider + paste your keyAus den OpenCode-Einrichtungshinweisen im veröffentlichten Guide; prüfen Sie die Hersteller-Dokumentation für den aktuellen Befehl.
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Erstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der OpenCode-Design-Workflow
Dieselbe Team-Posteingang-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie bereitstellen, was OpenCode macht, was OpenDesign beiträgt und was Sie prüfen.
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
OpenCode schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
data-od-id-Ziele für Kommentare und Änderungen bereit.Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
Ressourcen
Tutorials, Dokumentation und Walkthroughs zum Designen mit OpenCode, wie im veröffentlichten Guide aufgeführt.
Die Artefakttypen, die OpenCode in OpenDesign erzeugen kann, ein Skill pro Typ.
Marken-Tokens und Komponenten, die vor der Generierung durch OpenCode gebunden werden müssen.
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
FAQ
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den Ablauf, und bringen Sie dann das eigentliche Briefing ein. Wählen Sie die Option, die zu Ihrem Setup passt; die Seite erkennt dies nicht automatisch.