99.4K+ダウンロード
Hermes OpenDesign

OpenDesign で
Hermes と
デザインする。

OpenDesignでHermesを使ってインターフェースをデザインする方法：実行前に承認するプラン、あなた自身が所有するプロバイダーキー、ブリーフからレビュー済みファイルまでの1つのサポート受信箱タスク、そして始める前に知っておくべき制限について説明します。

OpenDesignをダウンロード セットアップに進む
ブリーフからインターフェースへ01 / Hermes
アイデアを持ち込むのはあなたです↗

「エージェントが計画し、
私が承認できるサポートインボックス。」

これはインターフェースの一例であり、実際のプロダクトのキャプチャではありません

HERMES の3つの出発点

Hermes の出発点を選ぶ

このガイド・UIデザイン

Hermes でプロダクトインターフェースを作成する

この後に続くもの：ブリーフ、参照資料、デザインルール、そしてあなたがレビューする HTML の成果物。

このガイドを読む セットアップ

Hermesをゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる Hermes 環境までの完全な道筋。

セットアップに進む 比較

Hermesを他のエージェントと比較する

デザインタスクにおいて Hermes が Codex、Claude Code、Cursor とどこで異なるか、そして別のワークフローがより適切なのはどんなときか。

比較を見る
このページの内容 例
  1. 例
  2. 適性
  3. 互換性
  4. セットアップ
  5. ワークフロー
  6. リソース
  7. 制限事項
  8. FAQ

完結したHermesデザインタスクの一例

ブリーフからインターフェースへ：Hermes の1つのデザインタスク

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 のサポート受信トレイ

Hermes の成果物：1440px と 390px のサポート受信トレイ — デスクトップ
参考例

4ハンドオフ前のレビュー

レイアウト

グリッドとスペーシング

リストとスレッドは 8px グリッドに沿い、リスト列は固定幅なので、件名がリフローしない。

階層

視覚的階層

送信者と件名が先頭に立ち、プレビューが続く。アクセントは緊急項目用に取ってある。

レスポンシブ

モバイルレイアウト

リストが先に来て、タップでスレッドが開く。フィルタはセグメント化スイッチになる。

インタラクション

インタラクションの確認

緊急でフィルタし、スレッドを開き、割り当て、そして返信候補を送信する。

適合性

Hermes が適しているとき — そしてそうでないとき

Hermesが適しているのは

  • 自律的な計画と実行。 Hermes は計画を立て、構築し、UI 作業をサブエージェントに委任して、デザイン目標をレスポンシブなマークアップに変え、結果を検証する。
  • プロバイダー非依存の BYOK。 デフォルトは xAI Grok で、OpenAI、Anthropic など多数が利用可能 — ベンダーロックインなしに、タスクに合った推論モデルを選べる。
  • スキル + MCP。 再利用可能なスキルがあなたの規約を保持し、Figma MCP サーバーが実際のデザインコンテキストをコードに取り込む。
  • オープンでセルフホスト。 MIT ライセンスで、自分のマシン上で動作し、テレメトリもクラウド依存もない。

別のワークフローを選ぶべきケース

  • 編集可能なベクターファイルが必要。 出力は HTML であり、編集可能なデザインドキュメントではない。必要なアセット形式については、別のベクターワークフローを検討する。
  • 参照も制約もない。 デザインシステムや例がなければ、出力は汎用的になりがちだ。まずブリーフを書く。
  • このエージェントに必要な資格情報がない。 必須：BYOK によるプロバイダーキー — xAI（Grok、デフォルト）、OpenAI、または Anthropic。OpenDesign は資格情報を提供もプロキシもしない。
  • チームが Grok や OpenCode で作業している。 これらのエージェントにはそれぞれのページがあり、ワークスペースが重なっていてもセットアップは異なる。関連エージェントを参照。

互換性

開始前に必要なHermesの要件

このページでは、Hermes が OpenDesign デスクトップアプリを通じて接続されているものとして扱う。参照は 2026年9月6日に確認。

ツールの範囲Hermes, by Nous Research

