← 기사 목록
日本語https://zenn.dev/topics/ai/feed

Googleの最新AIコーディング支援「Modern Web Guidance」をAntigravity（agy）と連携してみた

원문 사이트로 이동 ↗

추출된 키워드

34개
MWG·5Antigravity·5agy·5Modern Web Guidance·5AIコーディング支援·4AIコーディングエージェント·4Tailwind v4·4Tailwind CSS·4Vite·4Gemini 3.5 Flash·4plugin.json·4Google·4Chrome DevToolsチーム·4AIエージェント·4Web標準·4@tailwindcss/vite·3JavaScript·3JS·3npm·3TypeScript·3TS·3:user-invalid·3CSS·3Scroll Snap·3Scroll-driven animations·3Popover API·3LLM·3HTML5·3セマンティックHTML5·3Node.js·2WEBStorm·2Intel Arc Pro B60·2Intel(R) Core(TM) i5-12400·2Fedora Linux 43·2

원문

13,571자
Googleの最新AIコーディング支援「Modern Web Guidance」をAntigravity（agy）と連携してみた

Googleの最新AIコーディング支援「Modern Web Guidance」をAntigravity（agy）と連携してみた

はじめに

今回は、Google（Chrome DevToolsチーム）が初期プレビューとして公開した、AIエージェント向けの 知見集 「Modern Web Guidance (以後MWG)」 を取り上げます 。

このツールは、AIエージェントにWeb標準の最新APIを正しく学習させ、JavaScript（以後JS）を極限まで削ったクリーンなフロントエンドコードを生成させるための強力な盾です 。

今回は、Fedora/Macなどの環境において、 sudo（管理者権限）を一切使わず、一般ユーザー権限のローカル環境だけでソースコードからビルドし、さらに高性能AIエージェントCLIの「Antigravity (agy)」と安全に一元管理・自動連携させるまでのステップを完全解説します。

agy
についての詳しい解説はこちらでしています。

 開発環境


  • 
OS: Fedora Linux 43 (Workstation Edition) x86_64
  • 
CPU: 12th Gen Intel(R) Core(TM) i5-12400
  • 
GPU: Intel Arc Pro B60
  • 
エディタ: JetBrains製のWEBStormエディターなど

 Modern Web Guidanceとは？


https://developer.chrome.com/
MWG とは、Google（Chrome DevToolsチーム）が初期プレビューとして公開した、AIコーディングエージェントに最新のWeb標準仕様を正しく学習・参照させるための専門的なスキル集です。

 なぜ今、これが必要なのか？


現在の主要なLLMは、過去の膨大なWebデータから学習しているため、新しいフロントエンドのコードを書かせようとすると、どうしても一世代前の古いJSを盛り盛りに使った実装 を提案しがちです。
しかし現在のモダンブラウザは、以下のような強力なネイティブ機能を最初から備えています。
  • 
Popover API / ネイティブ
    <dialog>
    要素：
    複雑なモーダル制御をJS不要に
  • 
Scroll-driven animations / Scroll Snap：
    スクロール連動アニメーションをCSSだけで実現
  • 

    :user-invalid
    疑似クラス：
    ユーザーが操作を終えた後にだけエラーを出すスマートなフォームバリデーション
Modern Web GuidanceをAIエージェントに読み込ませることで、AIが過去のレガシーな実装へ誤って繋がることを防ぐ「ガードレール」になります。

結果として、ブラウザ標準の機能を極限まで活かした、圧倒的に軽量で型安全なクリーンコードをAIが一発で吐き出してくれるようになります。

 1. グローバルを汚さない「ローカル一元管理」のメリット


通常、公式ドキュメントでは 
npx modern-web-guidance@latest install
 を実行すると各エージェントのグローバル領域への配置が案内されます 。しかし、システム領域を汚すと以下のようなデメリットがあります。
  • 

    sudo
    によるパーミッション（権限）の混乱やエラー
  • OSアップデート時やNode.jsバージョン変更時の環境汚染
  • セキュリティリスク（AIに常にroot権限で触らせるのはNG）
そこで今回は、自分のホームディレクトリ配下（例: 
~/any-tools/
）に知見のマスター（本尊） を1つだけ作成し、それを 
agy
 に参拝に行かせる仕組みを構築します。
~/any-tools/modern-web-guidance/
├── dist/
│   └── index.js       # ビルド(npm run build)によって生成された実行ファイル
├── src/               # TypeScriptのソースコード領域
├── node_modules/      # 依存ライブラリ
├── package.json
├── tsconfig.json
└── plugin.json        # 🔥【手動で自作】agyに本尊の場所を教える定義ファイル


 2. ローカル環境への配置とTypeScriptのビルド


