102.7K+ダウンロード
Grok OpenDesign

OpenDesign で
Grok と
デザインする。

OpenDesignでGrok Buildを使いインターフェースを設計する方法を解説します。参考ポスターの使い方、変更前のプラン作成、ブリーフからレビュー済みファイルまでのランディングページ制作例、そして開始前に知っておくべき制限を紹介します。

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

この Grok ガイドを始める 3 つの方法

Grok の開始点を選ぶ

このガイド・UIデザイン

Grok を使ってプロダクトインターフェースを構築する

内容: ブリーフ、参考資料、デザインルール、そしてあなたがレビューする HTML 成果物。

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

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

完全なセットアップ経路: クリーンなマシンから、UI を生成して確認できる Grok Build まで。

セットアップに進む 比較

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

デザイン作業において Grok が Codex、Claude Code、Cursor とどこで差別化されるか、そして別のワークフローがより適切なのはいつか。

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

1つの完全なGrokデザインタスク

1 つの Grok タスク: ブリーフ、成果物、レビュー

このページでは、1 つのタスクについて、あなたが渡すブリーフと制約、Grok が返す成果物、そして完了と言う前に残るチェックを順に追います。以下に示すインターフェースはこのページ用の例として構築されたもので、実際の Grok 実行から取得したものではありません。

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

ブリーフ

添付のポスター画像を使い、2 日間の開発者会議のランディングページをデザインしてください: 日付と会場、スケジュールの予告、スピーカー、チケットのコールトゥアクション。デスクトップとスマートフォンをカバーすること。

  • デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
  • ブレークポイントデスクトップは 1440px、モバイルは 390px、横スクロールなし
  • インタラクションチケット CTA、スケジュールの日切り替え、スピーカーカード
  • 出力安定したdata-od-idフックを持つ、自己完結型のHTMLファイル1つ

2誰が何をするか: あなた、Grok、OpenDesign

  • あなた

    あなたの役割: ブリーフを書き、デザインシステムを選び、受け入れ基準を設定する。

  • Grok

    Grok はレイアウトを計画し、HTML、CSS、JavaScript を書き、要求に応じて修正する。

  • OpenDesign

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

  • レビュー

    引き渡し前に、視覚的階層、8px グリッド上のスペーシング、両方のブレークポイント、各インタラクションを確認する。

3Grok 成果物: 1440px と 390px のイベントページ

Grok 成果物: 1440px と 390px のイベントページ — デスクトップ
参考例

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

レイアウト

グリッドとスペーシング

ヒーロー、トラック、プルーフは 8px グリッドに整列している。ポスターアートは押しつぶさずにクロップされている。

階層

視覚的階層

日付とタイトルが先頭に立ち、チケットボタンが続き、アクセントはそのボタンだけに現れる。

レスポンシブ

モバイルレイアウト

タイトル、日付、チケットボタンはアートの上に位置する。トラックは順に積み重なる。

インタラクション

インタラクションの確認

チケットフローを開き、スケジュールの日を切り替え、1 つのスピーカーカードをたどる。

適合性

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

Grokが適している場合

  • 画像対応のスクリーンショット → UI。 Grok モデルは画像入力を受け付けるため、参考画像をレスポンシブマークアップに変換し、結果をそれと照合して確認できる。
  • 変更前のプランモード。 Grok はファイルが変更される前に承認用の構造化プランを起草し、デザイン意図を差分の後ではなく事前にレビューできる。
  • AGENTS.md + MCP。 規約はコンテキストファイルに置かれ、Figma MCP サーバーが実際のデザインコンテキストをコードに取り込む。
  • 自分のアカウントでサインイン。 SuperGrok または X Premium+ 経由で OAuth を使うか、ヘッドレス利用のために xAI API キー（BYOK）を指定する。

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

  • 編集可能なベクターファイルが必要。 Grok の成果物は HTML であり、編集可能なデザインドキュメントではない。その資産形式には別のベクターワークフローを使う。
  • 参考も制約もない。 デザインシステムや例がないと、出力は汎用的な見た目になりがち — まずブリーフを書く。
  • このエージェントが必要とする資格情報がない。 必須: xAI SuperGrok OAuth（`grok login`）。OpenDesign は資格情報を提供もプロキシもしない。
  • チームが Hermes または Codex で作業している。 それらのエージェントには独自のページがあり、ワークスペースが共有されていてもセットアップは異なる。関連エージェントを参照。

互換性

開始前に必要な Grok の要件