Hermes は Nous Research のオープンソース（MIT）の自律型ターミナルエージェントである。自分のマシン上に常駐し、コードベースを読み、ファイルを編集し、コマンドを実行し、多段階の作業を計画して分離されたサブエージェントに委任する。このページは OpenDesign を通じて Hermes でインターフェースをデザインすることについてであり、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. 1

    OpenDesignデスクトップアプリをダウンロードする

    自分のコンピューター用のパッケージを選び、インストールし、アプリを開く。

    OpenDesignをダウンロード
    チェックポイント
    デスクトップアプリが開く。すでにインストール済みなら続行する。2回目のダウンロードは不要。
  2. 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. 3

    Hermesで小さなタスクを1つ実行する

    最初のブリーフは控えめにして、1回の修正を含むループ全体を判断できるようにする。

    スターターブリーフ

    プロフィールフォームと保存確認を備えた設定画面を構築する。私のデザインルールに従う。デスクトップとモバイルの幅で確認する。

    チェックポイント
    結果を開き、保存状態をテストし、具体的な変更を1つ依頼する。レビューは生成されたファイルから始まるが、そこで終わるわけではない。

代わりに OpenDesign をソースから実行するには、テクニカルクイックスタート を使う。

Hermesのデザインワークフロー

5つのステップで行う Hermes デザイン実行

サポート受信トレイの例をブリーフから検証済み HTML まで追う。各ステップは、あなたの入力、Hermes の計画・実行パス、OpenDesign の貢献、そしてあなたが担うチェックを扱う。

  1. 1

    デザインブリーフ

    シンプルに保つ：対象ユーザー、画面の役割、対象プラットフォームを記した3〜6行。

    • あなたブリーフを下書きする。参照スクリーンショットがあれば追加する。
    • Hermesブリーフとプロジェクト指示ファイルを解析し、曖昧な点について明確化を求める。
    • OpenDesignプロジェクトワークスペース、プロンプト画面、成果物タイプに合ったスキルを提供する。
    • 確認受け入れ基準がブリーフに含まれていることを確認する。生成前に不足を捕まえる方が、後で修正するよりコストが低い。
  2. 2

    デザイン制約

    デザインシステムと明確なルールを用意する。これらの入力により、Hermes が汎用的な美学にデフォルトするのを防ぐ。

    • あなたデザインシステムを選び、ブレークポイントと必要なコンポーネントを指定する。
    • Hermesマークアップを生成する前に、DESIGN.md のトークンと姿勢ルールをコンテキストに読み込む。
    • OpenDesignデザインシステムライブラリを同梱し、選択したシステムをスキルテンプレートに紐づける。
    • 確認トークンをブランドと照合する：アクセントは1つ、フォントは正しいか、角丸は正しいか。
  3. 3

    インターフェースを生成する

    Hermes は自己完結型の HTML 成果物を生成する：レイアウト、スタイル、インタラクション、そして安定したフック。

    • あなた待つか、明確化の要求に答える。ここでは設定は不要。
    • Hermesセクションを計画し、HTML、CSS、JavaScriptを記述し、成果物を実行して、失敗を修正します。
    • OpenDesign成果物をプロジェクトフォルダーに保存し、プレビュー用にインデックス化します。
    • 確認保留。ソースではなく、レンダリングされたファイルを評価します。
  4. 4

    プレビュー

    OpenDesignは、指定した幅でファイルをレンダリングします。このプレビューでデザインの判断が行われます。

    • あなた幅を変更し、インタラクションを操作し、要素に直接コメントします。
    • Hermesプレビューのコメントを読み、次の改訂を準備します。
    • OpenDesignプレビューをレンダリングし、コメントと編集のためにdata-od-idターゲットを公開します。
    • チェック階層、コントラスト、390pxのオーバーフロー、フォーカス状態、控えめなアクセントの使用を確認します。
  5. 5

    修正と検証

    プレビュー要素を指定して変更をリクエストします。各改訂は新しいファイルとして保存され、何かが黙って上書きされることはありません。

    • あなたコメントをリクエストに変換し、作業が完了した時点を判断します。
    • Hermes変更をその場で適用し、成果物を再実行します。
    • OpenDesignバージョンを並べて保持し、完了時に画像またはHTMLをエクスポートします。
    • チェック変更された領域だけを再確認し、その後ブレークポイントごとにページ全体を1回確認します。

