OpenCode für Design.

Was OpenCode wirklich ist

OpenCode ist ein quelloffener KI-Coding-Agent für das Terminal, gepflegt vom Team hinter SST (Anomaly Innovations). Es liest dein Repository, führt Befehle aus, bearbeitet Dateien und spricht mit einem großen Sprachmodell — doch anders als anbietergebundene Agenten liefert es kein eigenes Modell mit. Du richtest es auf den Provider und das Modell aus, das du willst, und bringst deinen eigenen Key mit.

Es läuft als Terminal-UI (TUI), mit einer Desktop-App und IDE-Erweiterungen auf derselben Engine. Unter der Haube nutzt es eine Client-/Server-Architektur, sodass der Agent, der die Arbeit erledigt, von der Oberfläche entkoppelt ist, über die du ihn steuerst. Zwei eingebaute Agenten — build und plan — wechselst du mit der Tab-Taste.

• Modell-agnostisch: Modelle und Provider kommen aus models.dev, einem offenen Katalog. Du konfigurierst sie in opencode.json mit einem provider/model-id-String und kannst Provider deaktivieren, die du nicht geladen haben willst — sodass derselbe Design-Workflow auf Anthropic, OpenAI, Google, OpenRouter, lokalen Modellen und mehr läuft.
• Anweisungsdatei: OpenCode liest eine AGENTS.md-Datei in deinem Projekt (den toolübergreifenden Standard, auch kompatibel mit CLAUDE.md) für Projektregeln — der natürliche Ort, um deine Design-Konventionen zu hinterlegen. Führe /init aus, um eine zu erzeugen.
• Erweiterbar: Es unterstützt LSP-Integration, MCP-Server, Themes, Tastenkürzel und eigene Befehle sowie teilbare Session-Links zur Zusammenarbeit.

• Betreuer: SST / Anomaly Innovations (quelloffenes Projekt)
• Zugangsdaten: deine eigenen API-Keys der Modell-Provider — BYOK, kein Vendor-Lock-in
• Lizenz: MIT, quelloffen

Warum ein offener Any-Model-Agent zu Designarbeit passt

OpenCode hat kein einzelnes „Design-Modell“ wie ein Anbieter-Agent — und das ist der Punkt. Weil es modell-agnostisch und offen ist, kannst du denselben Design-Workflow auf dem Modell laufen lassen, das gerade am besten im Frontend ist, es später tauschen oder auf ein lokales Modell zurückgreifen, alles ohne dein Setup zu ändern.

Aber die Modellwahl allein erkauft keinen Geschmack. Wie jeder Coding-Agent erzeugt OpenCode generische UI, solange du ihm keine Vorgaben machst. Guter Design-Output entsteht aus drei Eingaben, die du lieferst.

• Ein Designsystem: Echte tokens, Primitive und Konventionen, die der Agent wiederverwendet, sodass der Output zu einer Marke passt, statt zu einem generischen Look zurückzufallen.
• Eine ästhetische skill: Eine kuratierte skill, die echten Geschmack erzwingt — zurückhaltende Bewegung, markenorientierte Hierarchie, höchstens zwei Schriftarten und eine Akzentfarbe — und den Agenten dazu bringt, sich auf eine Richtung festzulegen, bevor er baut.
• Konkrete Referenzen: Echte Referenzbilder und mehrere Zustände (Desktop und Mobile, Hover, leer, ladend), nicht ein einzelner Hero-Shot.

Die Lektion: OpenCode gibt dir Modell-Freiheit, aber Geschmack entsteht weiterhin aus einem kuratierten Design-Kontext. Open Design bündelt genau diese Eingaben — deshalb passen die beiden zusammen: Beide sind quelloffen und local-first (mehr dazu weiter unten).

OpenCode für Designarbeit einrichten, von null

Hier ist der komplette Weg von einer frischen Maschine zu einem OpenCode, das UI bauen und verifizieren kann.

# 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 key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Hinterlege deine Designregeln: Schreibe deine tokens, Primitive und Konventionen in AGENTS.md (oder eine daraus referenzierte DESIGN.md), damit der Output zu einer Marke passt, statt zu einem generischen Look zurückzufallen. Die instructions-Option in opencode.json kann über globs auf zusätzliche Regeldateien verweisen.
• Wähle ein leistungsfähiges Modell: Weil OpenCode modell-agnostisch ist, wähle für den Design-Durchlauf den Provider / das Modell, das gerade am stärksten im Frontend ist — und lass den Rest deines Workflows unverändert.

Der Screenshot-zu-UI-Workflow