ここでの対象範囲は、OpenDesign デスクトップアプリ経由で接続された Grok です。公開されている参考資料は 2026 年 9 月 6 日に確認されました。

ツールの範囲Grok（xAI 提供）

Grok Build は xAI のターミナルコーディングエージェントで、Grok Build という名前で提供されています。コードベースを読み、ファイルを編集し、シェルコマンドを実行し、行動する前に多段階のエンジニアリング作業を計画できます。このページは OpenDesign を通した Grok によるインターフェースデザインを扱い、Grok 自身のインターフェースではありません。OpenDesign の セットアップノート に利用可能なエージェントが一覧されています。

アカウントと認証xAI SuperGrok OAuth（`grok login`）

xAI SuperGrok OAuth（`grok login`）。SuperGrok アカウントまたは xAI API キー（BYOK）でサインインします。資格情報はあなたのマシン上に残ります。ここではクォータや価格は約束されていません。

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

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

接続確認成功の目安

インストールしたバージョンに表示される接続手順を使い、小さなタスクを試してください。Grok がそれを処理し、成果物が開くことを確認してください。ダウンロードしただけでは、接続が機能している証明にはなりません。

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

3ステップで行う Grok のセットアップ

ダウンロードから始め、インストールしたバージョンの Grok セットアップを完了し、小さな結果を確認します。この経路では OpenDesign をソースからビルドする必要はありません。

  1. 1

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

    お使いのマシン用のパッケージを選び、インストールし、アプリを起動します。

    OpenDesignをダウンロード
    チェックポイント
    デスクトップアプリが起動する。すでにインストール済みですか？ 次のステップに進んでください — 2 回目のダウンロードは不要です。
  2. 2

    Grok の接続を準備する

    インストールしたバージョンに表示される Grok の手順を使います。SuperGrok アカウントまたは xAI API キー（BYOK）で認証します。資格情報があなたのマシンから出ることはありません。

    xAIモデルのドキュメント 
    # 1. Install Grok Build (Grok Build) on macOS/Linux
curl -fsSL https://x.ai/cli/install.sh | bash

# 2. Start it in your project and authenticate on first run
cd your-project
grok login   # opens your browser; sign in with SuperGrok / X Premium+
#   or, for headless / CI use, set an xAI API key:
#   export XAI_API_KEY=xai-...

    出典: 公開ガイドの Grok セットアップノート。最新のコマンドはベンダーのドキュメントで確認してください。

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

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

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

    スターターブリーフ

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

    チェックポイント
    結果を開き、保存状態を試し、1 つだけ正確な変更を依頼する。生成されたファイルはレビューを開始するものであり、終わらせるものではありません。

OpenDesign をソースから実行する場合は、代わりに 技術クイックスタート を使用してください。

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

Grok Build デザインタスクの 5 ステップ

1 つのイベントページタスクをブリーフから確認済みファイルまで追います。各ステップでは、あなたの入力、Grok の動作、OpenDesign の役割、あなたが実行するチェックを挙げます。

  1. 1

    デザインブリーフ

    数行の簡潔な記述 — 3 ～ 6 行に抑えます。その画面が誰のためで、何をすべきで、どのプラットフォームが重要かを述べます。

    • あなたブリーフを起草し、可能なら参考スクリーンショットを添付する。
    • Grokブリーフとプロジェクトの AGENTS.md 指示ファイルを解析し、不明な詳細があれば質問する。
    • OpenDesignプロジェクト、プロンプトボックス、成果物タイプに合ったスキルを提供する。
    • 確認ブリーフに受け入れ基準が明記されていることを確認する。生成前にそれらを確定させる方が、後で修正するよりコストが低い。
  2. 2

    デザイン制約

    デザインシステムと少数の厳格なルール。その組み合わせが、出力を汎用的な見た目にせず、ブランドに沿わせます。

    • あなたデザインシステムを選び、ブレークポイントと必ず表示すべきコンポーネントを指定する。
    • Grokマークアップを書く前に、DESIGN.md のトークンと姿勢ルールをコンテキストに取り込む。
    • OpenDesignデザインシステムライブラリを提供し、選択したシステムをスキルテンプレートに組み込む。
    • 確認トークンがブランドに一致することを確認する: アクセント 1 つ、意図したフォント、正しい角丸。
  3. 3

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

    Grok Build は、レイアウト、スタイル、インタラクション、安定したフックを備えた自己完結型の HTML ファイルを 1 つ生成します。

    • あなたプランを待つか、明確化の質問に答える。設定するものは何もない。
    • Grokセクションプランを起草し、HTML、CSS、JavaScript を書き、ファイルを実行し、失敗を修復する。
    • OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックス化する。
    • 確認待つ。ソースではなくレンダリングされたファイルを評価する。
  4. 4

    プレビュー

    OpenDesign は、指定した幅でファイルをレンダリングします。ここがデザイン上の判断が評価される瞬間です。

    • あなたビューポート幅を変更し、各インタラクションを試し、特定の要素にコメントを添付します。
    • Grokプレビューへのコメントを読み取り、次のリビジョンを準備します。
    • OpenDesignプレビューをレンダリングし、data-od-id ターゲットをコメントと編集に利用できるようにします。
    • チェック階層、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントが抑制されているかどうかを確認します。
  5. 5

    修正と検証

    プレビュー内の要素を指して変更を依頼します。各リビジョンは新しいファイルになり、何かが黙って上書きされることはありません。

    • あなたコメントをリクエストに変換し、タスクがいつ完了するかを決定します。
    • Grok変更をその場で適用し、ファイルを再度実行します。
    • OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
    • チェック変更された領域だけを再確認し、その後、ブレークポイントごとに 1 回、ページ全体を確認します。

