103.5K+ダウンロード
Mistral Vibe OpenDesign

OpenDesign で
Mistral Vibe と
デザインする。

OpenDesignでMistral Vibe CLIを使ってインターフェースをデザインする方法：ローカルまたは自分のキーで動作するDevstralモデル、ブリーフからレビュー済みファイルまでの1つのプロダクトページタスク、そして始める前に知っておくべき制約について解説します。

OpenDesignをダウンロード セットアップに進む

MISTRAL VIBE を始める3つの方法

Mistral Vibe をどこから始めるか決める

このガイド・UIデザイン

Mistral Vibe を使ってプロダクトインターフェースを設計する

このガイドで得られるもの：ブリーフ、参照、デザインルール、そしてレビューを通る HTML アーティファクト。

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

Mistral Vibe をゼロからインストールする

新品のマシンから、UI を生成してチェックする Vibe CLI に至るまでの完全な道筋。

セットアップに進む 比較

Mistral Vibe と他のエージェントの比較

デザインタスクにおいて Mistral Vibe が Codex、Claude Code、Cursor とどこで差別化されるか、また別のワークフローのほうが適切なのはどんなときか。

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

完全な Mistral Vibe デザインタスク

ブリーフからインターフェースへ：Mistral Vibe のデザインタスク

あなたがブリーフと制約を渡し、Mistral Vibe がアーティファクトを返し、その後、完了とする前に残りのチェックをあなたが行います。以下のインターフェースはこのページ用に作成された例示であり、記録された Mistral Vibe の実行ではありません。

1設計ブリーフと制約条件

ブリーフ

陶芸スタジオのショップ向けに商品ページを作成する：大きな写真、価格、数量と釉薬のオプション、カートに追加するコントロール、関連作品3点。ローカルモデル、ローカルファイル。デスクトップとスマートフォン。

  • デザインシステムOpenDesign paper canvas — Albert Sans、単一のグリーンのアクセント
  • ブレークポイント1440px デスクトップと 390px モバイル、横スクロールなし
  • インタラクションギャラリー、釉薬の選択、数量、カートに追加
  • 出力安定した data-od-id フックを備えた単一の自己完結型 HTML ファイル

2誰が何をするか：あなた、Mistral Vibe、そして OpenDesign

  • あなた

    あなたがブリーフを書き、デザインシステムを選び、受け入れ基準を設定します。

  • Mistral Vibe

    Mistral Vibe がレイアウトを計画し、HTML、CSS、JavaScript を書き、その後、要求に応じて修正します。

  • OpenDesign

    OpenDesign がデザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクト内のファイルとして保存します。

  • レビュー

    引き渡し前に、視覚的階層、8px グリッドのスペーシング、両方のブレークポイント、すべてのインタラクションがチェックされます。

3Mistral Vibe アーティファクト：1440px と 390px のストアフロント

Mistral Vibe アーティファクト：1440px と 390px のストアフロント — デスクトップ
参考例

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

レイアウト

グリッドとスペーシング

写真と情報は 8px グリッド上に配置され、写真はすべての幅で 4:5 の比率を保ちます。

階層

視覚的階層

名前と価格が主導し、アクセントはカートに追加ボタンにのみ現れます。

レスポンシブ

モバイルレイアウト

写真、続いて名前と価格、グレーズのチップ、全幅ボタン。関連アイテムはスクロールします。

インタラクション

インタラクションの確認

釉薬を選び、数量を変更し、カートに追加し、関連アイテムをスクロールする。

適合性

Mistral Vibe が向く場面 — そして向かない場面

