UIを描いたらプロンプトになるツールを作った

UIデザインをプロンプトに変換するツールを開発した経験を紹介。Material 3 Expressiveを用いたAIによるAndroidアプリデザインの「AIっぽさ」解消のコツや、UIデザインとプロンプトの関係性について解説。

• AIが生成するUIが「AIっぽい」のは、色や余白などの決定項目が多すぎることが原因であり、Material Designのようなフレームワーク利用で解決できる。
• UIデザインを直接プロンプトに変換する「M3E Canvas」というOSSツールが開発され、Material 3 Expressiveの部品をドラッグ＆ドロップで配置できる。
• M3E Canvasは、配置したUIの状態をそのままプロンプト（文章）に変換し、AIに渡すことができるため、UI設計の試行錯誤を効率化する。
• 生成されるプロンプトでは、色をハードコードせず「primary」などのロール名で参照させ、部品の寸法も標準値を用いるよう指示することで、AIによる意図しないデザインの生成を防ぐ。
• このツールはClaude Fable 5.1と連携し、1日で開発されたが、AIにUIを頼む際の「決めてもらう項目を減らす」というコツが活かされている。