デザインのための Mistral Vibe CLI。

Mistral Vibe CLI とは実際に何か

Mistral Vibe CLI は、Mistral AI がターミナル向けに提供するオープンソース（Apache-2.0）のコーディングエージェントです。ファイル操作・コード検索・バージョン管理・コマンド実行のツールを備えた対話的なチャットインターフェースを提供し、プロジェクトのファイル構造と Git ステータスを自動でスキャンしてエージェントに関連するコンテキストを与えます。Mistral の Devstral コーディングモデルで動き、単に行を補完するのではなく自然言語のタスクから作業を計画・検証します。

デザイン作業では二つの性質が際立ちます。Mistral のオープンウェイトな Devstral ファミリー（Devstral 2 とより小さな Devstral Small 2）で動くので、クラウドの Mistral API に対しても、ローカルモデルに対してもエージェントを動かせます — プライバシーに配慮した作業やオフラインのデザイン作業に役立ちます。そして Agent Client Protocol を話すので、同じエージェントが一つのターミナルセッションだけでなくエディタやツールを駆動できます。

• 設定ファイル: Vibe CLI は config.toml ファイル（プロジェクトレベルの ./.vibe/config.toml、フォールバックは ~/.vibe/config.toml）で設定します。プロバイダ・モデル選択・プロジェクト設定を記述する実用的な場です。
• 組み込みツール + MCP: ファイル・検索・バージョン管理・コマンド実行のツールを備え、MCP サーバ（[[mcp_servers]] セクションで設定）に対応するので、ライブの Figma ファイルのような外部コンテキストを加えられます。
• BYOK またはローカル: Mistral コンソールの Mistral API キーで認証するか、ローカル/互換のモデルを指定すれば、完全にオフラインで動作します。

• ベンダー：Mistral AI
• 認証情報：Mistral コンソールの Mistral API キー（BYOK）、またはローカル/互換のモデル
• ライセンス：Apache-2.0、オープンソース

なぜオープンウェイトのコーディングエージェントがデザインに適するのか

Vibe CLI のデザイン上の強みは、オープンウェイトのモデルファミリーとプロトコルの広がりから来ます。ただし、どのエージェントも同じく、センスは人が与える必要があります。

• Devstral コーディングモデル: Vibe は Mistral の Devstral ファミリー、エージェント的でマルチファイルな作業のために作られたコーディング調整済みモデルで動きます — だから孤立したスニペットを吐くのではなく、実際のフロントエンドコードベースをまたいで編集します。
• オープンウェイトでローカル親和的: Devstral Small 2 はコンシューマ向けハードウェアで動くほど小さいので、デザイン作業を完全にローカル・オフラインに保てます — 参照もコードもあなたのマシンを離れる必要がありません。
• 規約は config.toml + コンテキストに: プロジェクト設定とあなた自身の指示がエージェントをあなたのトークン・コンポーネント・実際の仕様へ指し示すので、既定の見た目ではなくブランドに沿って作業します。

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

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

まっさらなマシンから、UI を構築・検証できる Vibe CLI までの全行程を示します。

# 1. Install Mistral Vibe CLI
uv tool install mistral-vibe
# or: pip install mistral-vibe

# 2. Run the setup wizard to register your API key
vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
#    or set it directly:  export MISTRAL_API_KEY=...

# 3. Start Vibe in your project
cd your-project
vibe

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add an [[mcp_servers]] entry in your config.toml

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

参照から UI へのワークフロー

Vibe CLI で最も効果の高いデザインループは、明瞭な参照を動作するレスポンシブな UI に変え、一致するまで反復することです。エージェントのツールを頼りに、自身の出力を描画・点検・修正します。

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

ファイルを @ で参照し（Vibe はファイルパスを補完します）、スラッシュコマンドを / で駆動し、具体的な制約を与えます：

vibe
# in the prompt:
> @design-spec.md @tokens.css
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, render it in the browser, and iterate until
  it matches the references across breakpoints.

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

config.toml・MCP・ACP

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

• config.toml: プロジェクトのルールとプロバイダ/モデル設定は config.toml（プロジェクトレベル、~/.vibe フォールバック付き）に置かれます。エージェントがプロジェクトにどう配線されるかの耐久性ある置き場で、毎回の実行で読まれます。
• MCP サーバ: config.toml で MCP サーバを設定します（[[mcp_servers]]、HTTP・ストリーマブル HTTP・stdio トランスポート付き）— デザインコンテキストや外部ツール、最も関連が深いのは Figma MCP サーバを取り込む可搬な方法で、Vibe だけでなく複数のエージェントで機能します。
• Agent Client Protocol: Vibe は ACP を話すので、同じエージェントをエディタやその他の ACP クライアントから駆動できます。これこそ Open Design がこれを統合する方法です — vibe-acp バイナリを介して ACP 経由で。

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

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

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

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

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

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

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

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

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

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

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

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

よくある質問

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

   はい。美的スキル、デザインシステム、本物の参照がコンテキストにあれば、Vibe CLI は本番品質のレスポンシブな UI を生み出し、その Devstral モデルが実際のフロントエンドコードベースをまたいで編集します。そのコンテキストがないと無個性な見た目に流れがちで、それこそ Open Design が埋めるギャップです。

2. 02 Vibe CLI をどう認証しますか？ +

   vibe --setup でセットアップウィザードを実行して Mistral API キー（Mistral コンソールから）を登録するか、環境に MISTRAL_API_KEY を設定します。ローカル/互換のモデルに対しても完全にオフラインで動作します。いずれにせよ Open Design があなたの認証情報をプロキシすることはありません。

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

   Mistral のオープンウェイトな Devstral コーディングモデルで動く、Apache-2.0 で ACP ネイティブなエージェントだからです — だからプライバシーに配慮した作業のためにローカルで動かせ、実際のコードベースをまたいで編集できます。ただしセンスは、あなたが供給するデザインシステム・スキル・参照から来ます。

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

   どちらも強力です。Claude Code は具体的でコードベースを理解したデザイン判断で知られています。Vibe CLI の強みは、ローカルで動かせるオープンウェイトの Devstral スタックと Apache-2.0 ライセンスです。多くのチームは両方を使います。Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

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

   config.toml に Figma MCP サーバを [[mcp_servers]] エントリとして追加します。すると Vibe は本物のデザインコンテキスト — コンポーネント、変数、レイアウトデータ — を取り込めるので、生成コードは近似ではなくソースに合致します。

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

   いいえ。Mistral Vibe CLI は Mistral AI の製品です。Open Design は独立したオープンソースプロジェクトで、ACP 経由で駆動する形でファーストパーティのアダプタとしてこれをサポートします。Mistral は Mistral AI の商標です。

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

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