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