Die wirkungsvollste Design-Schleife mit jedem Agenten besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt. Dieselbe fünfstufige Form gilt in OpenCode.

1. Beginne mit den klarsten visuellen Referenzen, die du hast — und nimm mehrere Zustände auf (Desktop und Mobile, Hover, leer, ladend), nicht nur einen Hero-Shot.
2. Sei im Prompt konkret; vage Prompts erzeugen generische UI.
3. Bereite ein Designsystem vor und sag OpenCode, wo die tokens und kanonischen Primitive liegen (in AGENTS.md).
4. Lass einen Dev-Server laufen und lass den Agenten in einem echten Browser rendern, wobei er auf Breakpoints umstellt, um das Ergebnis zu prüfen.
5. Iteriere, indem du OpenCode seine Umsetzung mit den Screenshots abgleichen lässt — nicht bloß bestätigen, dass es baut.

Referenziere Dateien mit @ in der TUI für eine Fuzzy-Suche deines Arbeitsverzeichnisses, führe Shell-Befehle inline mit vorangestelltem ! aus und steuere Aktionen mit /-Befehlen. Prompte dann mit konkreten Vorgaben:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Halte Prompts klein und fokussiert, committe gute Iterationen und verwirf schlechte (und teile OpenCode mit, wenn du zurücksetzt), damit jeder Durchlauf auf einer sauberen Basis aufbaut.

AGENTS.md, MCP und teilbare Sessions

Drei Erweiterungspunkte machen OpenCode für nachhaltige Designarbeit praktisch, und alle drei bilden sauber einen offenen Design-Workflow ab.

• AGENTS.md-Regeln: Projektregeln liegen in einer AGENTS.md im Repo-Stamm (oder als globale Regeln in ~/.config/opencode/AGENTS.md). Es ist die dauerhafte Heimat für deine Design-Konventionen, wird bei jedem Durchlauf gelesen und ist mit den CLAUDE.md-Dateien kompatibel, die andere Agenten verwenden.
• MCP-Server: OpenCode unterstützt sowohl lokale (command) als auch entfernte (URL) MCP-Server, konfiguriert unter dem mcp-Schlüssel — der portable Weg, Design-Kontext und externe Tools einzubinden, die über Agenten hinweg funktionieren, nicht nur in OpenCode.
• Teilbare Sessions: Der /share-Befehl erstellt einen öffentlichen Link zu einer Konversation für Zusammenarbeit oder Review, und /unshare widerruft ihn — nützlich, um Feedback zu einem Design-Durchlauf einzuholen.

Das sind portable, agentenübergreifende Fähigkeiten — genau die Art Sache, die Open Design orchestrieren soll, statt sie pro Projekt neu zu erstellen.

OpenCode vs. Codex vs. Claude Code vs. Cursor 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:

Das wiederkehrende Urteil der Community lautet, dass Geschmack von Menschen kommt: Alle tendieren ohne skills, Referenzen und Vorgaben zu einer generischen Ästhetik. Das ist das eigentliche Problem, das es zu lösen gilt — und es hat die Form eines Design-Tools, nicht die eines Modells, was genau der Grund ist, warum ein offener Agent wie OpenCode so gut zu einer offenen Design-Schicht passt.

Fallstricke und wie du den „AI-Slop“-Look vermeidest

Die häufigste Klage über KI-generiertes Design lautet, dass es generisch aussieht — weiche Verläufe, schwebende Panels, übergroße runde Ecken, dramatische Schatten, eine Inter-und-Lila-Stimmung, die „schreit, dass eine KI das gemacht hat“. Weitere gemeldete Probleme sind kaputte Mobile-Layouts und Anweisungen, die in die UI-Texte durchsickern. Keines davon ist OpenCode-spezifisch; sie sind das, was passiert, wenn irgendein Agent ohne kuratierten Design-Kontext läuft.

• Füge eine ästhetische skill hinzu: Eine kuratierte Design-skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
• Verifiziere in einem echten Browser: Rendere und prüfe über Breakpoints hinweg, damit Layouts nicht stillschweigend auf Mobilgeräten brechen.
• Liefere tokens und Referenzen: Echte Design-tokens und Referenz-Screenshots sind der größte Einzelhebel für die Output-Qualität.
• Hinterlege Regeln in AGENTS.md: Schreibe Regeln im Stil „keine Hero-Cards, höchstens zwei Schriftarten, markenorientierte Hierarchie“ dorthin, wo der Agent sie bei jedem Durchlauf liest.

