参考リンク
Hermesに関するさらに詳しい情報
公開ガイドに記載されている、Hermesでのデザインに関するチュートリアル、ドキュメント、解説記事です。
Hermes 
OpenDesign OpenDesign で
Hermes と
デザインする。
OpenDesignでHermesを使ってインターフェースをデザインする方法：実行前に承認するプラン、あなた自身が所有するプロバイダーキー、ブリーフからレビュー済みファイルまでの1つのサポート受信箱タスク、そして始める前に知っておくべき制限について説明します。
ブリーフからインターフェースへ01 / Hermes
アイデアを持ち込むのはあなたです↗
「エージェントが計画し、
私が承認できるサポートインボックス。」
このHermesガイドへの3つの入り口
Hermesでどこから始めるかを選ぶ
完結したHermesデザインタスクの一例
Hermesデザインタスク：ブリーフからインターフェースまで
1つのタスクをブリーフから完了まで通して示します：引き渡すブリーフと制約、返ってくる成果物、そして完了前に行うべき確認です。以下のインターフェースはこのページのために作成した説明用の例であり、実際に記録されたHermesの実行結果ではありません。
1設計ブリーフと制約条件
ブリーフ小規模チーム向けのサポート受信箱をデザインします：優先度付きの会話リスト、返信案付きのスレッドビュー、クイックアクション。まずレイアウトを計画し、その後実行します。デスクトップとスマートフォン対応です。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクションフィルター、スレッド切り替え、担当割り当て、スヌーズ、返信
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2役割分担：あなた、Hermes、OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Hermes
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Hermes成果物：1440pxと390pxにおけるサポート受信箱
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
リストとスレッドは8pxグリッドに準拠しています。リスト列は固定幅を保ち、件名が折り返されないようになっています。
階層
視覚的階層
送信者と件名が先、プレビューは次に表示されます。アクセントは緊急のみを示します。
レスポンシブ
モバイルレイアウト
リストが先に表示され、タップでスレッドが開きます。フィルターはセグメント切り替えになります。
インタラクション
インタラクションの確認
緊急のものにフィルターし、スレッドを開いて割り当て、提案された返信を送信します。
適合性
Hermesがタスクに適している場合と適していない場合
Hermesが適しているのは
- 自律的なプラン＆実行。計画を立て、構築し、UI作業をサブエージェントに委任することで、デザインの目標を実際に動作するレスポンシブなマークアップへと変換し、結果を確認します。
- プロバイダーを問わないBYOK。デフォルトはxAI Grokですが、OpenAI、Anthropicなど多数のプロバイダーに対応しており、ロックインなしでタスクに合わせて推論モデルを選択できます。
- スキル＋MCP。再利用可能なスキルがあなたの規約を保持し、Figma MCPサーバーが実際のデザインコンテキストをコードに反映します。
- オープンでセルフホスト可能。MITライセンスで、テレメトリなし・クラウド依存なしで自分のマシン上で動作します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローをご確認ください。
- 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書いてください。
- このエージェントに必要な認証情報をお持ちでない可能性があります。必須：BYOKによるプロバイダーキー — xAI（Grok、デフォルト）、OpenAI、またはAnthropic。OpenDesignは認証情報を提供・中継しません。
- チームがGrokまたはOpenCodeで作業している場合。これらのエージェントには専用のページがあり、ワークスペースは同じですが、セットアップ方法が異なります。関連エージェントをご覧ください。
互換性
開始前に必要なHermesの要件
このガイドでは、OpenDesignデスクトップアプリを通じて接続したHermesについて説明します。公開情報は2026年9月6日時点で確認済みです。
ツールの範囲Hermes, by Nous Research
HermesはNous Researchによるオープンソース（MIT）の自律型ターミナルエージェントです。自分のマシン上で常駐して動作し、コードベースを読み取り、ファイルを編集し、コマンドを実行し、複数ステップの作業を計画して独立したサブエージェントに委任します。このページはHermes自体のインターフェースについてではなく、OpenDesignを通じてHermesでインターフェースをデザインすることについて説明します。利用可能なエージェントの一覧はOpenDesignのセットアップノートに記載されています。
アカウントと認証BYOKによるプロバイダーキー — xAI（Grok、
BYOKによるプロバイダーキー — xAI（Grok、デフォルト）、OpenAI、またはAnthropic。自分のプロバイダーキー（BYOK）で認証してください — デフォルトはxAI Grok、あるいはOpenAIまたはAnthropicも可能です。認証情報は自分のマシンに保存されます。本ページは利用枠や価格を保証するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページをご確認ください。ソースのクイックスタートに記載されているNode.jsおよびpnpmの要件は、ソースから実行する場合に適用され、デスクトップパッケージのインストールには適用されません。互換性のある最小Hermesバージョンについては、本ページでは確認していません。
接続確認成功の目安
インストールしたバージョンに表示される接続手順に従い、小さなタスクを実行してください。Hermesがそれを処理し、成果物が開くことを確認してください。ダウンロードだけでは、動作する接続は確立されません。
デスクトップアプリから始める
Hermesのセットアップ：3つのステップ
まずダウンロードし、インストールしたバージョンに応じてHermesのセットアップを完了させ、その後小さな結果を確認してください。この方法に従うために、OpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みの場合は、次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Hermesの接続を準備する
インストールしたバージョンのHermesの手順に従ってください。自分のプロバイダーキー（BYOK）で認証してください — デフォルトはxAI Grok、あるいはOpenAIまたはAnthropicも可能です。認証情報は自分のマシンに保存されます。
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)公開されているガイドのHermesセットアップノートより。最新のコマンドについてはベンダーのドキュメントをご確認ください。
チェックポイント想定しているエージェントとアカウントを確認してください。利用できない場合は、大きなタスクを試す前に互換性を確認してください。 - 3
Hermesで小さなタスクを1つ実行する
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Hermesのデザインワークフロー
Hermesデザインワークフロー、5つのステップ
同じサポート受信箱のタスクを、ブリーフから検証済みファイルまで追っていきます。各ステップでは、あなたが用意するもの、Hermesが行うこと、OpenDesignが提供するもの、そしてあなたが確認する内容を示します。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Hermesブリーフとプロジェクトの指示ファイルを読み込み、不明な点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Hermes1行も書き始める前に、DESIGN.mdのトークンとポスチャールールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Hermesは、レイアウト・スタイル・インタラクション・安定したフックを備えた自己完結型のHTMLファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Hermesセクションを計画し、HTML、CSS、JavaScriptを書き、ファイルを実行して不具合を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Hermesプレビューに対するあなたのコメントを読み、次の修正版を準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Hermesその場で変更を適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Hermesデザインリソース
制限事項
Hermesの制約、手動確認とフォールバック
- 対象範囲プロバイダーに依存せず、BYOK方式です。デフォルトはxAI Grokですが、OpenAI、Anthropicなど多くのプロバイダーに対応しており、デザインを推論するモデルを自分で選べます。このページでは、OpenDesignに接続されたエージェントとしてのHermesを扱い、Hermesのすべての機能を扱うものではありません。
- 利用制限利用制限とコストは、使用する認証情報(BYOKによるプロバイダーキー — xAI(Grok、デフォルト)、OpenAI、Anthropic)によって異なります。このページでは無料枠についての言及はありません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
HermesとOpenDesignに関するよくある質問
Hermesは本当にデザイン作業ができますか?
はい —— 美的スキル、デザインシステム、実際の参考画像がコンテキストにあれば、Hermesは本番品質のレスポンシブUIを生成できます。自律的なエージェントとして、参考資料に対して出力を自らレンダリングし検証することも可能です。そうしたコンテキストがない場合は、汎用的な見た目に陥りがちで、これがOpenDesignが補う部分です。
Hermesはどのモデルとキーを使用しますか?
Hermesはプロバイダーを問わず、bring-your-own-key方式で利用できます。デフォルトはxAI Grok（例: grok-4.3）ですが、OpenAI、Anthropic、OpenRouterなど多数のプロバイダーにも対応しています。hermes auth addでプロバイダーキーを追加（またはそのOAuthフローを実行）し、hermes modelでモデルを選択してください。OpenDesignは決してあなたの認証情報を経由しません。
Hermesが特にデザインに適している理由とは？
2つの理由があります。1つは本当に自律的であることです。1行ずつの指示を待つのではなく、UIを計画し、構築し、検証します。もう1つはプロバイダーを問わないことです。信頼している推論モデルを実行できます。どちらも助けになりますが、テイストはあくまであなたが提供する設計システム、スキル、参考資料から生まれます。
フロントエンドデザインにはHermesかClaude Codeか？
どちらも優れています。Claude Codeはコードベースを理解した具体的なデザイン判断で知られており、Hermesの強みは自律的な計画・実行とプロバイダー選択の自由度です。HermesにAnthropicのキーを指定することも可能です。多くのチームが両方を使い分けており、OpenDesignではデザインワークフローを変えずにエージェントを切り替えられます。
HermesをFigmaに接続する方法は？
Hermesのツール設定でFigma MCPサーバーを追加してください。これによりHermesはコンポーネント、変数、レイアウトデータといった実際のデザインコンテキストを取得できるため、生成されるコードは近似ではなく元の設計に一致します。
Hermesで最初のデザインタスクを始める
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。