Mistral Vibe が適しているケース

  • Devstral コーディングモデル。 コーディング向けに調整されたエージェント型モデルは、孤立したスニペットを出力するのではなく、実際のフロントエンドコードベース全体を編集します。
  • オープンウェイトでローカルに優しい。 Devstral Small 2 はコンシューマー向けハードウェアで動作するため、デザイン作業を完全にローカルかつオフラインのまま進められます。
  • config.toml + MCP。 プロジェクト設定がエージェントの接続方法を担い、Figma MCP サーバーが実際のデザインコンテキストをコードに取り込みます。
  • オープンで ACP ネイティブ。 Apache-2.0 で、Agent Client Protocol 上に構築され、Mistral API 経由の BYOK に対応します。

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

  • 編集可能なベクターファイルが必要な場合。 アーティファクトは HTML であり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローを検討してください。
  • 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書いてください。
  • このエージェントに必要な認証情報をお持ちではありません。 必要なもの：Mistral APIキー（ご自身のキーを使用）またはローカルモデル。OpenDesignは認証情報を提供またはプロキシしません。
  • チームが OpenCode または Aider で作業している場合。 これらのエージェントにはそれぞれのページがあり、セットアップはエージェントによって異なります。関連エージェントを参照してください。

互換性

始める前に Mistral Vibe が必要とするもの

このガイドは、OpenDesign デスクトップアプリ経由で接続された Mistral Vibe を扱います。公開されている参照情報は 2026年9月6日に確認しました。

ツールの範囲Mistral Vibe（Mistral AI 提供）

Mistral Vibe CLI は Mistral AI のオープンソース（Apache-2.0）ターミナルコーディングエージェントです。プロジェクトファイルと Git ステータスを走査し、コードを編集し、検索し、コマンドを実行し、自然言語タスクからバージョン管理を処理します。このページでは、Mistral Vibe 自体のインターフェースではなく、OpenDesign を通じて Mistral Vibe でインターフェースを設計する方法を扱います。OpenDesign の セットアップノート に利用可能なエージェントが一覧されています。

アカウントと認証Mistral API キー（BYOK）またはローカルモデル

Mistral API キー（BYOK）またはローカルモデル。Mistral API キー（BYOK）またはローカルモデルで認証します — 認証情報はあなたのマシン上に留まります。このページはクォータや価格を約束するものではありません。

システムとバージョンデスクトップアプリまたはソース

デスクトップビルドについてはダウンロードページを参照してください。ソースのクイックスタートにある Node.js と pnpm の要件は、デスクトップパッケージのインストールではなく、ソースから実行する場合に適用されます。互換性のある最小 Mistral Vibe バージョン：ここでは確認されていません。

接続確認成功の目安

インストール済みバージョンに表示される接続手順に従い、小さなタスクを実行します。Mistral Vibe がそれを処理し、アーティファクトが開くことを確認してください。ダウンロードだけでは、動作する接続は確立されません。

デスクトップアプリから始める

3ステップで Mistral Vibe をセットアップする

まずダウンロードし、インストール済みバージョン向けの Mistral Vibe セットアップを完了してから、小さな結果を確認します。この手順では OpenDesign をソースからビルドする必要はありません。

  1. 1

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

    お使いのコンピューターに合うパッケージを選び、インストールしてアプリを開きます。

    OpenDesignをダウンロード
    チェックポイント
    デスクトップアプリが開きます。すでにインストール済みですか？次のステップに進んでください。再度ダウンロードする必要はありません。
  2. 2

    Mistral Vibe 接続を準備する

    インストール済みのバージョンにある Mistral Vibe の手順に従ってください。Mistral API key（BYOK）またはローカルモデルで認証します — 認証情報はお使いのマシン上に留まります。

    mistral-vibe README とセットアップ (GitHub) 
    # 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=...

    公開ガイドに記載された Mistral Vibe のセットアップに関するメモより。現在のコマンドについてはベンダーのドキュメントを確認してください。

    チェックポイント
    意図したエージェントとアカウントを確認します。利用できない場合は、より大きなタスクを試す前に互換性を確認してください。
  3. 3

    小さな Mistral Vibe タスクを実行する

    ブリーフを小さく保ち、1回の修正を含むサイクル全体を判断できるようにします。

    スターターブリーフ

    プロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。

    チェックポイント
    結果を開き、保存状態をテストし、特定の変更を1つ依頼します。生成はレビューを開始するものであり、終わらせるものではありません。

ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。

Mistral Vibe デザインワークフロー