Beachte: Jede dieser Maßnahmen dreht sich darum, dem Agenten einen kuratierten Design-Kontext zu geben — unabhängig davon, welches Modell du laufen lässt. Diesen Kontext von Hand und pro Projekt zu pflegen, ist genau die Mühsal, die Open Design beseitigt.

Mit OpenCode in Open Design gestalten

Open Design ist die quelloffene Design-Schicht, nach der der obige Workflow immer wieder verlangt. Es behandelt OpenCode als First-Party-Adapter und umgibt es mit einer kuratierten skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI — sodass der Design-Kontext, der jeden Agenten gut macht, vom ersten Durchlauf an da ist, statt jedes Mal von Hand zusammengebaut zu werden. Beide Projekte sind quelloffen und local-first, was die Paarung zu einer natürlichen Wahl macht.

1. Installiere Open Design und wähle OpenCode als deinen Agenten.
2. Authentifiziere dich mit deinem eigenen API-Key des Modell-Providers (BYOK) — die Zugangsdaten bleiben auf deiner Maschine und werden niemals über uns geleitet.
3. Wähle einen beliebigen Provider und ein Modell, dazu ein Designsystem und eine skill, und erzeuge dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
4. Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.

Derselbe OpenCode-Agent, dieselbe Modell-Freiheit — plus ein echter, portabler, quelloffener Design-Workflow drumherum. Es ist local-first und Apache-2.0, sodass nichts an deiner Arbeit oder deinen Zugangsdaten deine Maschine verlässt.

Häufig gestellte Fragen

1. 01 Kann OpenCode wirklich Designarbeit leisten? +

   Ja — mit einer ästhetischen skill, einem Designsystem und echten Referenzbildern im Kontext liefert OpenCode produktionsreife, responsive UI und kann sie in einem Browser verifizieren. Weil es modell-agnostisch ist, lässt du das Modell laufen, das gerade am besten im Frontend ist. Ohne diesen kuratierten Kontext fällt es tendenziell auf einen generischen Look zurück — und genau diese Lücke schließt Open Design.

2. 02 Welches Modell sollte ich mit OpenCode für Design verwenden? +

   Welches du magst — OpenCode ist über models.dev provider-agnostisch, sodass du Anthropic, OpenAI, Google, OpenRouter oder lokale Modelle hinter demselben Workflow laufen lassen und jederzeit wechseln kannst. Die Qualität des Design-Outputs hängt weit mehr von deiner skill, deinem Designsystem und deinen Referenzen ab als vom Modell allein.

3. 03 Ist Open Design vom OpenCode- (SST-)Team gemacht? +

   Nein. Open Design ist ein unabhängiges quelloffenes Projekt, das OpenCode als Agenten integriert. Es ergänzt OpenCode um eine local-first, offene skill- und Designsystem-Bibliothek.

4. 04 Brauche ich ein spezielles Abo, um mit OpenCode zu gestalten? +

   Nein — OpenCode ist BYOK. Du bringst deinen eigenen API-Key des Modell-Providers mit, und Open Design leitet deine Zugangsdaten niemals weiter. Es gibt kein Vendor-Lock-in.

5. 05 OpenCode oder Codex oder Claude Code für Frontend-Design? +

   Alle sind stark, und viele Teams kombinieren sie. OpenCodes Vorteil ist, vollständig quelloffen und modell-agnostisch zu sein; Codex glänzt bei delegierten, sandboxed Builds; Claude Code ist bekannt für konkrete, codebasis-bewusste Designentscheidungen. Open Design lässt dich die Agenten wechseln, ohne deinen Design-Workflow zu ändern.

6. 06 Wie erweitere ich OpenCode um Design-Kontext? +

   Hinterlege Regeln in AGENTS.md, füge MCP-Server unter dem mcp-Schlüssel für portable Tools und Design-Kontext hinzu und nutze teilbare Sessions für Reviews. Open Design liefert eine kuratierte skill- und Designsystem-Bibliothek aus, sodass du das Setup pro Projekt überspringst.

7. 07 Ist Open Design mit OpenCode oder SST verbunden? +

   Nein. OpenCode ist ein quelloffenes Projekt, das von SST (Anomaly Innovations) gepflegt wird; Open Design ist ein unabhängiges quelloffenes Projekt, das es als First-Party-Adapter unterstützt.

8. 08 Sind meine Dateien und Zugangsdaten sicher? +

   Ja — Open Design ist local-first. Deine Dateien, Artefakte und DESIGN.md bleiben in deinem eigenen Repo, und deine Zugangsdaten des Modell-Providers werden direkt von deinem Agenten genutzt, niemals über Open-Design-Server geleitet.