WEITERE LEKTÜRE
Weiterführende Lektüre zu Hermes
Tutorials, Dokumentation und Walkthroughs für Designarbeit mit Hermes, wie im veröffentlichten Leitfaden aufgeführt.
Hermes 
OpenDesign Mit Hermes
in OpenDesign
gestalten.
So gestalten Sie Interfaces mit Hermes in OpenDesign: ein Plan, den Sie vor der Ausführung freigeben, der Provider-Key, den Sie selbst besitzen, eine Support-Postfach-Aufgabe vom Briefing bis zur geprüften Datei, und die Grenzen, die Sie vorab kennen sollten.
DREI AUSGANGSPUNKTE FÜR HERMES
Wählen Sie Ihren Einstiegspunkt für Hermes
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche mit Hermes erstellen
Was folgt: ein Brief, Referenzen, Designregeln und ein HTML-Ergebnis, das Sie prüfen.
Diese Anleitung lesen EINRICHTUNGHermes von Grund auf einrichten
Der komplette Weg von einem frischen Rechner zu einem Hermes-Setup, das UI erstellt und verifiziert.
Zum Setup VERGLEICHHermes mit anderen Agents vergleichen
Wo Hermes bei Designaufgaben von Codex, Claude Code und Cursor abweicht und wann ein anderer Workflow die bessere Wahl ist.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Hermes-Design-Aufgabe
Vom Brief zur Oberfläche: Eine Hermes-Designaufgabe
Eine Aufgabe vollständig durchgeführt: der Brief und die Vorgaben, die Sie liefern, das zurückgegebene Artefakt und die Prüfungen, die Sie durchführen, bevor Sie sie als fertig bezeichnen. Die folgende Oberfläche ist ein veranschaulichendes Beispiel für diese Seite, keine aufgezeichnete Hermes-Sitzung.
1Design-Briefing und Vorgaben
BriefingEntwerfen Sie ein Support-Postfach für ein kleines Team: eine nach Priorität sortierte Konversationsliste, eine Thread-Ansicht mit Antwortvorschlägen und Schnellaktionen. Zuerst Layout planen; danach ausführen. Desktop und Telefon.
- Design-SystemOpenDesign Papier-Canvas: Albert Sans als Schrift, ein grüner Akzent
- Breakpoints1440px Desktop, 390px Mobil, ohne horizontales Scrollen
- InteraktionenFiltern, Thread-Wechsel, Zuweisen, Snooze, Antworten
- AusgabeEine eigenständige HTML-Datei mit stabilen
data-od-id-Hooks
2Wer macht was: Sie, Hermes und OpenDesign
- Sie
Den Brief schreiben, das Designsystem wählen und die Abnahmekriterien festlegen.
- Hermes
Plant das Layout, schreibt das HTML, CSS und JavaScript und überarbeitet dann auf Anfrage.
- OpenDesign
Stellt das Designsystem und den Skill bereit, rendert die Vorschau und hält jede Version als Datei im Projekt.
- Prüfung
Prüfen Sie vor der Übergabe die visuelle Hierarchie, die Abstände im 8px-Raster, beide Breakpoints und jede Interaktion.
3Hermes-Artefakt: Support-Postfach bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Liste und Thread liegen im 8px-Raster; die Listenspalte hat eine feste Breite, sodass Betreffzeilen nicht umbrechen.
Hierarchie
Visuelle Hierarchie
Absender und Betreff führen, die Vorschau folgt; der Akzent ist dringenden Einträgen vorbehalten.
Responsive
Mobiles Layout
Die Liste kommt zuerst, der Thread öffnet sich beim Tippen; Filter werden zu einem Segmentumschalter.
Interaktion
Interaktionsprüfungen
Auf dringend filtern, einen Thread öffnen, ihn zuweisen und dann die vorgeschlagene Antwort senden.
Eignung
Wann Hermes die richtige Wahl ist — und wann nicht
Hermes passt, wenn
- Autonomes Planen und Ausführen. Hermes plant, baut und übergibt UI-Arbeit an Subagenten, wodurch ein Designziel in responsives Markup umgesetzt und das Ergebnis verifiziert wird.
- Anbieterunabhängiges BYOK. xAI Grok ist der Standard, mit OpenAI, Anthropic und vielen weiteren verfügbar — wählen Sie das Reasoning-Modell für die Aufgabe ohne Anbieterbindung.
- Skills + MCP. Wiederverwendbare Skills halten Ihre Konventionen fest; ein Figma-MCP-Server holt echten Designkontext in den Code.
- Offen und selbst gehostet. MIT-lizenziert, läuft auf Ihrem eigenen Rechner, ohne Telemetrie und ohne Cloud-Abhängigkeit.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Die Ausgabe ist HTML, kein bearbeitbares Designdokument. Für Ihr erforderliches Asset-Format sehen Sie sich einen separaten Vektor-Workflow an.
- Sie haben keine Referenz und keine Vorgaben. Ohne Designsystem oder Beispiele neigt die Ausgabe zum Generischen; schreiben Sie zuerst den Brief.
- Sie haben nicht die Anmeldedaten, die dieser Agent benötigt. Erforderlich: Anbieterschlüssel über BYOK — xAI (Grok, Standard), OpenAI oder Anthropic. OpenDesign stellt keine Anmeldedaten bereit und fungiert nicht als Proxy dafür.
- Ihr Team arbeitet in Grok oder OpenCode. Diese Agenten haben eigene Seiten; das Setup unterscheidet sich, selbst wenn sich der Workspace überschneidet. Siehe verwandte Agenten.
Kompatibilität
Hermes-Voraussetzungen vor dem Start
Diese Seite behandelt Hermes als über die OpenDesign-Desktop-App verbunden. Referenzen geprüft am 6. September 2026.
Tool-UmfangHermes, von Nous Research
Hermes ist der quelloffene (MIT) autonome Terminal-Agent von Nous Research. Er läuft dauerhaft auf Ihrem eigenen Rechner, liest Ihre Codebasis, bearbeitet Dateien, führt Befehle aus und plant und delegiert mehrstufige Arbeit an isolierte Subagenten. Diese Seite befasst sich mit dem Entwerfen von Oberflächen mit Hermes über OpenDesign, nicht mit Hermes’ eigener Oberfläche. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agenten auf.
Konten und AuthentifizierungAnbieterschlüssel über BYOK — xAI (Grok,
Anbieterschlüssel über BYOK — xAI (Grok, Standard), OpenAI oder Anthropic. Authentifizieren Sie sich mit Ihrem eigenen Anbieterschlüssel (BYOK) — standardmäßig xAI Grok oder OpenAI oder Anthropic — die Anmeldedaten bleiben auf Ihrem Rechner. Hier werden kein Kontingent und kein Preis zugesagt.
System und VersionenDesktop-App oder Quellcode
Auf der Download-Seite finden Sie Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quell-Schnellstart gelten beim Ausführen aus dem Quellcode, nicht bei der Installation eines Desktop-Pakets. Minimale kompatible Hermes-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Verwenden Sie die Verbindungsanweisungen, die Ihre installierte Version anzeigt, und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Hermes sie bearbeitet hat und das Artefakt sich öffnet. Ein alleiniger Download beweist keine funktionierende Verbindung.
Mit der Desktop-App beginnen
Hermes-Setup in drei Schritten
Beginnen Sie mit dem Download, schließen Sie das Hermes-Setup für Ihre installierte Version ab und verifizieren Sie dann ein kleines Ergebnis. Für diesen Weg ist es nicht erforderlich, OpenDesign aus dem Quellcode zu bauen.
- 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. Wenn sie bereits installiert ist, fahren Sie fort; ein zweiter Download ist nicht nötig. - 2
Bereiten Sie Ihre Hermes-Verbindung vor
Befolgen Sie die Hermes-Anweisungen, die Ihrer installierten Version beiliegen. Authentifizieren Sie sich mit Ihrem eigenen Anbieterschlüssel (BYOK) — standardmäßig xAI Grok oder OpenAI oder Anthropic — die Anmeldedaten bleiben auf Ihrem Rechner.
xAI Grok mit Hermes verbinden (OAuth)# 1. Install Hermes (one-line installer from Nous Research) curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash # 2. Run the setup wizard hermes setup # 3. Add a provider and authenticate (BYOK) # default is xAI Grok; OpenAI / Anthropic also supported hermes auth add # add a provider key or run its OAuth flow hermes model # pick the provider and model (grok-4.3 by default)Quelle: Hermes-Setup-Hinweise im veröffentlichten Leitfaden; überprüfen Sie den aktuellen Befehl in der Herstellerdokumentation.
MEILENSTEINBestätigen Sie den beabsichtigten Agenten und das Konto. Wenn eines davon nicht verfügbar ist, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Hermes-Aufgabe aus
Halten Sie den ersten Brief bescheiden, damit Sie den gesamten Ablauf einschließlich einer Überarbeitung beurteilen können.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Befolgen Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherzustand und fordern Sie eine konkrete Änderung an. Die Prüfung beginnt mit der generierten Datei; sie endet dort nicht.
Um OpenDesign stattdessen aus dem Quellcode auszuführen, verwenden Sie den technischen Schnellstart.
Der Hermes-Design-Workflow
Ein Hermes-Design-Durchlauf in fünf Schritten
Folgen Sie dem Support-Postfach-Beispiel vom Brief bis zum verifizierten HTML. Jeder Schritt behandelt Ihren Input, den Plan-und-Ausführen-Durchlauf von Hermes, den Beitrag von OpenDesign und die Prüfung, die Sie verantworten.
- 1
Design-Briefing
Halten Sie es einfach: drei bis sechs Zeilen, die Zielgruppe, Zweck des Bildschirms und Zielplattformen nennen.
- SieEntwerfen Sie den Brief; fügen Sie einen Referenz-Screenshot hinzu, wenn verfügbar.
- HermesParst den Brief und die Projektanweisungsdatei; fragt bei unklaren Punkten nach.
- OpenDesignStellt den Projekt-Workspace, die Prompt-Oberfläche und den zum Artefakttyp passenden Skill bereit.
- PrüfenStellen Sie sicher, dass Abnahmekriterien im Brief stehen. Lücken vor der Generierung zu erkennen kostet weniger als die Überarbeitung danach.
- 2
Design-Vorgaben
Bringen Sie ein Designsystem und feste Regeln mit. Diese Eingaben hindern Hermes daran, auf eine generische Ästhetik zurückzufallen.
- SieWählen Sie ein Designsystem; nennen Sie Breakpoints und erforderliche Komponenten.
- HermesLiest DESIGN.md-Tokens und Grundsatzregeln in den Kontext ein, bevor Markup erzeugt wird.
- OpenDesignLiefert die Designsystem-Bibliothek und bindet Ihr ausgewähltes System an die Skill-Vorlage.
- PrüfenPrüfen Sie Tokens gegen Ihre Marke: ein Akzent, korrekte Schriften, korrekter Radius.
- 3
Die Oberfläche generieren
Hermes erzeugt ein eigenständiges HTML-Artefakt: Layout, Stile, Interaktionen und stabile Hooks.
- SieWarten Sie oder beantworten Sie eine Rückfrage. Hier ist keine Konfiguration nötig.
- HermesPlant Abschnitte, schreibt HTML, CSS und JavaScript, führt das Artefakt aus und behebt Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indiziert es für die Vorschau.
- PrüfenWarten Sie ab. Bewerten Sie die gerenderte Datei, nicht den Quellcode.
- 4
Vorschau
OpenDesign rendert die Datei in den von Ihnen angeforderten Breiten. In dieser Vorschau findet die gestalterische Beurteilung statt.
- SieBreiten ändern, Interaktionen ausprobieren, direkt an Elementen kommentieren.
- HermesLiest Vorschaukommentare und bereitet die nächste Revision vor.
- OpenDesignRendert die Vorschau und macht
data-od-id-Ziele für Kommentare und Bearbeitungen verfügbar. - PrüfenPrüfen Sie Hierarchie, Kontrast, 390px-Überlauf, Fokuszustände und sparsame Akzentverwendung.
- 5
Überarbeiten und Verifizieren
Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Revision wird als neue Datei abgelegt; nichts wird stillschweigend überschrieben.
- SieWandeln Sie Kommentare in Anforderungen um; entscheiden Sie, wann die Arbeit fertig ist.
- HermesWendet Änderungen direkt an und führt das Artefakt erneut aus.
- OpenDesignHält Versionen nebeneinander; exportieren Sie bei Fertigstellung ein Bild oder das HTML.
- PrüfenPrüfen Sie nur den geänderten Bereich erneut, dann die ganze Seite einmal pro Breakpoint.
Ressourcen
Hermes-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Artefakttypen, die Hermes in OpenDesign erzeugen kann, mit einem Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die vor der Generierung durch Hermes gebunden werden müssen.
Vorlagen
Ausgangspunkte für Decks, Landing Pages und Produktbildschirme.
Einschränkungen
Grenzen von Hermes, manuelle Prüfungen und Fallbacks
- UmfangHermes ist anbieterunabhängig und BYOK: standardmäßig xAI Grok, plus OpenAI, Anthropic und viele andere Anbieter. Sie wählen das Modell, das über Ihr Design nachdenkt. Diese Seite behandelt Hermes verbunden mit OpenDesign, nicht jede Hermes-Funktion.
- NutzungslimitsGrenzen und Kosten richten sich nach den von Ihnen bereitgestellten Zugangsdaten (Provider-Schlüssel über BYOK — xAI (Grok, Standard), OpenAI oder Anthropic). Hier wird kein Anspruch auf ein kostenloses Kontingent erhoben.
- NetzwerkLokale Projektdateien machen die Inferenz nicht offline. Bevor Sie sensible Eingaben teilen, prüfen Sie Hermes’ Anbieter-Einstellungen und Datenrichtlinien.
- Ausgabe ist HTMLDie Ausgabe ist HTML, keine Vektor-Designdatei.
- Manuelle ÜberprüfungSie prüfen Barrierefreiheit, echte Inhalte, Markenpassung und Interaktionskorrektheit in der Vorschau. Betrachten Sie die Selbstprüfung des Agenten nur als ersten Durchlauf.
- FallbackWenn Hermes nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanweisungen und die Authentifizierung Ihrer installierten Version. Bewahren Sie den Fehler und das letzte funktionierende Artefakt auf, bevor Sie die Konfiguration ändern.
FAQ
Häufige Fragen zu Hermes und OpenDesign
Übernimmt Hermes tatsächlich Designarbeit?
Ja — mit einer ästhetischen Skill, einem Design-System und echten Referenzbildern im Kontext erzeugt Hermes produktionsreife, responsive UI, und als autonomer Agent kann es Ausgaben selbstständig rendern und gegen Referenzen verifizieren. Ohne diesen Kontext tendiert es zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Welche Modelle und Keys verwendet Hermes?
Hermes ist anbieterunabhängig und funktioniert nach dem Bring-your-own-Key-Prinzip. Standardmäßig nutzt es xAI Grok (zum Beispiel grok-4.3), unterstützt aber auch OpenAI, Anthropic, OpenRouter und viele weitere Anbieter — Sie fügen einen Provider-Key hinzu (oder führen dessen OAuth-Flow aus) mit hermes auth add und wählen ein Modell mit hermes model. OpenDesign leitet Ihre Zugangsdaten niemals weiter.
Warum eignet sich Hermes besonders für Design?
Zwei Dinge: Es ist wirklich autonom, plant, baut und prüft UI, statt auf zeilenweise Anweisungen zu warten; und es ist anbieterunabhängig, sodass Sie das Reasoning-Modell nutzen können, dem Sie vertrauen. Beides hilft — doch der Geschmack kommt weiterhin aus dem Design-System, dem Skill und den Referenzen, die Sie bereitstellen.
Hermes vs. Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für spezifische, codebasis-bewusste Designentscheidungen; Hermes’ Stärke liegt in autonomem Plan-and-Execute plus Anbieterwahl — Sie können Hermes sogar mit einem Anthropic-Key betreiben. Viele Teams nutzen beide — OpenDesign erlaubt es, den Agent zu wechseln, ohne den Design-Workflow zu ändern.
Wie kann ich Hermes mit Figma verbinden?
Fügen Sie in Hermes’ Tool-Konfiguration einen Figma-MCP-Server hinzu. Hermes kann dann echten Design-Kontext abrufen — Komponenten, Variablen, Layout-Daten —, sodass der generierte Code der Quelle entspricht statt sie nur anzunähern.
Was Hermes tatsächlich ist
Hermes ist ein quelloffener (MIT) autonomer KI-Agent von Nous Research. Er läuft dauerhaft auf Ihrer eigenen Maschine oder Ihrem Server, liest Ihr Repository, bearbeitet Dateien, führt Shell-Befehle aus, durchsucht das Web und – entscheidend – plant und führt mehrstufige Arbeit eigenständig aus und delegiert Teile an isolierte Subagenten. Er ist ein autonomer Agent, kein an eine IDE gebundener Copilot.
Für Designarbeit stechen zwei Eigenschaften hervor. Er ist wirklich agentisch, sodass Sie ihm ein Ziel übergeben können und er plant, baut und verifiziert, statt auf Zeile-für-Zeile-Anweisungen zu warten. Und er ist anbieterunabhängig: Sie bringen Ihren eigenen Schlüssel mit, standardmäßig xAI Grok, können ihn aber auf OpenAI, Anthropic oder jeden anderen unterstützten Endpunkt richten – so steuern Sie, welches Modell über Ihr Design nachdenkt.
Skills: Hermes baut Skills auf und verwendet sie wieder – prozedurales Gedächtnis, das er aus Erfahrung erstellt – der natürliche Ort, um Ihre Designkonventionen, Tokens und Review-Checklisten festzuhalten, damit sie über Läufe hinweg bestehen bleiben.
Subagenten + Tools: Er startet isolierte Subagenten für parallele Arbeitsstränge und bringt Werkzeuge für Dateien, Shell, Web und Browser mit, sodass er Referenzen sammeln und eine Build-and-Verify-Schleife durchlaufen kann, ohne das Terminal zu verlassen.
Bring your own key: Hermes verwendet standardmäßig xAI Grok und unterstützt OpenAI, Anthropic, OpenRouter und viele weitere Anbieter über BYOK – legen Sie einen Schlüssel fest oder durchlaufen Sie einen OAuth-Flow und wählen Sie Ihr Modell.
Zugangsdaten: Anbieterschlüssel über BYOK – xAI (Grok, Standard), OpenAI oder Anthropic – hinzugefügt mit hermes auth add
Anbieter: Nous Research
Lizenz: MIT, Open Source
Für Designarbeit stechen zwei Eigenschaften hervor. Er ist wirklich agentisch, sodass Sie ihm ein Ziel übergeben können und er plant, baut und verifiziert, statt auf Zeile-für-Zeile-Anweisungen zu warten. Und er ist anbieterunabhängig: Sie bringen Ihren eigenen Schlüssel mit, standardmäßig xAI Grok, können ihn aber auf OpenAI, Anthropic oder jeden anderen unterstützten Endpunkt richten – so steuern Sie, welches Modell über Ihr Design nachdenkt.
Skills: Hermes baut Skills auf und verwendet sie wieder – prozedurales Gedächtnis, das er aus Erfahrung erstellt – der natürliche Ort, um Ihre Designkonventionen, Tokens und Review-Checklisten festzuhalten, damit sie über Läufe hinweg bestehen bleiben.
Subagenten + Tools: Er startet isolierte Subagenten für parallele Arbeitsstränge und bringt Werkzeuge für Dateien, Shell, Web und Browser mit, sodass er Referenzen sammeln und eine Build-and-Verify-Schleife durchlaufen kann, ohne das Terminal zu verlassen.
Bring your own key: Hermes verwendet standardmäßig xAI Grok und unterstützt OpenAI, Anthropic, OpenRouter und viele weitere Anbieter über BYOK – legen Sie einen Schlüssel fest oder durchlaufen Sie einen OAuth-Flow und wählen Sie Ihr Modell.
Zugangsdaten: Anbieterschlüssel über BYOK – xAI (Grok, Standard), OpenAI oder Anthropic – hinzugefügt mit hermes auth add
Anbieter: Nous Research
Lizenz: MIT, Open Source
Warum ein autonomer Multi-Provider-Agent zu Design passt
Der Design-Vorsprung von Hermes kommt aus zwei Eigenschaften – doch wie bei jedem Agenten muss der Geschmack dennoch geliefert werden.
Autonomes Plan-and-Execute: Weil Hermes eigenständig plant, ausführt und delegiert, kann es ein Designziel aufnehmen – diese Referenz treffen, das Ganze responsiv machen – und darauf hinarbeiten, statt dass jeder einzelne Schritt vorgegeben werden muss.
Bringen Sie das Modell mit, dem Sie vertrauen: Anbieterunabhängiges BYOK bedeutet, Sie wählen das Reasoning-Modell für die Aufgabe: standardmäßig xAI Grok oder OpenAI- und Anthropic-Modelle, wenn Sie deren Stärken wollen – kein Lock-in auf die Ästhetik eines Anbieters.
Konventionen in Skills: Skills (plus ein MCP-Server wie Figma) richten den Agenten auf Ihre Tokens, Komponenten und echten Specs aus, sodass er gegen eine Marke arbeitet statt gegen einen Standard-Look.
Geschmack kommt aus drei Inputs, die Sie liefern: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Hermes hat nicht von sich aus Geschmack. Es liefert gutes Design, wenn Sie ihm Vorgaben machen – ein Designsystem, einen Ästhetik-Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr dazu unten).
Autonomes Plan-and-Execute: Weil Hermes eigenständig plant, ausführt und delegiert, kann es ein Designziel aufnehmen – diese Referenz treffen, das Ganze responsiv machen – und darauf hinarbeiten, statt dass jeder einzelne Schritt vorgegeben werden muss.
Bringen Sie das Modell mit, dem Sie vertrauen: Anbieterunabhängiges BYOK bedeutet, Sie wählen das Reasoning-Modell für die Aufgabe: standardmäßig xAI Grok oder OpenAI- und Anthropic-Modelle, wenn Sie deren Stärken wollen – kein Lock-in auf die Ästhetik eines Anbieters.
Konventionen in Skills: Skills (plus ein MCP-Server wie Figma) richten den Agenten auf Ihre Tokens, Komponenten und echten Specs aus, sodass er gegen eine Marke arbeitet statt gegen einen Standard-Look.
Geschmack kommt aus drei Inputs, die Sie liefern: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Hermes hat nicht von sich aus Geschmack. Es liefert gutes Design, wenn Sie ihm Vorgaben machen – ein Designsystem, einen Ästhetik-Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr dazu unten).
Hermes für Designarbeit von Grund auf einrichten
Der Ablauf beim Setup: installieren → einen Anbieterschlüssel hinzufügen → Designregeln in einem Skill festhalten → ein Designsystem hinzufügen → Browser-Verifikation aktivieren.
Kodieren Sie Ihre Designregeln: Fassen Sie Ihre Tokens, Primitives und Konventionen in einem Hermes-Skill zusammen und richten Sie den Agenten darauf aus, damit die Ausgabe zu einer Marke passt, statt in einen generischen Look zu verfallen.
Browser-Verifikation hinzufügen: Verdrahten Sie ein Playwright- oder Browser-MCP, damit Hermes in einem echten Browser rendert und seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build durchläuft.
Nutzen Sie den aktuellen Setup-Abschnitt für Befehle und versionsspezifische Details, die sich ändern können.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Kodieren Sie Ihre Designregeln: Fassen Sie Ihre Tokens, Primitives und Konventionen in einem Hermes-Skill zusammen und richten Sie den Agenten darauf aus, damit die Ausgabe zu einer Marke passt, statt in einen generischen Look zu verfallen.
Browser-Verifikation hinzufügen: Verdrahten Sie ein Playwright- oder Browser-MCP, damit Hermes in einem echten Browser rendert und seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build durchläuft.
Nutzen Sie den aktuellen Setup-Abschnitt für Befehle und versionsspezifische Details, die sich ändern können.
# 1. Hermes installieren (Ein-Zeilen-Installer von Nous Research)
curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash
# 2. Den Setup-Assistenten ausführen
hermes setup
# 3. Einen Anbieter hinzufügen und authentifizieren (BYOK)
# Standard ist xAI Grok; OpenAI / Anthropic werden ebenfalls unterstützt
hermes auth add # einen Anbieterschlüssel hinzufügen oder dessen OAuth-Flow ausführen
hermes model # Anbieter und Modell wählen (standardmäßig grok-4.3)
# 4. Einen Figma-MCP-Server einbinden (optional, für Design-Übergabe)
# in den MCP-/Tool-Einstellungen von Hermes konfigurierenHistorisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Der Workflow von Screenshot zu UI
Der wirkungsvollste Design-Loop mit Hermes ist, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt – wobei der autonome Agent den Build plant und seine Ausgabe mit der Referenz vergleicht.
Beginnen Sie mit den klarsten visuellen Referenzen, die Sie haben – und beziehen Sie mehrere Zustände ein (Desktop und Mobil, Hover, leer, Laden), nicht nur einen Hero-Shot.
Seien Sie im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.
Halten Sie Ihr Designsystem und Ihre Konventionen in einem Skill fest und sagen Sie Hermes, wo die Tokens und kanonischen Primitives liegen.
Starten Sie einen Dev-Server und lassen Sie Hermes in einem echten Browser rendern und auf Breakpoints verkleinern, um das Ergebnis zu prüfen.
Iterieren Sie, indem Hermes seine Implementierung mit den Screenshots vergleicht – nicht nur bestätigt, dass sie baut.
Richten Sie Hermes auf Ihre Referenzen aus und geben Sie konkrete Vorgaben:
Halten Sie Prompts klein und fokussiert, committen Sie gute Iterationen und machen Sie schlechte rückgängig (sagen Sie Hermes, wenn Sie etwas zurücksetzen), damit jeder Durchgang auf einer sauberen Basis aufbaut.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Beginnen Sie mit den klarsten visuellen Referenzen, die Sie haben – und beziehen Sie mehrere Zustände ein (Desktop und Mobil, Hover, leer, Laden), nicht nur einen Hero-Shot.
Seien Sie im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.
Halten Sie Ihr Designsystem und Ihre Konventionen in einem Skill fest und sagen Sie Hermes, wo die Tokens und kanonischen Primitives liegen.
Starten Sie einen Dev-Server und lassen Sie Hermes in einem echten Browser rendern und auf Breakpoints verkleinern, um das Ergebnis zu prüfen.
Iterieren Sie, indem Hermes seine Implementierung mit den Screenshots vergleicht – nicht nur bestätigt, dass sie baut.
Richten Sie Hermes auf Ihre Referenzen aus und geben Sie konkrete Vorgaben:
Halten Sie Prompts klein und fokussiert, committen Sie gute Iterationen und machen Sie schlechte rückgängig (sagen Sie Hermes, wenn Sie etwas zurücksetzen), damit jeder Durchgang auf einer sauberen Basis aufbaut.
hermes
# im Prompt:
> reference-desktop.png und reference-mobile.png in diesem Ordner verwenden.
Dieses Design in React + Vite + Tailwind + TypeScript umsetzen.
Meine vorhandenen Designsystem-Komponenten und Tokens aus meinem Skill wiederverwenden.
Abstände, Layout und Hierarchie treffen; es responsiv machen.
Im Browser rendern und iterieren, bis es den Referenzen
über Breakpoints hinweg entspricht.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Skills, Subagenten und Anbieter
Drei Erweiterungspunkte machen Hermes für dauerhafte Designarbeit praktikabel, und alle drei fügen sich sauber in einen offenen Design-Workflow ein.
Skills: Hermes baut Skills auf und verwendet sie wieder – prozedurales Gedächtnis, das aus Erfahrung entsteht. Sie sind das dauerhafte Zuhause für Ihre Designkonventionen und werden bei späteren Läufen angewendet, statt jedes Mal neu erklärt zu werden.
Subagenten und MCP: Er delegiert Arbeit an isolierte Subagenten und unterstützt MCP-Server – der portable Weg, Designkontext und externe Tools einzubringen, am relevantesten ein Figma-MCP-Server, die agentenübergreifend funktionieren, nicht nur mit Hermes.
Anbieterwahl: Weil Hermes anbieterunabhängig ist (standardmäßig xAI Grok, OpenAI und Anthropic über BYOK), können Sie das Modell an die Aufgabe anpassen, ohne Ihren Workflow neu aufzubauen.
Das sind portable Multi-Agent-Fähigkeiten – genau die Art von Sache, für deren Orchestrierung OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.
Skills: Hermes baut Skills auf und verwendet sie wieder – prozedurales Gedächtnis, das aus Erfahrung entsteht. Sie sind das dauerhafte Zuhause für Ihre Designkonventionen und werden bei späteren Läufen angewendet, statt jedes Mal neu erklärt zu werden.
Subagenten und MCP: Er delegiert Arbeit an isolierte Subagenten und unterstützt MCP-Server – der portable Weg, Designkontext und externe Tools einzubringen, am relevantesten ein Figma-MCP-Server, die agentenübergreifend funktionieren, nicht nur mit Hermes.
Anbieterwahl: Weil Hermes anbieterunabhängig ist (standardmäßig xAI Grok, OpenAI und Anthropic über BYOK), können Sie das Modell an die Aufgabe anpassen, ohne Ihren Workflow neu aufzubauen.
Das sind portable Multi-Agent-Fähigkeiten – genau die Art von Sache, für deren Orchestrierung OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.
Hermes 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:
Hermes — Autonomer Plan-Execute-Delegate-Agent; anbieterunabhängiges BYOK (standardmäßig xAI Grok, auch OpenAI/Anthropic); quelloffen und selbst gehostet — Autonome Builds ohne Handanlegen, auf welchem Modell Sie vertrauen, lokal gehalten
Codex — Starker visueller Feinschliff mit einem Frontend-Skill; sandboxed Async-Builds — Delegierte Async-Builds und portable AGENTS.md-Regeln
Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebasenbewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext
Cursor — Visueller Build-and-See-Loop mit Live-Vorschau und Inline-Edits — Enges Iterieren-und-Beobachten an UI-Arbeit in einer IDE
Gemini CLI — Starkes multimodales Bildverständnis und 1M-Token-Kontext; kostenlose Stufe — Screenshot-lastige Arbeit und ein ganzes Designsystem im Kontext halten
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle verfallen ohne Skills, Referenzen und Vorgaben auf eine generische Ästhetik. Das ist das eigentliche Problem, das es zu lösen gilt – und es hat die Form eines Designwerkzeugs, nicht eines Modells.
Agent — Design-Stärke — Am besten geeignet für
Hermes — Autonomer Plan-Execute-Delegate-Agent; anbieterunabhängiges BYOK (standardmäßig xAI Grok, auch OpenAI/Anthropic); quelloffen und selbst gehostet — Autonome Builds ohne Handanlegen, auf welchem Modell Sie vertrauen, lokal gehalten
Codex — Starker visueller Feinschliff mit einem Frontend-Skill; sandboxed Async-Builds — Delegierte Async-Builds und portable AGENTS.md-Regeln
Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebasenbewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext
Cursor — Visueller Build-and-See-Loop mit Live-Vorschau und Inline-Edits — Enges Iterieren-und-Beobachten an UI-Arbeit in einer IDE
Gemini CLI — Starkes multimodales Bildverständnis und 1M-Token-Kontext; kostenlose Stufe — Screenshot-lastige Arbeit und ein ganzes Designsystem im Kontext halten
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle verfallen ohne Skills, Referenzen und Vorgaben auf eine generische Ästhetik. Das ist das eigentliche Problem, das es zu lösen gilt – und es hat die Form eines Designwerkzeugs, nicht eines Modells.
Agent — Design-Stärke — Am besten geeignet für
Fallstricke und wie man den „AI-Slop“-Look vermeidet
Die häufigste Beschwerde über KI-generiertes Design ist, dass es generisch aussieht – weiche Verläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, ein Inter-und-Lila-Vibe, der „schreit, dass eine KI das gemacht hat“. Weitere berichtete Probleme sind kaputte mobile Layouts und Anweisungen, die in die UI-Texte durchsickern. Nichts davon ist Hermes-spezifisch; es passiert, wenn irgendein Agent ohne kuratierten Designkontext läuft.
Fügen Sie einen Ästhetik-Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Prüfen Sie in einem echten Browser: Lassen Sie Hermes über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobilgeräten nicht still kaputtgehen.
Liefern Sie Tokens und Referenzen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Kodieren Sie Regeln in einem Skill: Legen Sie Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, Marke-zuerst-Hierarchie“ in einen Skill, den der Agent bei jedem Lauf anwendet.
Beachten Sie, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Fügen Sie einen Ästhetik-Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Prüfen Sie in einem echten Browser: Lassen Sie Hermes über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobilgeräten nicht still kaputtgehen.
Liefern Sie Tokens und Referenzen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Kodieren Sie Regeln in einem Skill: Legen Sie Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, Marke-zuerst-Hierarchie“ in einen Skill, den der Agent bei jedem Lauf anwendet.
Beachten Sie, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Mit Hermes innerhalb von OpenDesign designen
OpenDesign ist die quelloffene Design-Schicht, nach der der obige Workflow immer wieder verlangt. Es behandelt Hermes als First-Party-Adapter und umhüllt es mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI – sodass der Designkontext, der Hermes gut macht, ab dem ersten Lauf vorhanden ist, statt jedes Mal von Hand zusammengebaut zu werden. Beide sind quelloffen und local-first, was die Kombination naheliegend macht.
Authentifizieren Sie sich mit Ihrem eigenen Anbieterschlüssel (BYOK) – standardmäßig xAI Grok oder OpenAI bzw. Anthropic – die Zugangsdaten bleiben auf Ihrer Maschine und werden nie über uns geleitet.
Wählen Sie ein Designsystem und einen Skill und erzeugen Sie dann Decks, Prototypen und Landing Pages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei lebt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Hermes-Agent, derselbe Schlüssel – plus ein echter, portabler, quelloffener Design-Workflow drumherum. Es ist local-first und Apache-2.0, sodass nichts an Ihrer Arbeit oder Ihren Zugangsdaten Ihre Maschine verlässt.
Installieren Sie OpenDesign und wählen Sie Hermes als Ihren Agenten.
Authentifizieren Sie sich mit Ihrem eigenen Anbieterschlüssel (BYOK) – standardmäßig xAI Grok oder OpenAI bzw. Anthropic – die Zugangsdaten bleiben auf Ihrer Maschine und werden nie über uns geleitet.
Wählen Sie ein Designsystem und einen Skill und erzeugen Sie dann Decks, Prototypen und Landing Pages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei lebt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Hermes-Agent, derselbe Schlüssel – plus ein echter, portabler, quelloffener Design-Workflow drumherum. Es ist local-first und Apache-2.0, sodass nichts an Ihrer Arbeit oder Ihren Zugangsdaten Ihre Maschine verlässt.
Installieren Sie OpenDesign und wählen Sie Hermes als Ihren Agenten.
Ist OpenDesign mit Nous Research verbunden?
Nein. OpenDesign ist unabhängig; Hermes und Nous Research sind Marken ihrer jeweiligen Inhaber.