Mistral Vibe デザインタスクの5ステップ

書かれたブリーフから、あなたが検証済みのファイルまで運ばれる1つのストアフロントページ。各ステップでは、あなたの入力、Mistral Vibe の作業、OpenDesign の貢献、そしてあなたがまだ行うべきチェックを示します。

  1. 1

    デザインブリーフ

    3～6個の平易な文。その画面が誰に役立つのか、何を達成すべきか、どのプラットフォームで崩れずに表示される必要があるかを述べます。

    • あなたブリーフを下書きします。参照スクリーンショットがあれば添付します。
    • Mistral Vibeプロジェクトの指示ファイルとともにブリーフを解析し、曖昧な点があれば行動する前に問い合わせます。
    • OpenDesignプロジェクト、プロンプトを入力する画面、およびアーティファクト種別に合うスキルを提供します。
    • 確認ブリーフに受け入れ基準が明記されているか確認します。ここで書いておくほうが、後から出力を修復するより低コストです。
  2. 2

    デザイン制約

    デザインシステムと、いくつかの厳格なルール。この組み合わせが、出力を汎用的なものではなくブランドに沿ったものに保ちます。

    • あなたデザインシステムを選び、ブレークポイントを指定し、必ず表示する必要のあるコンポーネントを列挙します。
    • Mistral Vibe1行も書かれる前に、DESIGN.md のトークンと姿勢ルールをコンテキストに取り込みます。
    • OpenDesignデザインシステムライブラリを提供し、あなたの選択をスキルテンプレートに結び付けます。
    • 確認トークンをあなたのブランドと照合して確認します：アクセントは1つ、フォントは正しい、角丸は正しい。
  3. 3

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

    Mistral Vibe から、レイアウト、スタイル、インタラクション、安定したフックを備えた単一の自己完結型 HTML ファイルが出てきます。

    • あなた設定するものはありません。待つか、確認の質問が来たら答えます。
    • Mistral Vibeセクションを計画し、HTML、CSS、JavaScript を作成し、ファイルを実行し、失敗した箇所を修復します。
    • OpenDesignアーティファクトをプロジェクトフォルダーに保存し、プレビューできるようにインデックス化します。
    • 確認少し待ってください。ファイルはソースを読むのではなく、レンダリング後に判断しましょう。
  4. 4

    プレビュー

    OpenDesign 内では、ファイルは指定した幅でレンダリングされます。そして判断されるのは、コードではなくそのレンダリング結果です。

    • あなた幅を切り替え、インタラクションを試し、個々の要素にコメントします。
    • Mistral Vibeプレビューへのコメントを集め、次の改訂を準備します。
    • OpenDesignプレビューをレンダリングし、コメントと編集のアンカーとなる data-od-id ターゲットを公開します。
    • チェック階層、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントが控えめに保たれているか。
  5. 5

    修正と検証

    プレビュー要素を指して変更を依頼します。各改訂は新しいファイルとして保存され、あなたが見ないまま上書きされることはありません。

    • あなたコメントをリクエストに変換し、タスクを完了と見なします。
    • Mistral Vibe要求された変更をその場で適用し、ファイルを再実行します。
    • OpenDesignバージョンを並べて保持し、最後に画像または HTML をエクスポートします。
    • チェック変更された領域だけを再確認し、その後、ブレークポイントごとにページ全体を一度ざっと確認します。

リソース

Mistral Vibe デザインリソース

スキル

デザインスキル

OpenDesign 内で Mistral Vibe が生成できるすべての成果物タイプを、タイプごとに1つのスキルで扱います。

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

デザインシステム

Mistral Vibe が最初の成果物を生成する前にバインドしておくべきトークンとコンポーネント。

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

テンプレート

デッキ、ランディングページ、プロダクト画面向けの導入。

テンプレートを見る

制限事項

