Codex
Workflow, Plugins und Slides für das Design von Oberflächen mit Codex.
Ihr Coding-Agent.Ein besserer Design-Workflow.
Workflow-Guides, Setup-Hinweise und Design-Ressourcen für 22 Coding-Agents, damit das Tool, das Sie bereits nutzen, aus einem Briefing eine durchdachte Oberfläche macht.
Drei Rollen in einem Coding-Agent-Design-Workflow
Was ein Design-Agent istEin Coding-Agent verwandelt Anweisungen in Code. Ein Design-Workflow ergänzt die Referenzen, Vorgaben und die Prüfung, die aus diesem Code eine nutzbare Oberfläche machen.
- 01Ihr Coding-Agent
- Liest das Projekt, nimmt Änderungen vor und reagiert auf Feedback. Nutzen Sie weiterhin das Tool, das Sie bereits verwenden.
- 02OpenDesign
- Der Workspace für Briefing, Design-Ressourcen und visuelle Prüfung. Jeder Agent-Guide erklärt das Setup.
- 03Ihr Urteilsvermögen
- Wählen Sie die Referenz, definieren Sie, was konsistent bleiben muss, und prüfen Sie das Ergebnis auf echten Bildschirmen.
Design-Workflow-Guides für 22 Coding-Agents
Beginnen Sie mit dem Tool, das Sie bereits nutzen. Jeder Guide beschreibt die Rolle des Agents, was Sie vorbereiten müssen, und den nächsten Schritt. Die Liste ist ein Verzeichnis, keine Rangliste.
Claude Code
Ein Frontend-Design-Workflow mit Claude Code, vom ersten Briefing bis zur finalen Review.
DeepSeek Harness
Das Harness-Setup, seine Rolle im Workflow und die Design-Ressourcen, die es nutzen kann.
OpenCode
Ein Design-Workflow rund um die Tools und Model-Provider, die Sie wählen.
Grok
Grok Build
Setup, Voraussetzungen und eine erste visuelle Design-Aufgabe mit Grok Build.
Cursor
Cursor Agent
Wie der Cursor-Editor und der Design-Workflow in einem Projekt zusammenwirken.
DeepSeek
DeepSeek TUI
Das DeepSeek TUI, seine Voraussetzungen und wie es sich vom DeepSeek Harness unterscheidet.
Hermes
Design-Ressourcen, Erweiterungsoptionen und Voraussetzungen für einen Hermes-Workflow.
Antigravity
Zuerst das Setup, dann ein Frontend-Design- und Review-Workflow mit Antigravity.
Kimi
Kimi CLI
Inputs, Kontext und Setup, die Sie vor einer ersten Design-Aufgabe mit Kimi CLI vorbereiten sollten.
Qwen
Qwen Code
Wie Qwen Code, der Model-Provider und der Design-Workflow zusammenhängen.
Trae CLI
Trae CLI-Setup und ein Ausgangspunkt für Interface-Design.
Qoder
Qoder CLI
Qoder CLI-Setup und der Design-Workflow, der es ergänzt.
Mistral Vibe
Mistral Vibe CLI
Die Mistral Vibe CLI als Design-Tool, abgegrenzt vom Vibe-Design im Allgemeinen.
Gemini
Gemini CLI
Ein referenzgeleiteter UI-Workflow mit Gemini CLI, vom Setup bis zur Review.
Copilot
GitHub Copilot CLI
Repository-Kontext und Review in einem Interface-Design-Workflow mit GitHub Copilot CLI.
Kilo
Konfiguration, Modi und ein praktischer Ausgangspunkt für Design mit Kilo.
Aider
Starten Sie mit Aider von bestehendem Code aus, nehmen Sie eine bewusste Änderung vor und prüfen Sie den Unterschied.
Setup, Erweiterungen und Design-Ressourcen für Pi.
Kiro
Kiro CLI
Wo Anforderungen und Interface-Entscheidungen in einen Kiro CLI-Workflow passen.
Devin
Devin for Terminal
Die Aufgabe rahmen, die Übergabe definieren und das Interface mit Devin for Terminal prüfen.
Reasonix
DeepSeek Reasonix
Das Projekt und seine Zusammenhänge verstehen und wissen, wo Sie mit DeepSeek Reasonix beginnen.
OpenDesign herunterladen und Ihren Coding-Agent verbinden
- 01
OpenDesign herunterladen
Wählen Sie den Build für macOS oder Windows und öffnen Sie die App.
- 02
Ihren Agent verbinden
Prüfen Sie die Voraussetzungen im obigen Guide und schließen Sie das dort beschriebene Setup ab.
- 03
Erste Aufgabe starten
Bringen Sie eine Referenz, ein kurzes Briefing oder eine Vorlage aus den untenstehenden Ressourcen mit.
Design-Ressourcen für Coding-Agents
Coding-Agents, Modelle und Skills erklärt
Für diesen Workflow benötigen Sie keinen neuen Coding-Agent. Diese Antworten erläutern die Begriffe und verweisen auf die zugehörigen Seiten.
Muss ich den Agent wechseln?
Nein. Beginnen Sie mit dem Leitfaden für Ihr aktuelles Tool. Die Einrichtung und die verfügbaren Funktionen hängen von diesem Tool und dessen Version ab; das Verzeichnis nimmt keine Rangfolge vor.
Sind Agents, Modelle und Skills dasselbe?
Nein. Ein Modell liefert das Reasoning, ein Agent führt die Aufgabe aus, und ein Skill stellt eine wiederverwendbare Arbeitsweise bereit. Das Skills-Verzeichnis listet diese letzte Ebene auf.
Ich vergleiche Design-Tools. Wo finde ich das?
Nutzen Sie die Tool-Vergleiche für Fragen zu Ersatz und Koexistenz. Diese Agent-Leitfäden erklären die Arbeit mit einem Tool, das Sie bereits verwenden.
Was sollte meine erste Aufgabe sein?
Wählen Sie eine kleine Oberfläche aus und bringen Sie eine Referenz mit. Prüfen Sie deren Layout, eine Interaktion und eine schmale Bildschirmbreite, bevor Sie erweitern. Eine Vorlage kann Ihnen einen Ausgangspunkt bieten.
Beginnen Sie mit dem Coding-Agent, den Sie bereits nutzen
Desktop-Builds für macOS und Windows. Speichern Sie den Einrichtungsleitfaden auf dem Smartphone und setzen Sie die Arbeit auf Ihrem Desktop fort.
OpenDesign herunterladen Hinweise zur Einrichtung