リソース

Hermesデザインリソース

スキル

デザインスキル

OpenDesignでHermesが生成できる成果物タイプ。タイプごとに1つのスキル。

スキルを見る デザインシステム

デザインシステム

Hermesが生成する前にバインドするブランドトークンとコンポーネント。

システムを見る テンプレート

テンプレート

デッキ、ランディングページ、製品画面の出発点。

テンプレートを見る

制限事項

Hermesの制限、手動チェック、フォールバック

  • 対象範囲Hermesはプロバイダー非依存かつBYOKです。デフォルトはxAI Grokで、さらにOpenAI、Anthropic、その他多くのプロバイダーに対応します。設計を推論するモデルはあなたが選びます。このページではOpenDesignに接続されたHermesを扱い、Hermesのすべての機能を扱うものではありません。
  • 利用制限制限とコストは、あなたが提供する認証情報（BYOK経由のプロバイダーキー — xAI（Grok、デフォルト）、OpenAI、Anthropic）に連動します。ここでは無料枠があるとは主張しません。
  • ネットワークローカルプロジェクトファイルがあっても、推論がオフラインになるわけではありません。機密入力共有する前に、Hermesのプロバイダー設定とデータポリシーを確認してください。
  • 出力は HTML です出力はHTMLであり、ベクターデザインファイルではありません。
  • 手動レビューアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確さはプレビューで確認します。エージェントの自己チェックは初回パスのみとして扱ってください。
  • フォールバックHermesが利用できない場合、またはタスクが失敗した場合は、インストール済みバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に正常動作した成果物を保持してください。

よくある質問

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 とは実際に何なのか
Hermes は Nous Research によるオープンソース（MIT）の自律型 AI エージェントです。自分のマシンやサーバー上で常駐して動作し、リポジトリを読み、ファイルを編集し、シェルコマンドを実行し、ウェブを検索します。そして何より重要なのは、多段階の作業を自ら計画して実行し、その一部を隔離されたサブエージェントに委任する点です。IDE に縛られたコパイロットではなく、自律型エージェントです。

デザイン作業においては、2 つの特性が際立ちます。真にエージェント的であるため、目標を渡せば、一行ずつの指示を待つのではなく、計画し、構築し、検証します。またプロバイダー非依存です。自分のキーを持ち込み、デフォルトは xAI Grok ですが、OpenAI、Anthropic、その他サポートされる任意のエンドポイントに向けられます。つまり、自分のデザインをどのモデルに推論させるかを自分で制御できます。

スキル: Hermes はスキルを構築して再利用します。これは経験から作られる手続き的記憶であり、デザイン規約、トークン、レビューチェックリストを記録しておくのに自然な場所で、実行をまたいで持続します。

サブエージェント + ツール: 並行ワークストリームのために隔離されたサブエージェントを生成し、ファイル、シェル、ウェブ、ブラウザのツール群を備えているため、ターミナルを離れずにリファレンスを収集し、ビルド＆検証ループを回せます。

自分のキーを持ち込む: Hermes のデフォルトは xAI Grok で、BYOK を通じて OpenAI、Anthropic、OpenRouter、その他多くのプロバイダーをサポートします。キーを設定するか OAuth フローを実行して、モデルを選びます。

認証情報: BYOK によるプロバイダーキー — xAI（Grok、デフォルト）、OpenAI、または Anthropic — を hermes auth add で追加

ベンダー: Nous Research

ライセンス: MIT、オープンソース
自律型・マルチプロバイダーのエージェントがデザインに適している理由
Hermes のデザイン上の強みは 2 つの特性から来ますが、どのエージェントもそうであるように、センスは与えなければなりません。

自律的な計画と実行: Hermes は自ら計画し、実行し、委任するため、「このリファレンスに合わせる」「レスポンシブにする」といったデザイン目標を受け取り、すべての手順を明示してもらうことなく、そこに向けて反復できます。

信頼するモデルを持ち込む: プロバイダー非依存の BYOK により、作業に応じた推論モデルを選べます。デフォルトは xAI Grok、その強みが欲しいときは OpenAI や Anthropic のモデルも使えます。特定ベンダーの美学に縛られることはありません。