Googleが公開している本家ソースリポジトリはビルド前のTypeScript（以後TS）環境であるため、そのまま実行しようとすると 
could not determine executable to run
 エラーで弾かれます。そのため、手元でコンパイルを行う必要があります。
# 1. 任意の場所にマスターディレクトリを作成して移動
mkdir -p ~/any-tools/modern-web-guidance
cd ~/any-tools/modern-web-guidance

# 2. 汎用CLIコマンドでガイダンスのソース実体ファイルを展開
npx modern-web-guidance@latest install

# 3. 開発依存ライブラリのインストール
npm install

# 4. TypeScriptのビルドを実行（dist/index.js が生成される）
npm run build


 💡 連携前の単体動作チェック


agy
 に読み込ませる前に、ローカル単体で検索ロジックが生きているかテストします。
node dist/index.js performance

ターミナルに  Happy developing 🚀 と出力されれば、ローカルでのコンパイルは無事に100%成功です！

 3. 【最重要】ハマりポイント：
failed to read plugin.json
 エラーの自作ハック


ここからが本題です。ビルドが成功したディレクトリを 
agy plugin install
 で登録しようとすると、以下のエラーに直面して立ち往生します。
Error: failed to read plugin.json: open plugin.json: no such file or directory


 🔍 エラーの原因


Google公式のMWGリポジトリは特定のツールに依存しない「汎用リポジトリ」として配布されているため、Antigravity CLI（
agy
）が外部プラグインとして認識するために必須のメタデータファイル（
plugin.json
）が最初から存在しないためです。

 🛠️ 解決策：
plugin.json
 を手動でハックする


ないなら作ってしまえばOKです。リポジトリのルート直下に  plugin.json を新規作成し、以下のコードを記述して、
agy
 にエントリーポイント（本尊）の場所を教えてあげます。
{
  "name": "modern-web-guidance",
  "version": "1.0.0",
  "description": "Chrome Modern Web Guidance for AI agents",
  "main": "dist/index.js"
}


 4. Antigravity CLI (agy) へのローカル連携を実行


定義ファイルを配置したら、満を持して絶対パス（またはカレントディレクトリのドット）を指定してインストールコマンドを実行します。
# 現在地の絶対パスを調べる
pwd
# 出力例: /home/username/any-tools/modern-web-guidance

# パターン1：絶対パスを指定して登録
agy plugin install /home/username/any-tools/modern-web-guidance

# パターン2：ディレクトリ内に移動している場合はドット指定で登録
agy plugin install .


 🎉 成功時のエビデンス


無事に 
[ok]
 が表示され、各コンポーネントが処理されます。正常に登録されたか、マニフェストを一覧コマンドで確認してみましょう。
agy plugin list

{
  "imports": [
    {
      "name": "modern-web-guidance",
      "source": "local-install",
      "importedAt": "2026-05-25T09:52:43Z",
      "components": [
        "installed"
      ]
    }
  ]
}

マニフェストJSONの中に 
"source": "local-install"
 として安全に組み込まれたことが確認できました！

 5. 今後のバージョン管理


この運用の最大の強みは、今後のメンテナンスが圧倒的に楽になることです。

もしGoogle公式から新しいWeb機能のガイダンスが追加・更新された場合も、
agy
 側をいじる必要はありません。
cd ~/any-tools/modern-web-guidance
# 1. 汎用CLIで実体ファイルを上書き（またはgit pull等）
npx modern-web-guidance@latest install
# 2. 再度コンパイル
npm run build

これだけで、
agy
 が参照する知見も自動的に最新バージョンへと追従します。

システムを一切汚さず、安全かつ最先端の環境で、フロントエンド開発を楽しめます。

 🥋【実践編】Antigravity × Modern Web Guidanceで最新フォーム画面を自律生成させてみた


ここからは、実際にローカル連携を済ませた 
agy
（モデル: 
Gemini 3.5 Flash
）を起動し、新しく作成したフロントエンドプロジェクト（
~/any-tools/test-front
）に対してフォーム画面を作らせる一連のリアルな挙動をレポートします。
MWGの知見が裏側でどう活きているのか、エージェントとの対話フローに注目してください。

 1. ざっくりとした指示からプロジェクトを自律解析


まずは、新しく用意した空のTypeScriptプロジェクトディレクトリで 
agy
 を起動し、以下のシンプルな指示を投げました。
1prompt.png
指示を受けた 
agy
 は、即座にプロジェクト内の構造をスキャンし始めます。
  • ● ListDir(~/any-tools/test-front)
  • ● Read(~/any-tools/test-front/package.json)
  • ● ListDir(~/any-tools/test-front/src)
  • ● Read(~/any-tools/test-front/src/index.ts)
