Concevoir avec
Hermes dans
OpenDesign.

support-inbox.html · 1440px

4Vérification avant transmission

1. 1

   Téléchargez l’application de bureau OpenDesign

   Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.

   Télécharger OpenDesign

   POINT DE CONTRÔLE

   L'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau.
2. 2

   Préparez votre connexion Hermes

   Suivez les instructions Hermes de votre version installée. Authentifiez-vous avec votre propre clé de fournisseur (BYOK) — xAI Grok par défaut, ou OpenAI ou Anthropic — les identifiants restent sur votre machine.

   Connecter xAI Grok à Hermes (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)

   D'après les notes de configuration de Hermes dans le guide publié ; consultez la documentation du fournisseur pour la commande actuelle.

   POINT DE CONTRÔLE

   Confirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante.
3. 3

   Exécuter une petite tâche Hermes

   Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.

   Brief de démarrage Copier

   Créez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.

   POINT DE CONTRÔLE

   Ouvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.

Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.

1. 1

   Brief de design

   Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.

   • VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
   • HermesLit le brief et le fichier d’instructions du projet ; pose des questions en cas d’ambiguïté.
   • OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
   • VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.

   New project · PromptHermes

   You

   Design a support inbox: list with priority, thread with suggested replies, quick actions. Plan first, then execute.

   Hermes

   Plan: two-pane layout, urgent as the only accent, suggested reply as a draft you approve. Executing unless you object.
2. 2

   Contraintes de design

   Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.

   • VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
   • HermesCharge les tokens et les règles de posture de DESIGN.md dans le contexte avant d’écrire une seule ligne.
   • OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
   • VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Générer l'interface

   Hermes écrit un fichier HTML autonome : mise en page, styles, interactions et points d’ancrage stables.

   • VousAttendez, ou répondez à une question de clarification. Rien à configurer.
   • HermesPlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige les erreurs.
   • OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
   • VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.

   Project files3 files

   • support-inbox.htmlnew
   • HERMES.mdbound
   • DESIGN.mdread
4. 4

   Aperçu

   Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.

   • VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
   • HermesLit vos commentaires sur l’aperçu et prépare la révision suivante.
   • OpenDesignAffiche l'aperçu, expose des cibles data-od-id pour les commentaires et les modifications.
   • VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.

   Preview · 390pxComment mode

   Comment on · list

   Unread weight on sender and subject; the preview stays light.

   Comment on · thread

   Suggested reply is a draft with a Send button, never auto-sent.
5. 5

   Réviser et vérifier

   Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.

   • VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
   • HermesApplique les modifications directement et relance le fichier.
   • OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
   • VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.

   Verification · v23 of 4

   • ✓Urgent is the only accent
   • ✓Suggested reply requires Send
   • ✓No horizontal scroll at 390px
   • Assign and snooze — checked by you