AI エージェントは、Jetpack Compose を使用し、Android のベスト プラクティスに沿って、Android アプリの UI ビジョンを実現するのに役立つ独自の機能を備えています。このページでは、AI を使用してアプリの UI を作成し、反復処理する方法について説明します。
AI を使用して UI を生成する一般的な手順は次のとおりです。
目的のアプリ UI のモックアップを作成します。デザイン ツールから PNG をエクスポートすることも、手描きの画像を使用することもできます。
図 1: アプリのユーザー インターフェースのワイヤーフレーム。 [Attach image file]（画像ファイルを添付）ボタン
をクリックして、画像をクエリに添付します。既存のプレビューがないファイルでは、[プレビュー] パネルから [スクリーンショットからコードを生成] を直接クリックすることもできます。
図 2: 空の [プレビュー] パネルでスクリーンショットからコードを生成する。 チャット フィールドで、AI エージェントに UI コードの生成を依頼します（例: 「提供された画像の Jetpack Compose コードを生成してください」）。クエリと画像を送信すると、AI エージェントが提案された UI を作成するためのコードを提案します。通常、AI エージェントは Compose プレビューのコードも提供するため、プロジェクトにインポートすると UI をすばやく可視化できます。提供されない場合は、Compose プレビューを生成するよう依頼してください。
図 2: 添付された画像から Jetpack Compose コードを生成する Gemini。 コードをインポートしてプレビュー パネルに Compose プレビューが表示されたら、プレビューを直接クリックして Gemini に変換をリクエストすることで、UI を反復処理できます。目的の画像がある場合は、プレビューを右クリックして [AI Actions] > [Match UI to Target Image] を選択して、UI を反復処理することもできます。
図 5: Gemini を使用して、Compose プレビューから UI 要素を直接変換する。 
図 6: 「ターゲット画像に UI を一致させる」の使用例
UI の品質に関する問題を見つけて修正する
AI エージェントは、UI の品質とアクセシビリティを確保するうえでも役立ちます。Compose プレビューを右クリックし、[AI アクション] > [UI チェックの問題をすべて修正] を選択します。エージェントは、ユーザー補助の問題などの一般的な問題について UI を監査し、それらを解決するためのコード修正を提案します。