人間が「ここに 
package.json
 があって、ここにソースがあるよ」と教えなくても、エージェントが自分でファイルを読み込み、現在の開発環境の状況を自律的に把握していきます。

 2. 人間への丁寧なヒアリングと「実装計画」の提案


既存コードの解析が終わると、AIはすぐにコードを書き始めるのではなく、どのようなフォーム画面にするかの具体的な選択肢をこちらに提示してくれました。

2hearing.png
この時点で、MWGのユーザー体験を最優先する という設計原則の思想が効いているのが分かります。

今回は、推奨された 1. ユーザー新規登録＆プロフィール作成フォーム を選択して進めました。

 3. 安全ガードの作動


実装の方向性が決まると、環境構築に必要なエコシステム（ViteやTailwind CSSなど）のインストール要求が走ります。
ここで 
agy
 の安全ガードが作動し、ユーザーへの実行パーミッション確認画面が表示されます。
Requesting permission for: npm install -D vite tailwindcss postcss autoprefixer

Do you want to proceed?
> 1. Yes
  2. Yes, and always allow in this conversation for commands that start with 'npm install'
  3. Yes, and always allow for commands that start with 'npm install' (Persist to settings.json)
  4. No

AIが勝手に環境を書き換えない安心設計です。ここは 
1. Yes
 を選択して、安全に必要な開発依存パッケージをローカル環境へと導入させます。

 4. 爆速で生成された「Tailwind v4 × モダンプラグイン」の成果物


インストール許可を出してからものの数分、
walkthrough.md
 とともに生成・更新されたフロントエンドのソースコード一式がこちらです。注目すべきは、最新のコンポーネント構造と、MWGのベストプラクティスが最初から仕込まれている点です。

3makefile.png

 📦 作成・更新された主なファイル構成


  • 
エントリーHTML (
    index.html
    )
    👉 セマンティックHTML5による、無駄のない美しい「3ステップ構造」のマークアップ設計。
  • 
CSS & テーマ (
    style.css
    )
    👉 なんと、最新のTailwind v4のコア設計（CSSベースのテーマ設定）に準拠！グラデーションやカスタムアニメーションが非常にクリーンに定義されています。
  • 
フロントエンドロジック (
    index.ts
    )
    👉 パスワード強度インジケーターの連動、インタラクション後のスマートなバリデーション、さらにダークモード切り替えやアバター選択、マルチステップの進捗管理まで、贅沢なモダンロジックがTypeScriptで型安全に書き下ろされています。
  • 
Vite設定 (
    vite.config.ts
    )
    👉 最新の
    @tailwindcss/vite
    公式プラグインの導入と、開発用ポートが1発でセットアップ完了。
~/any-tools/test-front/
├── dist/                   # ビルド成果物が出力されるディレクトリ
├── src/
│   ├── index.ts            # バリデーション等のモダンロジック（TS）
│   └── style.css           # 🔥 Tailwind v4のベース定義が書かれたCSS
├── index.html              # セマンティックHTML5による3ステップ構造の画面
├── node_modules/           # 依存パッケージ
├── package.json
├── package-lock.json
├── tsconfig.json
└── vite.config.ts          # @tailwindcss/vite プラグインが設定されたファイル


 5. ローカル環境での爆速プレビュー


生成が完了したら、あとはターミナルで提示されたお馴染みのコマンドを叩くだけで、ローカルでの動作検証が可能です。
# 開発サーバーの起動（http://localhost:3000 で爆速ホットリロード起動）
npm run dev

# 本番用プロダクションビルドの検証
npm run build

ブラウザを開くと、下のような、ブラウザネイティブの最新機能をフル活用した爆速フォーム画面が目の前に現れます。
Antigravityによるモダンフォームの自動生成例
Modern Web Guidanceの知見が自動注入され、アクセシブルなフォームが一瞬で生成される様子

 🎯 結論：Modern Web Guidanceがもたらす成果物


今回の一連の自律生成を通じて確信したのは、人間が『最新のWeb仕様書の記述方法』を1から勉強してプロンプトで縛らなくても、MWGをプラグインとして持たせるだけで、AIエージェントの出力の完成度がかなり高い ということです。
最新の Tailwind v4 や Vite を組み合わせたコンポーネント開発を、ここまで安全かつ自律的に進めてくれる『Antigravity × Modern Web Guidance』の組み合わせは、2026年現在のフロントエンド開発における最強の相棒と言っても過言ではありません。
ぜひみなさんも、手元のローカル環境に知見をインポートして、この異次元の爆速クリーン開発を体験してみてください！
GitHubで編集を提案