Mistral Vibe の制限事項、手動での確認、フォールバック

  • 対象範囲以下では、OpenDesign に組み込まれたエージェントとしての Mistral Vibe を扱います。CLI が提供するすべての機能を扱うものではありません。
  • 利用制限コストと使用量の制限は、用意する認証情報（Mistral API キーまたはローカルモデル）に従います。ここでは無料枠についての主張はしません。
  • ネットワークローカルのプロジェクトファイルだけでは推論がオフラインになるわけではありません。機密性の高い入力を渡す前に、プロバイダー設定とデータポリシーを確認してください。
  • 出力は HTML です返ってくるのは HTML ファイルであり、ベクターデザインファイルではありません。
  • 手動レビューアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確さは、プレビューであなたが確認するものです。エージェントが行う自己チェックは、あくまで一次確認にすぎません。
  • フォールバックエージェントに到達できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証について確認してください。設定に触れる前に、エラーテキストと最後に正常だった成果物を保管しておいてください。

よくある質問

Mistral Vibe と OpenDesign に関するよくある質問

Mistral Vibe CLI は本当にデザイン作業をこなせるのか？
はい。美的スキル、デザインシステム、実際のコンテキスト内の参照があれば、Vibe CLIは本番品質のレスポンシブUIを生成し、そのDevstralモデルは実際のフロントエンドのコードベース全体を編集できます。そのコンテキストがない場合は汎用的な見た目になりがちで、それがOpenDesignが埋めるギャップです。
Vibe CLIの認証方法は？
セットアップウィザードをvibe --setupで実行し、（Mistralコンソールから取得した）Mistral APIキーを登録するか、環境変数にMISTRAL_API_KEYを設定してください。ローカルモデルや互換モデルに対して完全にオフラインで実行することも可能です。いずれの場合もOpenDesignがあなたの認証情報を中継することはありません。
Vibe CLIがデザインに特に適している理由は？
これはApache-2.0ライセンスのACPネイティブなエージェントで、MistralのオープンウェイトなコーディングモデルであるDevstralによって動作しています——そのため、プライバシーに配慮が必要な作業ではローカルで実行し、実際のコードベース全体を編集できます。ただし、センスはあなたが提供するデザインシステム、スキル、そしてリファレンスから生まれます。
フロントエンドデザインにはVibe CLIかClaude Codeか？
どちらも強力です。Claude Codeは、コードベースを理解した具体的なデザイン判断で知られています。Vibe CLIの強みは、ローカルで実行できるオープンウェイトのDevstralスタックとApache-2.0ライセンスです。多くのチームは両方を使い分けており、OpenDesignならデザインワークフローを変えずにエージェントを切り替えられます。
Vibe CLIをFigmaに接続する方法は？
config.tomlに[[mcp_servers]]エントリとしてFigma MCPサーバーを追加してください。これにより、Vibeはコンポーネント、変数、レイアウトデータといった実際のデザインコンテキストを取得できるようになり、生成されるコードは近似ではなく元のデザインと一致します。
Mistral Vibe CLI とは具体的に何か
Mistral Vibe CLI は、Mistral AI がターミナル向けに提供するオープンソース(Apache-2.0)のコーディングエージェントです。ファイル操作、コード検索、バージョン管理、コマンド実行のためのツールを備えた対話型チャットインターフェースを提供し、プロジェクトのファイル構造と Git ステータスを自動的にスキャンして、エージェントに適切なコンテキストを与えます。Mistral の Devstral コーディングモデルを動力源としており、単に行を補完するのではなく、自然言語のタスクから作業を計画し検証します。

デザイン作業においては、2つの特性が際立ちます。Mistral のオープンウェイトの Devstral ファミリー(Devstral 2 とより小型の Devstral Small 2)で動作するため、クラウドの Mistral API に対してでも、ローカルモデルに対してでもエージェントを実行できます — プライバシーに敏感な、あるいはオフラインのデザイン作業に有用です。また、Agent Client Protocol を話すため、同じエージェントが1つのターミナルセッションだけでなく、エディタやツールも動かせます。

設定ファイル: Vibe CLI は config.toml ファイルで設定します(プロジェクトレベルは ./.vibe/config.toml、フォールバックは ~/.vibe/config.toml)。プロバイダー、モデル選択、プロジェクト設定を書き記す実用的な場所です。

