参考リンク
Grok に関する参考資料
公開されているガイドに記載されている、Grokでデザインを行うためのチュートリアル、ドキュメント、ウォークスルーです。
Grok 
OpenDesign OpenDesign で
Grok と
デザインする。
OpenDesignでGrok Buildを使いインターフェースを設計する方法を解説します。参考ポスターの使い方、変更前のプラン作成、ブリーフからレビュー済みファイルまでのランディングページ制作例、そして開始前に知っておくべき制限を紹介します。
ブリーフからインターフェースへ01 / Grok
アイデアを持ち込むのはあなたです↗
「ポスターから作られたイベントページ、
コードの前に計画がある。」
このGrokガイドへの3つの入り口
Grokで始める場所を選ぶ
1つの完全なGrokデザインタスク
Grokデザインタスク：ブリーフからインターフェースまで
1つのタスクを最初から最後まで示します。渡すブリーフと制約、戻ってくる成果物、そして完了までに実行するチェックです。以下のインターフェースは、このページのために作成された説明用の例であり、実際に記録されたGrokの実行結果ではありません。
1設計ブリーフと制約条件
ブリーフ添付のポスター画像から、2日間の開発者カンファレンスのランディングページを設計してください。日付と会場、スケジュールの予告、スピーカー、チケットのコールトゥアクションを含めます。デスクトップとスマートフォン向けに。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクションチケットCTA、スケジュール日の切り替え、スピーカーカード
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2作業分担：あなた、Grok、OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Grok
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Grok 成果物：1440px と 390px でのイベントページ
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
ヒーロー、トラック、実績を8pxグリッドに配置します。ポスターアートはトリミングされ、圧縮はされません。
階層
視覚的階層
まず日付とタイトル、続いてチケットボタン。アクセントカラーはそのボタンのみに使用します。
レスポンシブ
モバイルレイアウト
タイトル、日付、チケットボタンをアートの上に配置し、トラックは順番に積み重ねます。
インタラクション
インタラクションの確認
チケットを開く、スケジュールの日を切り替える、1つのスピーカーカードを追う。
適合性
Grokが適したタスクと適さないタスク
Grokが適している場合
- 画像を認識したスクリーンショット→UI。 Grokモデルは画像入力を受け付けるため、参照画像をレスポンシブなマークアップに変換し、結果を画像と照合して確認します。
- 変更前のプランモード。 ファイルが変更される前に承認する構造化されたプランにより、デザインの意図を差分の確認後ではなく事前にレビューできます。
- AGENTS.md + MCP。 コンテキストファイルにはあなたの規約が反映され、Figma MCPサーバーが実際のデザインコンテキストをコードに取り込みます。
- アカウントでサインインします。 SuperGrokまたはX Premium+を通じてOAuthで認証するか、ヘッドレス利用向けにxAI APIキー（BYOK）を用意します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物は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 key（BYOK）で認証してください。認証情報はお使いのマシン内に保持されます。このページでは、クォータや価格について保証していません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページをご確認ください。ソースのクイックスタートに記載されている Node.js と pnpm の要件は、ソースから実行する場合に適用されるもので、デスクトップパッケージのインストールには適用されません。互換性のある Grok の最小バージョンについては、ここでは確認していません。
接続確認成功の目安
インストールしたバージョンに表示される接続手順に従い、小さなタスクを実行してください。Grok がそれを処理し、成果物が開くことを確認してください。ダウンロードだけでは、動作する接続は確立されません。
デスクトップアプリから始める
3ステップで行う Grok のセットアップ
まずダウンロードし、インストールしたバージョン向けの Grok セットアップを完了させ、小さな結果を確認してください。この手順に従うために OpenDesign をソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みの場合は、次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Grok の接続を準備する
インストールしたバージョンの Grok の手順に従ってください。SuperGrok アカウントまたは xAI API key（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
小さな Grok タスクを1つ実行する
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Grok のデザインワークフロー
5ステップで見る Grok のデザインワークフロー
同じイベントページのタスクを、ブリーフから検証済みファイルまで追った例です。各ステップでは、あなたが提供するもの、Grok が行うこと、OpenDesign が提供するもの、そしてあなたが確認する内容を示します。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Grokブリーフとプロジェクトの指示ファイルを読み取り、あいまいな点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Grokコードを1行書く前に、DESIGN.md のトークンと方針ルールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Grok は、レイアウト、スタイル、インタラクション、安定したフックを含む自己完結型の HTML ファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Grokセクションを計画し、HTML、CSS、JavaScriptを記述して、ファイルを実行し、失敗した箇所を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Grokプレビューに対するコメントを読み取り、次のリビジョンを準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Grok変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Grok デザインリソース
制限事項
Grokの制約事項、手動チェック、フォールバック
- 対象範囲このページは、OpenDesignに接続されたエージェントとしてのGrokを扱っており、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で最初のデザインタスクを開始する
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。