リソース

Grok デザインリソース

スキル

デザインスキル

Grok が OpenDesign 内で生成できるアーティファクトの種類。種類ごとに 1 つのスキルがあります。

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

デザインシステム

Grok Build が何かを生成する前にバインドするブランドトークンとコンポーネント。

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

テンプレート

デッキ、ランディングページ、製品画面の起動ポイント。

テンプレートを見る

制限事項

Grokの制限、手動チェック、およびフォールバックパス

  • 対象範囲このページでは、GrokをOpenDesignに接続されたエージェントとして扱います。Grokのすべての機能を網羅しているわけではありません。
  • 利用制限使用制限とコストは、使用する認証情報（xAI SuperGrok OAuth（`grok login`））に依存します。無料枠に関する主張はここにはありません。
  • ネットワークプロジェクトファイルをローカルに保つことは、推論をオフラインにするわけではありません。機密性の高い入力を提供する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
  • 出力は HTML です成果物はHTMLファイルであり、ベクター設計ファイルではありません。
  • 手動レビュープレビューで、アクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確性を確認します。エージェント自身のチェックは最初のパスに過ぎないと考えてください。
  • フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールしたバージョンの接続手順と認証を参照してください。設定を変更する前に、エラーと最後に動作した成果物を保持してください。

よくある質問

GrokとOpenDesignに関するよくある質問

Grok Buildは本当にデザイン作業ができますか？
はい—美的スキル、デザインシステム、そしてコンテキスト内の実際の参照画像があれば、Grok Buildは本番品質のレスポンシブなUIを生成でき、画像を認識できるGrokモデルが出力を参照画像と照らし合わせて検証するのに役立ちます。そうしたコンテキストがない場合は汎用的な見た目に陥りやすく、そこがOpenDesignで補う部分です。
Grok Buildの認証はどのように行いますか？
SuperGrokまたはX Premium+のサブスクリプション（`grok login`）でブラウザからサインインするため、管理すべきAPIキーはありません。ヘッドレス環境やCIで使用する場合は、代わりにxAI APIキーを使用できます。いずれの場合も、OpenDesignがあなたの認証情報を中継することはありません。
Grok Buildがデザインに特に適している理由は何ですか？
2つあります。プランモードにより、変更が反映される前にアプローチを確認できます。また、Grokモデルは画像入力に対応しているため、参照スクリーンショットをよく読み取れます。両方が助けになりますが、テイストはあくまであなたが提供するデザインシステム、スキル、参照画像から生まれます。
フロントエンドデザインにはGrok BuildかClaude Codeのどちらが良いですか？
どちらも優れています。Claude Codeはコードベースを踏まえた具体的なデザイン判断で知られており、Grok Buildの強みはプランモードでのレビューと画像を認識できるxAIモデルです。多くのチームは両方を使用しており、OpenDesignではデザインワークフローを変えずにエージェントを切り替えられます。
Grok BuildをFigmaに接続するにはどうすればよいですか？
MCP設定にFigma MCPサーバーを追加してください。これにより、Grokはコンポーネント、変数、レイアウトデータといった実際のデザインコンテキストを取得できるようになり、生成されるコードが近似ではなく元のソースと一致するようになります。
Grok Build とは実際に何なのか
Grok Build は xAI のターミナル型コーディングエージェントで、Grok Build という名前で提供されています。リポジトリを読み、ファイルを編集し、シェルコマンドを実行し、行を補完するだけでなく自然言語のタスクから複数ステップのエンジニアリング作業を計画します。xAI の Grok モデルを中心に構築されており — xAI API 上では grok-build モデルファミリーとして公開されています — あなたの xAI アカウントを通じて認証するため、エージェントとモデルは同じベンダーから提供されます。