組み込みツール + MCP: ファイル、検索、バージョン管理、コマンド実行のツールを備え、MCP サーバー([[mcp_servers]] セクションで設定)をサポートして、ライブの Figma ファイルのような外部コンテキストを追加できます。

BYOK またはローカル: Mistral コンソールの Mistral API キーで認証するか、ローカル / 互換モデルを指定して、完全にオフラインで動作させられます。

認証情報: Mistral コンソールの Mistral API キー(BYOK)、またはローカル / 互換モデル

ベンダー: Mistral AI

ライセンス: Apache-2.0、オープンソース
オープンウェイトのコーディングエージェントがデザインに適合する理由
Vibe CLI のデザイン上の強みは、オープンウェイトのモデルファミリーとプロトコルへの対応範囲から生まれます — ただし、どのエージェントでもそうであるように、センスは依然として与えなければなりません。

Devstral コーディングモデル: Vibe は Mistral の Devstral ファミリー、すなわちエージェント的なマルチファイル作業向けに作られたコーディング特化モデルで動作します — そのためエージェントは、孤立したスニペットを出すのではなく、実際のフロントエンドコードベースをまたいで編集します。

オープンウェイトでローカルに優しい: Devstral Small 2 はコンシューマー向けハードウェアで動かせるほど小型なので、デザイン作業を完全にローカルかつオフラインで完結できます — 参考資料やコードがマシンの外に出ることはありません。

config.toml の規約 + コンテキスト: プロジェクト設定と独自の指示が、エージェントをあなたのトークン、コンポーネント、実際のスペックへと導くので、デフォルトの見た目ではなくブランドに沿って作業します。

センスはあなたが提供する3つの入力から生まれます: デザインシステム、スキル、実際の参考画像です。

教訓はどのエージェントも教えてくれるのと同じものです: Vibe CLI はデフォルトではセンスを持ちません。デザインシステム、美的スキル、具体的な参考資料という制約を与えたときに、良いデザインを生み出します。OpenDesign はまさにそうした入力をパッケージ化しており、だからこそ両者は適合します(詳細は後述)。
デザイン作業のために Vibe CLI をゼロからセットアップする
セットアップの流れ: インストール → 認証 → config.toml の設定 → スキルの追加 → ブラウザ検証の有効化。

デザインルールを書き記す: トークン、プリミティブ、規約をエージェントが読む場所に置き、Vibe にそれらを指し示すことで、出力は汎用的な見た目にデフォルトせず、ブランドに一致します。

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

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

# 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
前回のガイドの歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
リファレンスを UI に変える
Vibe CLI で最も効果の高いデザインループは、明確な参考資料を作動するレスポンシブ UI に変え、一致するまで反復することです — エージェントのツールを頼りに、自らの出力をレンダリングし、検査し、修正します。

手持ちで最も明確な参考資料から始め、1枚のヒーローショットだけでなく複数の状態(デスクトップとモバイル、ホバー、空、読み込み中)を記述します。

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

デザインシステムと規約を Vibe が読む場所に置き、トークンと正規のプリミティブがどこにあるかを伝えます。

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

Vibe に自分の実装を参考資料と比較させることで反復します — ビルドが通ることを確認するだけでは不十分です。

