デザインのための Antigravity。

Antigravity とは実際に何か

Antigravity は Google のエージェントファースト開発プラットフォームで、サイドバーのチャットボットではなく自律エージェントが作業をこなすよう作られた AI 駆動の IDE です。2025 年 11 月 18 日に Gemini 3 とともに発表され、個人向けには無料のパブリックプレビューで利用でき、エディタ・ターミナル・統合ブラウザをまたいで動作するエージェントに、複雑でマルチツールなソフトウェアタスクを委任できます。そのエージェントは主に Google のマルチモーダルな Gemini 3.x モデルで動きます。

デザイン作業では三つの性質が際立ちます。Gemini 3.x がネイティブにマルチモーダルなため、エージェントはスクリーンショットを読み実際のレイアウトを推論します。実際のブラウザを駆動できるため、構築したものを描画して検証します。そして Artifacts — タスクリスト、計画、スクリーンショット、ブラウザ録画 — を提示するため、生のツールログではなく具体的な成果物をレビューできます。

• Editor View + Manager Surface: Editor View はタブ補完とインラインコマンドを備えた使い慣れた AI IDE です。Manager Surface では複数のエージェントを生成・編成し、ワークスペースをまたいで非同期に作業させ観察できます。長いデザインタスクを走らせるのに自然な場です。
• 統合ブラウザ + Artifacts: エージェントは組み込みブラウザ内で操作し、フィードバックを残せる Artifacts（スクリーンショット、ブラウザ録画、タスクリスト、計画）を生成します。検証ループが後付けではなくプラットフォームに組み込まれています。
• 無料で開始: 個人の Google アカウントでサインインすると Gemini 3.x の寛大なレート上限が得られます。プラットフォームは macOS、Windows、Linux で動作します。

• ベンダー：Google
• 認証情報：Google アカウント（個人の Gmail）、パブリックプレビュー期間中は無料
• バイナリ：agy で起動。macOS、Windows、Linux で動作

なぜマルチモーダルな Gemini と組み込みブラウザがデザインに適するのか

Antigravity のデザイン上の強みは、モデルとプラットフォームの組み合わせから来ます。ただし、どのエージェントも同じく、センスは人が与える必要があります。

• 強力なマルチモーダル理解: Gemini 3.x がネイティブにマルチモーダルなため、エージェントは参照スクリーンショットをよく読み、文章による説明から推測するのではなく、描画した出力を画像と照らし合わせます。
• 検証用の統合ブラウザ: エージェントは実際のブラウザを駆動するので、UI を描画し各状態にわたって点検し、壊れたレイアウトを捕まえます。結果はレビュー可能なブラウザ録画 Artifact として記録されます。
• エージェントが読む規約: トークン・コンポーネント・レビュールールをエージェントのプロジェクトコンテキストに記述すれば、既定の見た目ではなくあなたのブランドに沿って作業します。

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

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

まっさらなマシンから、UI を構築・検証できる Antigravity エージェントまでの全行程を示します。プレビュー期間中はアプリ内のメニューが変わることがあるため、ここは頼りにできる粒度に留めます。

# 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

# 4. Start an agent task in the Editor View or the Manager Surface,
#    selecting a Gemini 3.x model (e.g. Gemini 3.1 Pro)

• デザインルールを記述する: トークン・プリミティブ・規約をエージェントのプロジェクトコンテキストに置けば、出力は無個性な見た目に流れず、ブランドに合致します。
• 統合ブラウザを使う: エージェントに Antigravity の組み込みブラウザで描画させ、各ブレークポイントで出力を点検させます。ビルドが通るだけでなく、UI が正しく見えるかを検証します。

スクリーンショットから UI へのワークフロー

Antigravity で最も効果の高いデザインループは、参照画像を動作するレスポンシブな UI に変え、一致するまで反復することです。マルチモーダルモデルを頼りに出力を参照と照らし合わせ、統合ブラウザでそれを検証します。

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

参照画像を添付して具体的な制約を与え、エージェントにブラウザで検証させます：

# In an Antigravity agent task, attach reference-desktop.png and
# reference-mobile.png, then prompt:

Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the integrated browser and iterate until it matches
the references across breakpoints, and show me the screenshots.

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

エージェントコンテキスト・ツール・Artifacts

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

• プロジェクトコンテキスト: 永続的なプロジェクトルールは、デザイン規約の耐久性ある置き場です。エージェントが毎タスクで読むトークン・プリミティブ・レビューチェックリストが、出力をブランドに沿わせ続けます。
• 統合ブラウザ + ターミナル: エージェントはエディタ・ターミナル・組み込みブラウザをまたいで操作するので、参照を集め、開発サーバを起動し、描画された UI を検証することがプラットフォームを離れずにできます。
• レビューする Artifacts: タスクリスト、実装計画、スクリーンショット、ブラウザ録画がエージェントの作業を読み取り可能にします。Artifact にフィードバックを残せば、エージェントが修正を取り込みます。

これらは本格的なデザインループに必要な機能であり、プロジェクトごとに作り直すのではなく、まさに Open Design がオーケストレーションするために作られた類のものです。

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

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

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

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

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

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

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

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

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

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

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

よくある質問

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

   はい。美的スキル、デザインシステム、本物の参照画像がコンテキストにあれば、Antigravity は本番品質のレスポンシブな UI を生み出し、マルチモーダルな Gemini 3.x エージェントが統合ブラウザで出力を検証します。そのコンテキストがないと無個性な見た目に流れがちで、それこそ Open Design が埋めるギャップです。

2. 02 Antigravity でデザインするのに支払いは必要ですか？ +

   Antigravity は個人向けに無料のパブリックプレビューで利用でき、個人の Google アカウントでサインインすると Gemini 3.x の寛大なレート上限が得られます。いずれにせよ Open Design があなたの認証情報をプロキシすることはありません。

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

   三つあります。エージェントが参照スクリーンショットをよく読むネイティブにマルチモーダルな Gemini 3.x モデルで動くこと。UI を検証するためにエージェントが駆動できる統合ブラウザを備えること。そしてレビューできる Artifacts — スクリーンショットとブラウザ録画 — を提示すること。ただしセンスは、あなたが供給するデザインシステム・スキル・参照から来ます。

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

   どちらも強力です。Claude Code は具体的でコードベースを理解したデザイン判断で知られています。Antigravity の強みはエージェントファーストなプラットフォーム — マルチモーダルな Gemini 3.x、検証用の統合ブラウザ、レビュー可能な Artifacts — です。多くのチームは両方を使います。Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Antigravity が構築したものをどう検証しますか？ +

   Antigravity はエージェントが駆動できる統合ブラウザを備えるので、UI を描画し、各ブレークポイントで点検し、スクリーンショットとブラウザ録画を Artifacts として記録します。それらの Artifacts をレビューし、エージェントに出力を参照と照らし合わせさせることが、結果を仕様どおりに保つ方法です。

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

   いいえ。Antigravity は Google の製品です。Open Design は独立したオープンソースプロジェクトで、ファーストパーティのアダプタとしてこれをサポートします。Antigravity と Gemini は Google の商標です。

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

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