デザイン作業においては、2 つの特性が際立ちます。1 つはプランモードで、変更が反映される前に、承認・コメント・書き直しができる構造化されたアプローチを下書きします — UI を反復検討しているときには有用なゲートになります。もう 1 つは Grok モデルが画像入力を受け付けるため、参照用のスクリーンショットを渡せば、文章による説明から推測するのではなく、実際のレイアウトについて推論します。

コンテキストファイル: Grok Build は永続的なプロジェクトコンテキストとして AGENTS.md ファイルを読み込みます — ここはデザイン規約、トークン、レビューチェックリストを記述するのに自然な場所です。Codex や他のエージェントが使うのと同じオープンな AGENTS.md 規約に従います。

ツール、MCP + サブエージェント: ファイルを編集し、シェルコマンドを実行し、MCP サーバーをサポートしてライブの Figma ファイルのような外部コンテキストを追加します。より大きなタスクでは、調査・構築・レビューを同時に行う並列サブエージェントに委任できます。

アカウントでサインイン: ブラウザで SuperGrok または X Premium+ サブスクリプションを通じてサインインして認証します。ヘッドレスや CI での利用には xAI API キーを持ち込むこともできます。

認証情報: xAI SuperGrok OAuth (`grok login`)、またはヘッドレス用途向けの xAI API キー (BYOK)

モデル: xAI Grok モデル (xAI API 上の grok-build ファミリー)、画像入力対応

ベンダー: xAI
なぜプランモードと画像認識モデルがデザインに適しているのか
Grok Build のデザイン上の強みは 2 つの特性から生まれます — ただし、どのエージェントでもそうであるように、センスは依然として与えなければなりません。

画像認識による推論: Grok モデルが画像入力を受け付けるため、エージェントは参照用スクリーンショットを読み取ります — レンダリング結果を画像と照合し、文章による説明から推測するのではなく比較します。

変更が反映される前のプランモード: プランモードはファイルが変更される前に、あなたが承認する構造化されたアプローチを下書きするため、デザインの意図は diff の後で発見されるのではなく、事前にレビューされます。

AGENTS.md における規約: AGENTS.md (および Figma MCP サーバー) は、エージェントをあなたのトークン、コンポーネント、実際の仕様に向けさせるため、デフォルトの見た目ではなくブランドに沿って作業します。

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

教訓はどのエージェントも教えるのと同じものです: Grok Build はデフォルトではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。OpenDesign はまさにそれらの入力をパッケージ化しており、だからこそこの 2 つは相性が良いのです (詳しくは後述)。
デザイン作業のために Grok Build をゼロからセットアップする
セットアップ手順: インストール → 認証 → AGENTS.md の設定 → スキルの追加 → ブラウザ検証の有効化。

デザインルールをエンコードする: トークン、プリミティブ、規約を AGENTS.md に置き、Grok にそれらを参照させる。そうすれば、出力は汎用的な見た目にデフォルトせず、ブランドに一致する。

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

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

# 1. Install Grok Build (Grok Build) on macOS/Linux curl -fsSL https://x.ai/cli/install.sh | bash # 2. Start it in your project and authenticate on first run cd your-project grok login # opens your browser; sign in with SuperGrok / X Premium+ # or, for headless / CI use, set an xAI API key: # export XAI_API_KEY=xai-... # 3. Add project context # create an AGENTS.md at the repo root with your design conventions # 4. Wire the Figma MCP server (optional, for design handoff) # add it to your MCP server configuration
前のガイドの歴史的なコマンド例。現在の構文はリンクされたベンダーのドキュメントで確認すること。
スクリーンショットをUIに変換する方法
Grok Build を使った最も効果の高いデザインループは、参照画像を実際に動くレスポンシブ UI に変え、一致するまで反復することです。その際は、アプローチを合意するためにプランモードを活用し、出力を参照画像と比較するために画像対応モデルを活用します。

手持ちの中で最も明確なビジュアル参照から始め、1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、読み込み中）を含めましょう。

プロンプトでは具体的に指定してください。曖昧なプロンプトは、強力なモデルでも汎用的な UI を生み出します。

デザインシステムと規約は AGENTS.md に置き、トークンと正規のプリミティブがどこにあるかを Grok に伝えましょう。