@ でファイルを参照し(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.
前回のガイドの歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
config.toml、MCP、ACP
3つの拡張ポイントが Vibe CLI を継続的なデザイン作業に実用的なものにし、そのすべてがオープンなデザインワークフローにきれいに対応します。

config.toml: プロジェクトのルールとプロバイダー / モデル設定は config.toml にあります(プロジェクトレベル、~/.vibe へのフォールバック付き)。エージェントがプロジェクトにどう組み込まれるかを記録する永続的な場所であり、実行のたびに読み込まれます。

MCP サーバー: config.toml で MCP サーバーを設定します([[mcp_servers]]、HTTP、streamable-HTTP、stdio の各トランスポートに対応)— デザインコンテキストと外部ツール、とりわけ Figma MCP サーバーを取り込むためのポータブルな方法であり、Vibe だけでなくエージェント間で機能します。

Agent Client Protocol: Vibe は ACP を話すため、同じエージェントをエディタや他の ACP クライアントから操作できます。まさにこれが OpenDesign の統合方法です — vibe-acp バイナリ経由で ACP を通じて。

これらはポータブルでマルチエージェントな機能です — プロジェクトごとに作り直すのではなく、OpenDesign がオーケストレーションするために作られている、まさにそうしたものです。
デザインのための Vibe CLI 対 Codex 対 Claude Code 対 Cursor 対 Gemini CLI
デザイン作業に単一の勝者はいません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを組み合わせます。公正な要約:

Mistral Vibe CLI — ローカルで実行できるオープンウェイトの Devstral コーディングモデル。Apache-2.0 かつ ACP ネイティブ — プライバシーに敏感な、またはオフラインのデザイン作業とオープンウェイトのスタック

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

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

Cursor — ライブプレビューとインライン編集を備えた視覚的なビルド&確認ループ — IDE 内での緊密な反復と観察を伴う UI 作業

Gemini CLI — 強力なマルチモーダル画像理解と非常に大きなコンテキストウィンドウ — スクリーンショットの多い作業とデザインシステム全体をコンテキストに保持すること

繰り返し聞かれるコミュニティの評決は、センスは人間から来るというものです: スキル、参考資料、制約がなければ、どれも汎用的な美的感覚にデフォルトします。それが本当に解くべき問題であり、モデルの形ではなくデザインツールの形をしています。

エージェント — デザインの強み — 最適な用途
落とし穴と「AI Slop」に見えないための工夫
AI が生成したデザインについて最もよく聞かれる不満は、汎用的に見えることです — 柔らかなグラデーション、浮遊するパネル、過剰に大きな角丸、劇的な影、「これ AI が作った」と叫ぶような Inter と紫の雰囲気。他に報告されている問題には、壊れたモバイルレイアウトや、指示が UI のコピーに漏れ出すことなどがあります。これらはいずれも Vibe CLI に固有のものではなく、キュレーションされたデザインコンテキストなしでエージェントを動かしたときに起きることです。

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

実際のブラウザで検証する: Vibe にレンダリングさせ、ブレークポイント全体で自己チェックさせることで、レイアウトがモバイルで静かに壊れるのを防ぎます。

トークンと参考資料を提供する: 本物のデザイントークンと参考スクリーンショットは、出力品質に対する最大のレバーです。

ルールを設定とコンテキストに書き記す: 「ヒーローカードなし、書体は最大2つ、ブランド優先の階層」といったスタイルルールを、エージェントが実行のたびに読む場所に置きます。

どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることだという点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持するのは、OpenDesign が取り除く労苦です。
OpenDesign の中で Vibe CLI を使ってデザインする
OpenDesign は、上のワークフローが繰り返し求めてきたオープンソースのデザインレイヤーです。Mistral Vibe CLI をファーストパーティのアダプターとして扱い — vibe-acp バイナリ経由で ACP を通じて操作し — キュレーションされたスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルのデスクトップ UI で包み込みます。そのため Vibe を良くするデザインコンテキストは、毎回手作業で組み立てるのではなく、最初の実行からそこにあります。どちらもオープンソースでローカルファーストであり、この組み合わせを自然な適合にしています。

OpenDesign をインストールし、エージェントとして Mistral Vibe CLI を選択します。

Mistral API キー(BYOK)で認証するか、Vibe をローカルモデルに向けます — 認証情報はあなたのマシン上にとどまり、当社を経由してプロキシされることはありません。

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

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

同じ Vibe CLI エージェント、同じキー — それに加えて、本物でポータブルなオープンソースのデザインワークフローが周囲にあります。ローカルファーストかつ Apache-2.0 なので、あなたの作業や認証情報がマシンの外に出ることはありません。
OpenDesign は Mistral AI と提携していますか?
いいえ。OpenDesign は独立しています。Mistral は Mistral AI の商標です。