デザインのための Hermes。

Hermes とは実際に何か

Hermes は Nous Research のオープンソース（MIT）で自律的な AI エージェントです。自分のマシンやサーバ上で永続的に動作し、リポジトリを読み、ファイルを編集し、シェルコマンドを実行し、Web を検索し、そして決定的に重要なのは、複数ステップの作業を自分で計画・実行し、一部を隔離されたサブエージェントに委任することです。IDE につながれたコパイロットではなく、自律エージェントです。

デザイン作業では二つの性質が際立ちます。真にエージェント的なので、目標を渡せば、行ごとの指示を待つのではなく計画・構築・検証します。そしてプロバイダ非依存です。自分のキーを持ち込み、既定は xAI Grok ですが、OpenAI、Anthropic、その他対応するエンドポイントを自由に指定でき、どのモデルがあなたのデザインを推論するかを自分で制御できます。

• スキル: Hermes はスキル — 経験から作る手続き的記憶 — を構築し再利用します。デザイン規約・トークン・レビューチェックリストを捕捉し、実行をまたいで残すのに自然な場です。
• サブエージェント + ツール: 並列の作業ストリームのために隔離されたサブエージェントを生成し、ファイル・シェル・Web・ブラウザのツールを備えるので、ターミナルを離れずに参照を集め構築と検証のループを回せます。
• 自分のキーを持ち込む: Hermes は既定で xAI Grok を使い、BYOK 経由で OpenAI、Anthropic、OpenRouter ほか多くのプロバイダに対応します。キーを設定するか OAuth フローを実行してモデルを選びます。

• ベンダー：Nous Research
• 認証情報：BYOK によるプロバイダキー — xAI（Grok、既定）、OpenAI、または Anthropic — hermes auth add で追加
• ライセンス：MIT、オープンソース

なぜ自律的でマルチプロバイダなエージェントがデザインに適するのか

Hermes のデザイン上の強みは二つの性質から来ます。ただし、どのエージェントも同じく、センスは人が与える必要があります。

• 自律的な計画と実行: Hermes は自分で計画・実行・委任するので、デザイン目標 — この参照に合わせる、レスポンシブにする — を受け取り、すべての手順を逐一指定されなくてもそれに向かって反復できます。
• 信頼するモデルを持ち込む: プロバイダ非依存の BYOK は、仕事に合った推論モデルを選べることを意味します。既定の xAI Grok、あるいは強みを活かしたいときの OpenAI や Anthropic のモデル — 単一ベンダーの美的傾向に縛られません。
• 規約はスキルに: スキル（加えて Figma のような MCP サーバ）がエージェントをあなたのトークン・コンポーネント・実際の仕様へ指し示すので、既定の見た目ではなくブランドに沿って作業します。

教訓はどのエージェントも教えてくれるものと同じです。Hermes は既定でセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化します。だからこそ両者は噛み合います（詳細は後述）。

デザイン作業向けに Hermes をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる 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

• デザインルールを記述する: トークン・プリミティブ・規約を Hermes のスキルに捕捉し、エージェントに指し示します。すると出力は無個性な見た目に流れず、ブランドに合致します。
• ブラウザ検証を加える: Playwright かブラウザ MCP を接続し、Hermes に実際のブラウザで描画させ各ブレークポイントで出力を点検させます。ビルドが通ったことだけを確認するのではなく。

スクリーンショットから UI へのワークフロー

Hermes で最も効果の高いデザインループは、参照画像を動作するレスポンシブな UI に変え、一致するまで反復することです。自律エージェントにビルドを計画させ、出力を参照と照らし合わせさせます。

1. 手持ちで最も明瞭な視覚的参照から始め、ヒーロー画像 1 枚だけでなく複数の状態（デスクトップとモバイル、ホバー、空、ロード中）を含めます。
2. プロンプトは具体的に。曖昧なプロンプトは、強力なモデルでも無個性な UI を生みます。
3. デザインシステムと規約をスキルに保ち、トークンと正規のプリミティブの場所を Hermes に伝えます。
4. 開発サーバを起動し、Hermes に実際のブラウザで描画させ、ブレークポイントまでリサイズして結果を確認します。
5. 単にビルドが通ることを確認するのではなく、実装をスクリーンショットと照らし合わせて 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.

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

スキル・サブエージェント・プロバイダ

三つの拡張点が Hermes を継続的なデザイン作業に実用的にし、いずれもオープンなデザインワークフローにきれいに対応します。

• スキル: Hermes はスキル — 経験から作る手続き的記憶 — を構築し再利用します。デザイン規約の耐久性ある置き場で、毎回説明し直す代わりに後の実行で適用されます。
• サブエージェントと MCP: 作業を隔離されたサブエージェントに委任し、MCP サーバに対応します。デザインコンテキストや外部ツール — 最も関連が深いのは Figma MCP サーバ — を取り込む可搬な方法で、Hermes だけでなく複数のエージェントで機能します。
• プロバイダの選択: Hermes はプロバイダ非依存（既定で xAI Grok、BYOK 経由で OpenAI や Anthropic）なので、ワークフローを組み直さずにモデルをタスクに合わせられます。

これらは可搬でマルチエージェントな機能であり、プロジェクトごとに作り直すのではなく、まさに Open Design がオーケストレーションするために作られた類のものです。