プランモードでアプローチを確認し、その後 dev サーバーを起動して、Grok に実際のブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認します。

Grok に実装をスクリーンショットと比較させることで反復します。単にビルドが通ることを確認するだけではいけません。

参照画像を添付し、具体的な制約を与えます:

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

grok # in the prompt (attach reference-desktop.png and reference-mobile.png): > Implement this design in React + Vite + Tailwind + TypeScript. Reuse my existing design-system components and tokens from AGENTS.md. Match spacing, layout, and hierarchy; make it responsive. Show me the plan first, then render it in the browser and iterate until it matches the references across breakpoints.
前のガイドの歴史的なコマンド例。現在の構文はリンクされたベンダーのドキュメントで確認すること。
AGENTS.md、MCP、サブエージェント
3つの拡張ポイントが、Grok Buildを継続的なデザイン作業に実用的にし、その3つはいずれもオープンなデザインワークフローにきれいに対応します。

AGENTS.mdコンテキスト: プロジェクトルールはリポジトリルートのAGENTS.mdに置かれます。それはデザイン規約の永続的な置き場所であり、実行のたびに読まれます。しかも他のエージェントも理解する同じオープンフォーマットなので、ルールも一緒に持ち運べます。

MCPサーバー: MCPサーバーを構成して、デザインコンテキストや外部ツールを取り込みます。最も関連が深いのはFigma MCPサーバーです。これは実際の仕様をコードに取り込むためのポータブルな方法で、Grokだけでなくエージェントをまたいで機能します。

サブエージェントと組み込みツール: Grok Buildは並列サブエージェントを起動して、調査、構築、レビューを同時に行えます。また、そのファイル、シェル、検索ツールにより、ターミナルを離れずに参照を集め、検証ループを実行できます。

これらはポータブルなマルチエージェント機能です。まさにOpenDesignが、プロジェクトごとに再作成するのではなく、オーケストレーションするために作られている類のものです。
デザインのためのGrok Build vs Codex vs Claude Code vs Cursor vs Gemini CLI
デザイン作業に唯一の勝者はいません。エージェントごとに強みが異なり、経験豊富なチームはそれらを組み合わせて使います。公平にまとめると:

Grok Build — 変更が適用される前のプランモードレビュー、画像を理解するGrokモデル、並列サブエージェント。SuperGrokアカウントでサインイン — レビュー済みでプラン優先のUIビルドを、xAIモデルをループに含めて実行

Codex — フロントエンドスキルによる強力な視覚的洗練。サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール

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

Cursor — ライブプレビューとインライン編集による、視覚的なビルドして見るループ — IDE内での緊密な反復と監視のUI作業

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

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

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

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

実際のブラウザで検証する：ブレークポイントをまたいでレンダリングと自己チェックを行い、モバイルでレイアウトがサイレントに壊れないようにします。

トークンと参照を提供する：実際のデザイントークンと参照スクリーンショットは、出力品質を左右する最大のテコです。

AGENTS.mdにルールをエンコードする：「ヒーローカードなし、書体は最大2つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回の実行で読む場所に置きます。

すべての緩和策は、エージェントにキュレーションされたデザインコンテキストを与えることに関するものであることに注意してください。そのコンテキストをプロジェクトごとに手作業で維持することは、OpenDesignが取り除く苦労です。
OpenDesign内でGrok Buildを使ってデザインする
OpenDesignは、上記のワークフローが求め続けているオープンソースのデザインレイヤーです。これはGrok Buildをファーストパーティアダプターとして扱い、キュレーションされたスキルとデザインシステムライブラリ、構造化されたレンダーパイプライン、ローカルデスクトップUIでラップします — そのため、Grokを良くするデザインコンテキストが最初の実行から存在し、毎回手作業で組み立てられることはありません。OpenDesignは独立しており、Apache-2.0で、自分のマシン上で動作するため、この組み合わせは自然な適合となります。

SuperGrokアカウントまたはxAI APIキー（BYOK）で認証します — 認証情報はマシン上に留まり、私たちを介してプロキシされることはありません。

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

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

同じGrok Buildエージェント、同じ認証情報 — それに加えて、その周りに本物の、ポータブルな、オープンソースのデザインワークフローがあります。これはローカルファーストでApache-2.0なので、あなたの作業や認証情報について何もマシンから出ることはありません。

OpenDesignをインストールし、エージェントとしてGrok Buildを選択します。
OpenDesignはxAIと提携していますか？
いいえ。OpenDesign は独立しています。Grok は xAI の商標です。