スキルに規約を: スキル（および Figma のような MCP サーバー）がエージェントをあなたのトークン、コンポーネント、実際のスペックに向けるので、デフォルトの見た目ではなくブランドに沿って作業します。

センスはあなたが与える 3 つの入力から生まれます。デザインシステム、スキル、そして実際のリファレンス画像です。

教訓はどのエージェントでも同じです。Hermes はデフォルトではセンスを持ちません。デザインシステム、美的スキル、具体的なリファレンスといった制約を与えたときに、良いデザインを生み出します。OpenDesign はまさにそれらの入力をパッケージ化しており、だからこそ両者は組み合わさるのです（詳細は後述）。
ゼロからHermesをデザイン作業用にセットアップする
セットアップの順序: インストール → プロバイダーキーの追加 → スキルにデザインルールを記録 → デザインシステムの追加 → ブラウザ検証の有効化。

デザインルールを組み込む: トークン、プリミティブ、規約を Hermes のスキルに記録し、エージェントをそこに向けます。そうすれば出力は汎用的な見た目に落ち着くのではなく、ブランドに合致します。

ブラウザ検証を追加する: Playwright やブラウザ MCP を接続し、Hermes が実際のブラウザでレンダリングし、ビルドが通ることだけを確認するのではなく、ブレークポイントごとに出力をチェックできるようにします。

コマンドやバージョン固有の詳細については現行のセットアップセクションを参照してください。これらは変わる可能性があります。

# 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) # 4. Wire a Figma MCP server (optional, for design handoff) # configure it among Hermes' MCP / tool settings
前のガイドにあった過去のコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
スクリーンショットから UI へのワークフロー
Hermes で最も効果の高いデザインループは、リファレンス画像を動作するレスポンシブ UI に変え、一致するまで反復することです。自律型エージェントにビルドを計画させ、その出力をリファレンスと突き合わせます。

手持ちの中で最も明快なビジュアルリファレンスから始めましょう。ヒーローショット 1 枚だけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。

プロンプトは具体的に。曖昧なプロンプトは、強力なモデルでも汎用的な UI を生みます。

デザインシステムと規約はスキルに置き、トークンと正典となるプリミティブの在り処を Hermes に伝えます。

開発サーバーを起動し、Hermes に実際のブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認します。

Hermes に実装をスクリーンショットと突き合わせさせて反復します。ビルドが通ることを確認するだけでは不十分です。

Hermes をリファレンスに向け、具体的な制約を与えます:

プロンプトは小さく焦点を絞り、良い反復はコミットし、悪いものは元に戻します（戻したことは Hermes に伝えます）。そうすれば各パスがクリーンなベースの上に積み上がります。

hermes # in the prompt: > Use reference-desktop.png and reference-mobile.png in this folder. Implement this design in React + Vite + Tailwind + TypeScript. Reuse my existing design-system components and tokens from my skill. Match spacing, layout, and hierarchy; make it responsive. Render it in the browser and iterate until it matches the references across breakpoints.
前のガイドにあった過去のコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
スキル、サブエージェント、プロバイダー
3 つの拡張ポイントが Hermes を持続的なデザイン作業に実用的にし、そのすべてがオープンなデザインワークフローにきれいに対応します。

スキル: Hermes はスキルを構築して再利用します。これは経験から作られる手続き的記憶です。デザイン規約の恒久的な置き場となり、毎回説明し直す代わりに以降の実行で適用されます。

サブエージェントと MCP: 隔離されたサブエージェントに作業を委任し、MCP サーバーをサポートします。これはデザインコンテキストと外部ツールを持ち込むポータブルな方法で、最も関連が深いのは Figma MCP サーバーであり、Hermes だけでなく複数のエージェントをまたいで機能します。

プロバイダーの選択: Hermes はプロバイダー非依存（デフォルトは xAI Grok、BYOK 経由で OpenAI と Anthropic）なので、ワークフローを組み直すことなくモデルをタスクに合わせられます。

これらはポータブルでマルチエージェントな能力であり、まさに OpenDesign がプロジェクトごとに作り直すのではなく編成するために作られたものです。
デザインにおける Hermes vs Codex vs Claude Code vs Cursor vs Gemini CLI
デザイン作業に唯一の勝者はいません。各エージェントは異なる強みを持ち、経験豊富なチームはそれらを重ねて使います。公平な要約は次のとおりです:

Hermes — 自律的な計画・実行・委任エージェント。プロバイダー非依存の BYOK（デフォルトは xAI Grok、OpenAI/Anthropic も可）。オープンソースでセルフホスト — 信頼する任意のモデルでのハンズオフな自律ビルドを、ローカルに保つ

Codex — フロントエンドスキルによる強いビジュアルの磨き込み。サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルな AGENTS.md ルール

Claude Code — 具体的なデザイン判断（hex、スペーシング、タイポグラフィ）とコードベースを理解した UX — フロントエンドの推論と大規模コンテキストのリファクタリング

Cursor — ライブプレビューとインライン編集による視覚的なビルド＆確認ループ — IDE 内での密な反復・監視型 UI 作業

Gemini CLI — 強力なマルチモーダル画像理解と 1M トークンのコンテキスト。無料枠あり — スクリーンショットの多い作業と、デザインシステム全体をコンテキストに保持する用途

コミュニティで繰り返される結論は、センスは人間から来るというものです。スキル、リファレンス、制約がなければ、どれも汎用的な美学にデフォルトします。それが解くべき本当の問題であり、それはモデルの形ではなく、デザインツールの形をしています。

エージェント — デザイン上の強み — 最適な用途
落とし穴と、「AI スロップ」な見た目を避ける方法
AI 生成デザインへの最も一般的な不満は、汎用的に見えることです。柔らかいグラデーション、浮いたパネル、大きすぎる角丸、劇的な影、「これ AI が作った」と叫んでいるような Inter と紫の雰囲気。他に報告されている問題には、壊れたモバイルレイアウトや、指示が UI のコピーに漏れ出すことがあります。いずれも Hermes 固有のものではなく、キュレーションされたデザインコンテキストなしでエージェントを走らせたときに起きることです。

美的スキルを追加する: キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく本当の方向性にコミットさせます。

実際のブラウザで検証する: Hermes にレンダリングさせ、ブレークポイントごとに自己チェックさせて、モバイルで黙ってレイアウトが壊れないようにします。

トークンとリファレンスを渡す: 実際のデザイントークンとリファレンスのスクリーンショットは、出力品質に対する最大のレバーです。

ルールをスキルに組み込む: 「ヒーローカード禁止、書体は最大 2 つ、ブランド優先の階層」といったルールを、エージェントが毎回適用するスキルに入れます。

どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることだと言う点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持するのは、OpenDesign が取り除く労苦です。
OpenDesign の中で Hermes とデザインする
OpenDesign は、上記のワークフローが何度も求めてくるオープンソースのデザインレイヤーです。Hermes をファーストパーティのアダプターとして扱い、キュレーションされたスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルのデスクトップ UI で包みます。だから Hermes を良くするデザインコンテキストが最初の実行からそこにあり、毎回手作業で組み立てる必要はありません。どちらもオープンソースでローカルファーストであり、その組み合わせは自然な適合です。

自分のプロバイダーキー（BYOK）で認証します — デフォルトは xAI Grok、または OpenAI か Anthropic — 認証情報はあなたのマシンに留まり、当社を経由してプロキシされることはありません。

デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。

すべての成果物と DESIGN.md ファイルは、ホストされたクラウドではなくあなた自身のリポジトリに置かれます。

同じ Hermes エージェント、同じキー、そしてその周りに本当の、ポータブルな、オープンソースのデザインワークフロー。ローカルファーストで Apache-2.0 なので、あなたの作業や認証情報がマシンの外に出ることはありません。

OpenDesign をインストールし、エージェントとして Hermes を選択します。
OpenDesign は Nous Research と提携していますか？
いいえ。OpenDesign は独立しています。Hermes および Nous Research はそれぞれの所有者の商標です。

最初のHermesデザインタスクを始めましょう

まず小さめのタスクから始め、往復全体を評価してから、実際のブリーフを持ち込んでください。セットアップに合うオプションを選んでください。このページはそれを検出しません。

セットアップのどの段階にいますか？
OpenDesignをダウンロード セットアップチェックリストを見る

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応