デザインにおける Hermes 対 Codex 対 Claude Code 対 Cursor 対 Gemini CLI

デザイン作業に唯一の勝者はいません。各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると：

コミュニティで繰り返し語られる結論は、センスは人から来るということです。どれもスキル・参照・制約がなければ無個性な美的傾向に流れます。それこそが解くべき本当の問題であり、モデルの形ではなくデザインツールの形をした問題です。

落とし穴と「AI 丸出し」な見た目を避ける方法

AI が生成したデザインへの最も多い不満は、無個性に見えることです。淡いグラデーション、浮遊するパネル、過大に丸めた角、大げさな影、Inter と紫の雰囲気が「AI が作ったと丸わかり」になります。ほかにも、壊れたモバイルレイアウトや指示文が UI コピーに漏れ出すといった問題が報告されています。いずれも Hermes 固有のものではなく、厳選されたデザインコンテキストなしにどのエージェントを走らせても起こることです。

• 美的スキルを加える: 厳選されたデザインスキルは、既定の見た目ではなく本物の方向性へ踏み込むようエージェントに強制します。
• 実際のブラウザで検証する: Hermes に各ブレークポイントで描画・自己点検させ、モバイルでレイアウトが静かに壊れないようにします。
• トークンと参照を供給する: 本物のデザイントークンと参照スクリーンショットは、出力品質に対する最大の梃子です。
• ルールをスキルに記述する: 「ヒーローカード禁止、書体は最大 2 種、ブランド優先の階層」のようなルールを、エージェントが毎回適用するスキルに入れます。

どの対策も、エージェントに厳選されたデザインコンテキストを与えることに帰着する点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持する労苦こそ、Open Design が取り除くものです。

Open Design の中で Hermes を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めるオープンソースのデザインレイヤーです。Hermes をファーストパーティのアダプタとして扱い、厳選されたスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルのデスクトップ UI で包みます。こうして Hermes を良くするデザインコンテキストが、毎回手作業で組み立てるのではなく初回から備わります。両者ともオープンソースでローカルファーストなので、この組み合わせは自然です。

1. Open Design をインストールし、エージェントとして Hermes を選択します。
2. 自分のプロバイダキー（BYOK）で認証します（既定で xAI Grok、または OpenAI や Anthropic）。認証情報はあなたのマシンに留まり、当方を経由してプロキシされることは決してありません。
3. デザインシステムとスキルを選び、一貫したセンスでデッキ・プロトタイプ・ランディングページを生成します。
4. すべての成果物と DESIGN.md ファイルは、ホスト型クラウドではなく自分のリポジトリに置かれます。

同じ Hermes エージェント、同じキー。そのまわりに本物で可搬なオープンソースのデザインワークフローが加わります。ローカルファーストで Apache-2.0 なので、作業や認証情報があなたのマシンを離れることはありません。

よくある質問

1. 01 Hermes は本当にデザイン作業ができますか？ +

   はい。美的スキル、デザインシステム、本物の参照画像がコンテキストにあれば、Hermes は本番品質のレスポンシブな UI を生み出し、自律エージェントとして自分で出力を参照と照らして描画・検証できます。そのコンテキストがないと無個性な見た目に流れがちで、それこそ Open Design が埋めるギャップです。

2. 02 Hermes はどのモデルとキーを使いますか？ +

   Hermes はプロバイダ非依存で bring-your-own-key です。既定は xAI Grok（例：grok-4.3）で、OpenAI、Anthropic、OpenRouter ほか多くのプロバイダにも対応します。hermes auth add でプロバイダキーを追加（または OAuth フローを実行）し、hermes model でモデルを選びます。Open Design があなたの認証情報をプロキシすることはありません。

3. 03 Hermes がとりわけデザインに向いている理由は？ +

   二つあります。真に自律的なので、行ごとの指示を待つのではなく UI を計画・構築・検証すること。そしてプロバイダ非依存なので、信頼する推論モデルを動かせること。どちらも役立ちますが、センスはあなたが供給するデザインシステム・スキル・参照から来ます。

4. 04 フロントエンドのデザインには Hermes と Claude Code のどちらが良いですか？ +

   どちらも強力です。Claude Code は具体的でコードベースを理解したデザイン判断で知られています。Hermes の強みは自律的な計画と実行に加えてプロバイダ選択 — Hermes を Anthropic キーに向けることすらできます。多くのチームは両方を使います。Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Hermes を Figma にどう接続しますか？ +

   Hermes のツール設定に Figma MCP サーバを追加します。すると Hermes は本物のデザインコンテキスト — コンポーネント、変数、レイアウトデータ — を取り込めるので、生成コードは近似ではなくソースに合致します。

6. 06 Open Design は Nous Research と提携していますか？ +

   いいえ。Hermes は Nous Research の製品です。Open Design は独立したオープンソースプロジェクトで、ファーストパーティのアダプタとしてこれをサポートします。Hermes と Nous Research はそれぞれの権利者の商標です。

7. 07 私のファイルと認証情報は安全ですか？ +

   はい。Open Design はローカルファーストで Apache-2.0 です。ファイル・成果物・DESIGN.md は自分のリポジトリに留まり、プロバイダの認証情報はあなたのエージェントが直接使い、Open Design のサーバを経由することは決してありません。