WEITERE LEKTÜRE
Weiterführende Lektüre zu Hermes
Tutorials, Dokumentation und Anleitungen zum Designen mit Hermes, wie im veröffentlichten Guide 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.
Vom Briefing zur Oberfläche01 / Hermes
SIE BRINGEN DIE IDEE EIN↗
„Ein Support-Posteingang, den ein Agent
planen kann und ich freigeben kann.“
DREI WEGE IN DIESEN HERMES-LEITFADEN
Wählen Sie Ihren Einstieg mit Hermes
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche mit Hermes erstellen
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGHermes von Grund auf einrichten
Hier ist der vollständige Weg von einer leeren Maschine zu einem Hermes, das UI erstellen und prüfen kann.
Zum Setup VERGLEICHHermes mit anderen Agents vergleichen
Wie sich Hermes von Codex, Claude Code, Cursor bei der Designarbeit unterscheidet und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Hermes-Design-Aufgabe
Eine Hermes-Design-Aufgabe, vom Briefing bis zum Interface
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 Abschluss noch durchführen. Das Interface unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Hermes-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalten Sie ein Support-Postfach für ein kleines Team: eine Konversationsliste mit Priorität, eine Thread-Ansicht mit vorgeschlagenen Antworten und Schnellaktionen. Planen Sie zuerst das Layout, dann die Ausführung. Desktop und Smartphone.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenFilter, Thread-Wechsel, Zuweisen, Zurückstellen, Antworten
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Aufgabenverteilung: Sie, Hermes und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Hermes
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
- OpenDesign
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
- Prüfung
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
3Hermes-Artefakt: Der Support Inbox bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Liste und Thread auf dem 8px-Raster; die Listenspalte behält eine feste Breite, sodass Betreffzeilen nicht umbrechen.
Hierarchie
Visuelle Hierarchie
Absender und Betreff zuerst, Vorschau danach; der Akzent markiert nur Dringendes.
Responsive
Mobiles Layout
Liste zuerst, Thread per Tap; Filter werden zu einem segmentierten Schalter.
Interaktion
Interaktionsprüfungen
Nach dringend filtern, einen Thread öffnen, zuweisen, die vorgeschlagene Antwort senden.
Eignung
Wann Hermes passt und wann nicht
Hermes passt, wenn
- Autonomes Planen und Ausführen. Es plant, baut und delegiert UI-Arbeit an Subagenten, verwandelt ein Designziel in funktionierendes, responsives Markup und prüft das Ergebnis.
- Anbieterunabhängiges BYOK. Standardmäßig xAI Grok, plus OpenAI, Anthropic und viele weitere — passen Sie das Reasoning-Modell an die Aufgabe an, ohne sich festzulegen.
- Skills + MCP. Wiederverwendbare Skills tragen Ihre Konventionen; ein Figma-MCP-Server bringt echten Designkontext in den Code.
- Offen und selbst gehostet. MIT-lizenziert und 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. Das Artefakt ist HTML, kein bearbeitbares Design-Dokument. Prüfen Sie einen separaten Vektor-Workflow für Ihr benötigtes Asset-Format.
- Sie haben weder Referenz noch Vorgaben. Ohne Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
- Sie haben nicht das Zugangsdatum, das dieser Agent benötigt. Erforderlich: Provider-Key via BYOK — xAI (Grok, Standard), OpenAI oder Anthropic. OpenDesign stellt keine Zugangsdaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet mit Grok oder OpenCode. Diese Agents haben eigene Seiten; der Workspace ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Hermes-Voraussetzungen vor dem Start
Dieser Leitfaden behandelt Hermes, wie es über die OpenDesign-Desktop-App verbunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangHermes, von Nous Research
Hermes ist Nous Researchs Open-Source-(MIT)-autonomer Terminal-Agent. 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 behandelt das Gestalten von Interfaces mit Hermes über OpenDesign, nicht die eigene Oberfläche von Hermes. OpenDesigns Setup-Hinweise listen die verfügbaren Agenten auf.
Konten und AuthentifizierungProvider-Key via BYOK — xAI (Grok,
Provider-Key via BYOK — xAI (Grok, Standard), OpenAI oder Anthropic. Authentifizieren Sie sich mit Ihrem eigenen Provider-Key (BYOK) — standardmäßig xAI Grok, oder OpenAI oder Anthropic — die Zugangsdaten bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite für Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quellcode-Quickstart gelten für das Ausführen aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Minimal kompatible Hermes-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 Hermes sie bearbeitet hat und dass sich das Artefakt öffnet. Ein Download allein stellt keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Hermes-Setup in drei Schritten
Zuerst herunterladen, das Hermes-Setup für Ihre installierte Version abschließen, dann ein kleines Ergebnis prüfen. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesem Weg zu folgen.
- 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? Fahren Sie mit dem nächsten Schritt fort; ein erneuter Download ist nicht erforderlich. - 2
Bereiten Sie Ihre Hermes-Verbindung vor
Folgen Sie den Hermes-Anweisungen Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem eigenen Provider-Key (BYOK) — standardmäßig xAI Grok, oder OpenAI oder Anthropic — die Zugangsdaten 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)Aus den Hermes-Setup-Hinweisen im veröffentlichten Leitfaden; prüfen Sie die Hersteller-Dokumentation 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 Hermes-Aufgabe aus
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, 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 Speicherstatus und fordern Sie eine konkrete Änderung an. Eine generierte Datei ist der Beginn der Überprüfung, nicht das Ende.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Hermes-Design-Workflow
Der Hermes-Design-Workflow in fünf Schritten
Die gleiche Support-Inbox-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Hermes macht, was OpenDesign beiträgt und was Sie prüfen.
- 1
Design-Briefing
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
- SieSchreiben Sie das Briefing; hängen Sie einen Referenz-Screenshot an, falls vorhanden.
- HermesLiest das Briefing und die Instruktionsdatei des Projekts; fragt nach, wenn etwas unklar ist.
- OpenDesignStellt das Projekt, die Prompt-Oberfläche und das Skill für den Artefakttyp bereit.
- PrüfenStellen Sie sicher, dass das Briefing die Abnahmekriterien enthält. Diese jetzt hinzuzufügen ist günstiger als nach der Generierung.
- 2
Design-Vorgaben
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
- SieWählen Sie ein Design-System; legen Sie Breakpoints und verbindlich zu verwendende Komponenten fest.
- HermesLädt die DESIGN.md-Tokens und Haltungsregeln in den Kontext, bevor eine Zeile geschrieben wird.
- OpenDesignLiefert die Design-System-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
- PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Hermes schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- HermesPlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indexiert es für die Vorschau.
- PrüfenNoch nichts. Beurteilen Sie die Datei nach dem Rendern, nicht anhand des Quellcodes.
- 4
Vorschau
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
- SieWechseln Sie zwischen Breiten, klicken Sie sich durch die Interaktionen, hinterlassen Sie Kommentare zu Elementen.
- HermesLiest Ihre Kommentare zur Vorschau und bereitet die nächste Überarbeitung vor.
- OpenDesignRendert die Vorschau, stellt
data-od-id-Ziele für Kommentare und Änderungen bereit. - PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
- 5
Überarbeiten und Verifizieren
Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
- SieVerwandeln Kommentare in Anfragen; entscheiden, wann die Aufgabe abgeschlossen ist.
- HermesWendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignBehält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn Sie fertig sind.
- PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Hermes-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Hermes in OpenDesign erzeugen kann, jeweils eine Skill pro Typ.
Design Systems
Marken-Token und Komponenten, die Sie einbinden müssen, bevor Hermes etwas generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Grenzen von Hermes, manuelle Prüfungen und Fallbacks
- UmfangEs ist anbieterunabhängig und funktioniert nach dem Bring-your-own-key-Prinzip: standardmäßig xAI Grok, mit Unterstützung für OpenAI, Anthropic und viele weitere Anbieter, sodass Sie kontrollieren, welches Modell über Ihr Design nachdenkt. Diese Seite behandelt Hermes als mit OpenDesign verbundenen Agent, nicht jede Hermes-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Zugangsdaten (Provider-Key via BYOK — xAI (Grok, Standard), OpenAI oder Anthropic). Diese Seite macht keine Aussage über kostenlose Kontingente.
- NetzwerkLokale Projektdateien bedeuten nicht, dass die Inferenz offline erfolgt. Prüfen Sie die Anbietereinstellungen und Datenrichtlinien Ihres Agents, bevor Sie sensible Eingaben teilen.
- Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine Vektor-Designdateien.
- Manuelle ÜberprüfungBarrierefreiheit, echte Inhalte, Markenkonformität und korrekte Interaktionen werden von Ihnen in der Vorschau geprüft. Betrachten Sie jede Selbstprüfung des Agents als ersten Durchgang.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanleitung und Authentifizierung der 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
Kann Hermes wirklich Designarbeit leisten?
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.
Was macht Hermes speziell für Design gut?
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 oder 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 verbinde ich Hermes mit Figma?
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.
Starten Sie eine erste Design-Aufgabe mit Hermes
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.