参考リンク
Antigravity のさらなる参考資料
公開ガイドに項目別に記載されている、Antigravityでのデザイン作業向けのチュートリアル、ドキュメント、ウォークスルー。
Antigravity 
OpenDesign OpenDesign で
Antigravity と
デザインする。
OpenDesignでAntigravityを使ってインターフェースをデザインする方法: 入力としてのスクリーンショット、すべてのパスをチェックする統合ブラウザ、ブリーフからレビュー済みファイルまでの1つのサインアップフロータスク、そして始める前に知っておくべき制限事項について。
このANTIGRAVITYガイドへの3つのルート
Antigravityの出発点を選ぶ
このガイド・UIデザイン
Antigravityでプロダクトインターフェースを構築する
このウォークスルーでは、ブリーフ、参考資料、デザインルール、そしてレビュー済みのHTML成果物を扱います。
このガイドを読む セットアップAntigravityをゼロからセットアップする
クリーンインストールから、UIを構築・検証するAntigravityエージェントまでの完全な道のり。
セットアップに進む 比較Antigravityをほかのエージェントと比較する
デザイン作業においてAntigravityがCodex、Claude Code、Cursorとどう比較されるか、そして別のワークフローがより良い選択となるのはいつか。
比較を見る1つの完全な Antigravity デザインタスク
Antigravityのデザインタスク1つ：ブリーフからインターフェースまで
引き継ぎから最終チェックまで追跡した1つのタスク：Antigravityに渡すブリーフと制約、返ってくる成果物、そして完了と言う前にあなたが行うべきレビュー。以下のインターフェースはこのページ用に作られた例示であり、記録されたAntigravityの実行ではありません。
1設計ブリーフと制約条件
ブリーフチーム製品のサインアップを3ステップでデザインする：アカウント、ワークスペース、チームメイトの招待。引き継ぎ前に、統合ブラウザで各ステップをデスクトップとスマートフォン幅で検証する。
- デザインシステムOpenDesign ペーパーキャンバス — Albert Sans、単一のグリーンアクセント
- ブレークポイント1440pxデスクトップ、390pxモバイル、横スクロールなし
- インタラクションステップナビゲーション、インライン検証、招待スキップの経路、キーボードフォーカス順序
- 出力安定した
data-od-idフックを備えた、単一の自己完結型HTMLファイル
2誰が何をするか：あなた、Antigravity、そしてOpenDesign
- あなた
あなたはブリーフを書き、デザインシステムを選び、受け入れ基準を設定します。
- Antigravity
Antigravityはレイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
OpenDesignはデザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクトファイルとして保持します。
- レビュー
引き継ぎ前に、視覚的階層、8pxグリッド上のスペーシング、両方のブレークポイント、そしてすべてのインタラクションがチェックされます。
3Antigravityの成果物：1440pxと390pxのサインアップフロー
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
ステッパー、フォーム、サマリーは8pxグリッドに整列し、サマリーがフォームの高さを超えることはありません。
階層
視覚的階層
順序は現在のステップ、次に質問、次にフィールドとなり、現在のステップだけがアクセントを持ちます。
レスポンシブ
モバイルレイアウト
モバイルではステッパーが現在のラベル付きのドットに圧縮され、サマリーは合計1行に折りたたまれます。
インタラクション
インタラクションの確認
1ステップ戻る、検証エラーを発生させる、招待ステップをスキップする、をテストする。
適合性
Antigravityが適する場所 — そして適さない場所
Antigravity が適しているのは
- マルチモーダルなスクリーンショット → UI。 Gemini 3.xの画像理解により、参照画像がレスポンシブなマークアップになり、エージェントが元画像と照合します。
- 統合ブラウザ検証。 Antigravityエージェントは内蔵ブラウザを操作し、ブレークポイント全体でUIをレンダリングし、結果をArtifactsとしてキャプチャします。
- Editor View + Manager Surface。 手を動かしてコードを扱うならEditor Viewで作業し、複数のエージェントを非同期に編成するならManager Surfaceを使います。
- 無料で始められる。 パブリックプレビューは個人にとって無料で、Googleアカウントを通じて寛大なGemini 3.xのレート制限を提供します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要。 Antigravityの成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式には、別のベクターワークフローを検討してください。
- 参照も制約もない。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書くことから始めてください。
- このエージェントが必要とする認証情報がない。 必要なもの：Googleアカウント（個人Gmail）、パブリックプレビューでは無料。OpenDesignは認証情報を提供も代理もしません。
- チームがCursorやKiroで作業している。 それらのエージェントにはそれぞれのページがあり、セットアップはエージェントごとに異なります。関連エージェントを参照してください。
互換性
開始前に必要な Antigravity の要件
このページは、OpenDesignデスクトップアプリを通じて接続されたAntigravityを扱います。参照は2026年9月6日に確認済みです。
ツールの範囲Antigravity, by Google
AntigravityはGoogleのエージェントファースト開発プラットフォームです。AI搭載IDEで、自律エージェントがエディター、ターミナル、統合ブラウザをまたいで動作します。Gemini 3とともにパブリックプレビューとして登場しました。ここでの焦点は、OpenDesignを通じてAntigravityでインターフェースをデザインすることであり、Antigravity自体のインターフェースではありません。OpenDesignのセットアップノートには利用可能なエージェントが記載されています。
アカウントと認証Googleアカウント（個人Gmail）、無料期間：
パブリックプレビュー中。Googleアカウントで認証してください — 認証情報はあなたのマシンに留まります。このページはクォータや価格を約束するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについては、ダウンロードページを参照してください。ソース版クイックスタートにあるNode.jsとpnpmの要件は、ソースから実行する場合に重要であり、デスクトップパッケージをインストールする場合には重要ではありません。互換性のある最小Antigravityバージョン：ここでは未検証です。
接続確認成功の目安
インストール済みバージョンが表示する接続手順を使用し、小さなタスクを試してください。Antigravityがそれを処理し、成果物が開くことを確認します。ダウンロード自体は、接続が機能していることを証明しません。
デスクトップアプリから始める
3ステップで行う Antigravity のセットアップ
ダウンロードから始め、インストール済みバージョンのAntigravityセットアップを完了し、小さな結果をテストします。この道筋をたどるのに、OpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのマシン用のパッケージを選択し、インストールして、アプリを起動します。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みなら、次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Antigravity の接続を準備する
インストール済みバージョンに付属するAntigravityの手順を使用します。Googleアカウントでサインインしてください — 認証情報はあなたのマシンに残ります。
# 1. Download Antigravity for your OS (macOS, Windows, Linux) # from the official download page: antigravity.google/download # 2. Launch it and sign in agy # opens Antigravity; sign in with your Google account # 3. Accept the data-use policy, pick a theme, and open your project folder公開ガイドのAntigravityセットアップノートから引用。現在のコマンドはベンダーのドキュメントで確認してください。
チェックポイント使用する予定のエージェントとアカウントを確認します。どちらかが利用できない場合は、より大きなタスクを試す前に互換性を確認してください。 - 3
小さな Antigravity タスクを1件実行する
最初のブリーフは控えめにして、1回の修正を含む完全なループを判断できるようにします。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を構築してください。私のデザインルールを適用してください。デスクトップとモバイル幅で検証してください。
チェックポイント結果を開き、保存状態をテストし、具体的な変更を1つ依頼します。生成はレビューを始めるものであり、終わらせるものではありません。
OpenDesignをソースから実行したい場合は、代わりに技術クイックスタートを使用してください。
Antigravity デザインワークフロー
Antigravityの5段階デザインループ
最初のブリーフからチェック済みHTML成果物まで追跡した、1つのサインアップフローのジョブ。各段階で：あなたの入力、Antigravityの動き、OpenDesignの役割、そしてあなたが依然として担うチェック。
- 1
デザインブリーフ
平易な文を3～6文。その画面が誰に役立つのか、何を達成する必要があるのか、どのプラットフォームが重要かを特定します。
- あなたブリーフを作成します。参照スクリーンショットがあれば添付します。
- Antigravityブリーフとプロジェクト指示ファイルを解析し、曖昧な点について質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、その成果物タイプに合ったスキルを提供します。
- 確認ブリーフが受け入れ基準を明記していることを確認します。生成前にそれらを確定する方が、後から合わせるよりコストがかかりません。
- 2
デザイン制約
デザインシステムと、譲れない点の短いリスト。それがブランド固有の作業とデフォルトの見た目を分ける線です。
- あなたデザインシステムを選び、ブレークポイントを指定し、必ず登場すべきコンポーネントを列挙します。
- Antigravity1行書く前に、DESIGN.mdのトークンと姿勢ルールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、あなたの選択をスキルテンプレートにバインドします。
- 確認トークンがブランドに合っているか確認します。アクセントは1つ、フォントは正しい、角丸は正しい。
- 3
インターフェースを生成する
Antigravityは、レイアウト、スタイル、インタラクション、安定したフックを含む、単一の自己完結型HTMLファイルを生成します。
- あなたAntigravityが確認の質問をしない限り、待ちます。設定するものはありません。
- Antigravityセクションを計画し、HTML、CSS、JavaScriptを書き、その後ファイルを実行して失敗を修復します。
- OpenDesign成果物をプロジェクトフォルダに書き込み、プレビューできるようにインデックス化します。
- 確認まだです。ソースではなく、レンダリングされたファイルを評価してください。
- 4
プレビュー
OpenDesignが指定した幅でファイルをレンダリングします。ここがデザインが実際に評価されるポイントです。
- あなた幅を変更し、インタラクションを試し、要素に直接コメントします。
- Antigravityプレビューへのコメントを収集し、次のリビジョンを準備します。
- OpenDesignプレビューのレンダリングを提供し、コメントや編集を紐付けられるように
data-od-idターゲットを公開します。 - チェック階層、コントラスト、390pxでのオーバーフロー、フォーカス状態、アクセントが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー要素を指定して変更をリクエストします。各リビジョンは新しいファイルとして届くので、痕跡を残さず上書きされることはありません。
- あなたコメントを具体的なリクエストに変換し、タスクがいつ完了したかを判断します。
- Antigravity要求された変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了したら画像またはHTMLをエクスポートします。
- チェックまず変更された領域だけを再確認し、その後、各ブレークポイントで一度ずつページ全体を確認します。
リソース
Antigravity デザインリソース
制限事項
Antigravityの制限、手動チェック、フォールバックパス
- 対象範囲ここでの対象はOpenDesignに組み込まれたエージェントとしてのAntigravityであり、Antigravityの全機能セットではありません。
- 使用制限利用制限とコストは、用意する認証情報（Googleアカウント（個人のGmail）、パブリックプレビューでは無料）によって異なります。このページでは無料枠についての主張は行いません。
- ネットワークローカルプロジェクトファイルはオフライン推論を意味しません。機密性の高い入力を与える前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物はHTMLファイルであり、ベクターデザインドキュメントではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確さはプレビューで確認します。エージェントの自己チェックはあくまで最初のパスにすぎません。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストール済みバージョンの接続手順と認証を参照してください。設定を変更する前に、エラーと最後に正常に動作した成果物を保存しておいてください。
よくある質問
AntigravityとOpenDesignに関するよくある質問
Antigravityは実際にデザイン作業を扱えますか？
はい。デザイン性のあるスキル、デザインシステム、実際の参照画像をコンテキストとして与えれば、Antigravityは本番品質のレスポンシブUIを生成し、マルチモーダルなGemini 3.xエージェントが統合ブラウザ上で出力を検証します。こうしたコンテキストがないと、汎用的な見た目になりがちです。この差をOpenDesignが埋めます。
Antigravityでデザインするには料金を払う必要がありますか？
Antigravityはパブリックプレビューとして個人向けに無料で利用でき、個人のGoogleアカウントでサインインすればGemini 3.xの利用制限も緩やかです。いずれの場合も、OpenDesignがお客様の認証情報を代理で扱うことはありません。
Antigravityがデザインに適している具体的な理由は何ですか？
3つの理由があります。エージェントがネイティブにマルチモーダルなGemini 3.xモデル上で動作し、参照スクリーンショットを的確に読み取れること、エージェントが操作してUIを検証できる統合ブラウザを備えていること、そしてレビュー可能な成果物（スクリーンショットやブラウザ録画）としてArtifactsを提示することです。ただし、センスの部分はお客様が用意するデザインシステム、スキル、参照素材によって決まります。
フロントエンドデザインにおけるAntigravityとClaude Codeの比較は？
どちらも優れています。Claude Codeは、コードベースを踏まえた具体的なデザイン判断に定評があります。一方、Antigravityの強みはエージェントファーストなプラットフォームである点で、マルチモーダルなGemini 3.x、検証用の統合ブラウザ、レビュー可能なArtifactsが特徴です。多くのチームが両方を使い分けています。OpenDesignなら、デザインワークフローを変えずにエージェントを切り替えられます。
Antigravityが構築したものはどのように検証しますか？
Antigravityにはエージェントが操作できる統合ブラウザが搭載されているため、UIをレンダリングし、複数のブレークポイントで確認し、スクリーンショットやブラウザ録画をArtifactsとして取得できます。これらのArtifactsを確認し、エージェントに出力と参照素材を比較させることで、仕様どおりの結果を保つことができます。
Antigravityとは正確には何か
AntigravityはGoogleのエージェントファースト開発プラットフォームです — サイドバーのチャットボットではなく自律エージェントが作業を行うように作られた、AI搭載IDEです。2025年11月18日にGemini 3とともに発表され、個人向けには無料のパブリックプレビューとして提供されています。エディタ、ターミナル、統合ブラウザを横断して動作するエージェントに、複雑なマルチツールのソフトウェアタスクを委任できます。そのエージェントは主にGoogleのマルチモーダルGemini 3.xモデル上で動作します。
デザイン作業では、3つの特性が際立ちます。Gemini 3.xがネイティブにマルチモーダルであるため、エージェントはスクリーンショットを読み取り、実際のレイアウトについて推論します。実際のブラウザを操作できるため、構築したものをレンダリングして検証できます。そしてArtifacts — タスクリスト、計画、スクリーンショット、ブラウザ録画 — を提示するので、生のツールログではなく具体的な出力をレビューできます。
Editor View + Manager Surface:Editor Viewはタブ補完とインラインコマンドを備えた見慣れたAI IDEです。Manager Surfaceでは、複数のエージェントをワークスペース全体で非同期に起動・編成・監視できます — 長いデザインタスクを実行するのに自然な場所です。
統合ブラウザ + Artifacts:エージェントは内蔵ブラウザ内で動作し、Artifacts(スクリーンショット、ブラウザ録画、タスクリスト、計画)を出力できます。それらにはフィードバックを残せます — 後付けではなくプラットフォームに組み込まれた検証ループです。
無料で開始:個人のGoogleアカウントでサインインすると、Gemini 3.xで寛大なレート制限が得られます。プラットフォームはmacOS、Windows、Linuxで動作します。
認証情報:Googleアカウント(個人のGmail)、パブリックプレビュー中は無料
バイナリ:agyで起動、macOS、Windows、Linuxで動作
ベンダー:Google
デザイン作業では、3つの特性が際立ちます。Gemini 3.xがネイティブにマルチモーダルであるため、エージェントはスクリーンショットを読み取り、実際のレイアウトについて推論します。実際のブラウザを操作できるため、構築したものをレンダリングして検証できます。そしてArtifacts — タスクリスト、計画、スクリーンショット、ブラウザ録画 — を提示するので、生のツールログではなく具体的な出力をレビューできます。
Editor View + Manager Surface:Editor Viewはタブ補完とインラインコマンドを備えた見慣れたAI IDEです。Manager Surfaceでは、複数のエージェントをワークスペース全体で非同期に起動・編成・監視できます — 長いデザインタスクを実行するのに自然な場所です。
統合ブラウザ + Artifacts:エージェントは内蔵ブラウザ内で動作し、Artifacts(スクリーンショット、ブラウザ録画、タスクリスト、計画)を出力できます。それらにはフィードバックを残せます — 後付けではなくプラットフォームに組み込まれた検証ループです。
無料で開始:個人のGoogleアカウントでサインインすると、Gemini 3.xで寛大なレート制限が得られます。プラットフォームはmacOS、Windows、Linuxで動作します。
認証情報:Googleアカウント(個人のGmail)、パブリックプレビュー中は無料
バイナリ:agyで起動、macOS、Windows、Linuxで動作
ベンダー:Google
マルチモーダルなGeminiと内蔵ブラウザがデザインに適する理由
Antigravityのデザイン上の強みはモデルとプラットフォームが一体となったところから生まれます — ただし、どのエージェントでもそうであるように、センスは依然として人間が供給しなければなりません。
強力なマルチモーダル理解:Gemini 3.xはネイティブにマルチモーダルなので、エージェントは参照スクリーンショットをうまく読み取ります — 散文の説明から推測するのではなく、レンダリング結果を画像と比較します。
検証のための統合ブラウザ:エージェントは実際のブラウザを操作するので、UIをレンダリングし、各状態をチェックし、壊れたレイアウトを捕まえます — そしてその結果をレビュー可能なブラウザ録画のArtifactとしてキャプチャします。
エージェントが読む規約:トークン、コンポーネント、レビュールールをエージェントのプロジェクトコンテキストに書き込んでおけば、デフォルトの見た目ではなくあなたのブランドに沿って作業します。
センスは、あなたが提供する3つのインプットから生まれます:デザインシステム、スキル、そして実際の参照画像です。
教訓はどのエージェントでも同じです:Antigravityはデフォルトではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。OpenDesignはまさにそれらのインプットをパッケージ化しており、だからこそ両者は相性が良いのです(詳細は後述)。
強力なマルチモーダル理解:Gemini 3.xはネイティブにマルチモーダルなので、エージェントは参照スクリーンショットをうまく読み取ります — 散文の説明から推測するのではなく、レンダリング結果を画像と比較します。
検証のための統合ブラウザ:エージェントは実際のブラウザを操作するので、UIをレンダリングし、各状態をチェックし、壊れたレイアウトを捕まえます — そしてその結果をレビュー可能なブラウザ録画のArtifactとしてキャプチャします。
エージェントが読む規約:トークン、コンポーネント、レビュールールをエージェントのプロジェクトコンテキストに書き込んでおけば、デフォルトの見た目ではなくあなたのブランドに沿って作業します。
センスは、あなたが提供する3つのインプットから生まれます:デザインシステム、スキル、そして実際の参照画像です。
教訓はどのエージェントでも同じです:Antigravityはデフォルトではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。OpenDesignはまさにそれらのインプットをパッケージ化しており、だからこそ両者は相性が良いのです(詳細は後述)。
デザイン作業のためにAntigravityをゼロからセットアップする
クリーンなマシンから、UIを構築・検証できるAntigravityエージェントに至るまでの全手順を以下に示します。プレビュー中はアプリ内メニューの正確な構成が変わる可能性があるため、ここでは確実に依拠できるレベルにとどめています。
セットアップの流れ:ダウンロード → Googleでサインイン → プロジェクトを開く → デザインルールとスキルを追加 → 統合ブラウザで検証。
デザインルールを書き込む:トークン、プリミティブ、規約をエージェントのプロジェクトコンテキストに置き、出力が汎用的な見た目にデフォルトするのではなくブランドに合うようにします。
統合ブラウザを使う:エージェントにAntigravity内蔵ブラウザでレンダリングさせ、ブレークポイントごとに出力をチェックさせます — ビルドが通るかだけでなく、UIが正しく見えるかを検証します。
コマンドとバージョン固有の詳細については、変更される可能性のある現在のセットアップセクションを参照してください。
前回のガイドにあった過去のコマンド例です。現在の構文はリンクされたベンダー文書で確認してください。
セットアップの流れ:ダウンロード → Googleでサインイン → プロジェクトを開く → デザインルールとスキルを追加 → 統合ブラウザで検証。
デザインルールを書き込む:トークン、プリミティブ、規約をエージェントのプロジェクトコンテキストに置き、出力が汎用的な見た目にデフォルトするのではなくブランドに合うようにします。
統合ブラウザを使う:エージェントにAntigravity内蔵ブラウザでレンダリングさせ、ブレークポイントごとに出力をチェックさせます — ビルドが通るかだけでなく、UIが正しく見えるかを検証します。
コマンドとバージョン固有の詳細については、変更される可能性のある現在のセットアップセクションを参照してください。
# 1. OSに合わせてAntigravityをダウンロード(macOS、Windows、Linux)
# 公式ダウンロードページ: antigravity.google/download
# 2. 起動してサインイン
agy # Antigravityを開く。Googleアカウントでサインイン
# 3. データ利用ポリシーに同意し、テーマを選び、プロジェクトフォルダを開く
# 4. Editor ViewまたはManager Surfaceでエージェントタスクを開始し、
# Gemini 3.xモデル(例: Gemini 3.1 Pro)を選択前回のガイドにあった過去のコマンド例です。現在の構文はリンクされたベンダー文書で確認してください。
スクリーンショットをUIに変える：そのワークフロー
Antigravityで最も効果の高いデザインループは、参照画像を動作するレスポンシブUIに変え、一致するまで反復するというものです — マルチモーダルモデルに頼って出力を参照と比較し、統合ブラウザで検証します。
手持ちで最も明確なビジュアル参照から始めましょう — そしてヒーローショット1枚だけでなく、複数の状態(デスクトップとモバイル、ホバー、空、ローディング)を含めます。
プロンプトでは具体的に。強力なモデルでも、曖昧なプロンプトは汎用的なUIを生みます。
デザインシステムと規約をエージェントのプロジェクトコンテキストに置き、トークンと正規のプリミティブがどこにあるかを伝えます。
エージェントにAntigravityの統合ブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認させます。
エージェントに自身の実装をスクリーンショットと比較させて反復します — ビルドが通ることを確認するだけではなく — そして生成されるブラウザ録画とスクリーンショットのArtifactsをレビューします。
参照画像を添付し、具体的な制約を与えて、エージェントにブラウザで検証させます:
プロンプトは小さく焦点を絞り、良い反復はコミットし悪い反復は元に戻します(元に戻したことはエージェントに伝えます)。そうすれば各パスがクリーンなベースの上に積み上がります。
前回のガイドにあった過去のコマンド例です。現在の構文はリンクされたベンダー文書で確認してください。
手持ちで最も明確なビジュアル参照から始めましょう — そしてヒーローショット1枚だけでなく、複数の状態(デスクトップとモバイル、ホバー、空、ローディング)を含めます。
プロンプトでは具体的に。強力なモデルでも、曖昧なプロンプトは汎用的なUIを生みます。
デザインシステムと規約をエージェントのプロジェクトコンテキストに置き、トークンと正規のプリミティブがどこにあるかを伝えます。
エージェントにAntigravityの統合ブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認させます。
エージェントに自身の実装をスクリーンショットと比較させて反復します — ビルドが通ることを確認するだけではなく — そして生成されるブラウザ録画とスクリーンショットのArtifactsをレビューします。
参照画像を添付し、具体的な制約を与えて、エージェントにブラウザで検証させます:
プロンプトは小さく焦点を絞り、良い反復はコミットし悪い反復は元に戻します(元に戻したことはエージェントに伝えます)。そうすれば各パスがクリーンなベースの上に積み上がります。
# Antigravityのエージェントタスクで、reference-desktop.pngと
# reference-mobile.pngを添付し、次のようにプロンプトする:
このデザインをReact + Vite + Tailwind + TypeScriptで実装して。
既存のデザインシステムのコンポーネントとトークンを再利用して。
スペーシング、レイアウト、階層を一致させ、レスポンシブにして。
統合ブラウザでレンダリングし、ブレークポイント全体で
参照と一致するまで反復し、スクリーンショットを見せて。前回のガイドにあった過去のコマンド例です。現在の構文はリンクされたベンダー文書で確認してください。
エージェントのコンテキスト、ツール、Artifacts
Antigravityを継続的なデザイン作業に実用的にする3つの拡張ポイントがあり、いずれもオープンなデザインワークフローにきれいに対応します。
プロジェクトコンテキスト:永続的なプロジェクトルールは、デザイン規約を置く耐久性のある場所です — エージェントがタスクごとに読むトークン、プリミティブ、レビューチェックリストにより、出力がブランドに沿い続けます。
統合ブラウザ + ターミナル:エージェントはエディタ、ターミナル、内蔵ブラウザを横断して動作するため、プラットフォームを離れずに参照を集め、開発サーバーを実行し、レンダリングされたUIを検証できます。
レビューするArtifacts:タスクリスト、実装計画、スクリーンショット、ブラウザ録画がエージェントの作業を可読にします。Artifactにフィードバックを残すと、エージェントが修正を取り込みます。
これらは本格的なデザインループに必要な能力です — まさにOpenDesignが、プロジェクトごとに作り直すのではなく編成するために作られているものです。
プロジェクトコンテキスト:永続的なプロジェクトルールは、デザイン規約を置く耐久性のある場所です — エージェントがタスクごとに読むトークン、プリミティブ、レビューチェックリストにより、出力がブランドに沿い続けます。
統合ブラウザ + ターミナル:エージェントはエディタ、ターミナル、内蔵ブラウザを横断して動作するため、プラットフォームを離れずに参照を集め、開発サーバーを実行し、レンダリングされたUIを検証できます。
レビューするArtifacts:タスクリスト、実装計画、スクリーンショット、ブラウザ録画がエージェントの作業を可読にします。Artifactにフィードバックを残すと、エージェントが修正を取り込みます。
これらは本格的なデザインループに必要な能力です — まさにOpenDesignが、プロジェクトごとに作り直すのではなく編成するために作られているものです。
デザインのためのAntigravity、Codex、Claude Code、Cursor、Gemini CLI：比較の方法
デザイン作業に単一の勝者はいません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平な要約は次のとおりです:
Antigravity — マルチモーダルGemini 3.x、自己検証のための統合ブラウザ、レビュー可能なArtifactsを備えたエージェントファーストIDE。プレビュー中は無料 — UIを内蔵ブラウザで検証する非同期マルチエージェントビルド
Codex — フロントエンドスキルによる強い視覚的洗練、サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール
Claude Code — 具体的なデザイン判断(hex、スペーシング、タイプ)とコードベースを理解したUX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的なビルド&シーループ — IDE内での密な反復と観察を伴うUI作業
Gemini CLI — 1Mトークンコンテキストと無料枠を持つ、マルチモーダルGemini上のオープンソース端末エージェント — スクリーンショットの多い端末作業と、デザインシステム全体をコンテキストに保持すること
繰り返し聞かれるコミュニティの評決は、センスは人間から来るというものです:スキル、参照、制約がなければ、どれも汎用的な美意識にデフォルトします。それが解決すべき本当の問題であり、それはモデルの形ではなくデザインツールの形をしています。
エージェント — デザインの強み — 最適な用途
Antigravity — マルチモーダルGemini 3.x、自己検証のための統合ブラウザ、レビュー可能なArtifactsを備えたエージェントファーストIDE。プレビュー中は無料 — UIを内蔵ブラウザで検証する非同期マルチエージェントビルド
Codex — フロントエンドスキルによる強い視覚的洗練、サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール
Claude Code — 具体的なデザイン判断(hex、スペーシング、タイプ)とコードベースを理解したUX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的なビルド&シーループ — IDE内での密な反復と観察を伴うUI作業
Gemini CLI — 1Mトークンコンテキストと無料枠を持つ、マルチモーダルGemini上のオープンソース端末エージェント — スクリーンショットの多い端末作業と、デザインシステム全体をコンテキストに保持すること
繰り返し聞かれるコミュニティの評決は、センスは人間から来るというものです:スキル、参照、制約がなければ、どれも汎用的な美意識にデフォルトします。それが解決すべき本当の問題であり、それはモデルの形ではなくデザインツールの形をしています。
エージェント — デザインの強み — 最適な用途
よくある落とし穴と“AI slop”な見た目の回避
AI生成デザインについて最もよくある不満は、汎用的に見えることです — 柔らかなグラデーション、浮いたパネル、大きすぎる角丸、劇的な影、「AIが作った」と叫ぶようなInter+紫の雰囲気。他に報告されている問題には、壊れたモバイルレイアウトや、指示がUIのコピーに漏れ出すことなどがあります。これらはいずれもAntigravity固有のものではなく、キュレーションされたデザインコンテキストなしでエージェントを走らせたときに起きることです。
美的スキルを追加する:キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく本物の方向性にコミットさせます。
統合ブラウザで検証する:マルチモーダルモデルとAntigravityの内蔵ブラウザを使い、ブレークポイントごとにレンダリングと自己チェックを行うことで、レイアウトがモバイルで黙って壊れなくなります。
トークンと参照を提供する:本物のデザイントークンと参照スクリーンショットは、出力品質に対する最大のレバーです。
ルールをプロジェクトコンテキストに書き込む:「ヒーローカード禁止、書体は最大2つ、ブランド優先の階層」といったルールを、エージェントがタスクごとに読む場所に置きます。
どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることだという点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持するのは、OpenDesignが取り除く苦労です。
美的スキルを追加する:キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく本物の方向性にコミットさせます。
統合ブラウザで検証する:マルチモーダルモデルとAntigravityの内蔵ブラウザを使い、ブレークポイントごとにレンダリングと自己チェックを行うことで、レイアウトがモバイルで黙って壊れなくなります。
トークンと参照を提供する:本物のデザイントークンと参照スクリーンショットは、出力品質に対する最大のレバーです。
ルールをプロジェクトコンテキストに書き込む:「ヒーローカード禁止、書体は最大2つ、ブランド優先の階層」といったルールを、エージェントがタスクごとに読む場所に置きます。
どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることだという点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持するのは、OpenDesignが取り除く苦労です。
OpenDesign内でAntigravityを使ってデザインする
OpenDesignは、上記のワークフローが繰り返し求めてくるオープンソースのデザインレイヤーです。Antigravityをファーストパーティのアダプタとして扱い、キュレーションされたスキルとデザインシステムライブラリ、構造化されたレンダーパイプライン、ローカルデスクトップUIで包み込みます — それにより、Antigravityを良くするデザインコンテキストが毎回手作業で組み立てられるのではなく、最初の実行時から存在します。OpenDesignはオープンソースでローカルファーストなので、この組み合わせは自然にフィットします。
OpenDesignをインストールし、エージェントとしてAntigravityを選択します。
Googleアカウントで認証します — 認証情報はあなたのマシンにとどまり、当社を通じてプロキシされることはありません。
デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなくあなた自身のリポジトリに存在します。
同じAntigravityエージェント、同じGoogleアカウント — さらにその周りに本物の、ポータブルな、オープンソースのデザインワークフロー。OpenDesignはローカルファーストでApache-2.0なので、あなたの作業や認証情報がマシンから出ることはありません。
OpenDesignをインストールし、エージェントとしてAntigravityを選択します。
Googleアカウントで認証します — 認証情報はあなたのマシンにとどまり、当社を通じてプロキシされることはありません。
デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなくあなた自身のリポジトリに存在します。
同じAntigravityエージェント、同じGoogleアカウント — さらにその周りに本物の、ポータブルな、オープンソースのデザインワークフロー。OpenDesignはローカルファーストでApache-2.0なので、あなたの作業や認証情報がマシンから出ることはありません。
OpenDesignはGoogleと何らかの提携関係がありますか？
いいえ。OpenDesignは独立しており、AntigravityとGeminiはGoogleの商標です。