LLMに現在のUIを理解させつつUIを実装させる

LLMに現在のUIを理解させつつUIを実装させる AI駆動開発勉強会 フロントエンド支部 #1 w/あずもば

自己紹介 - Kuu Software Engineer at Mercari Kuu Systems AI関連相談相手、スマホ/Webアプリ受託 Developer Summit のコンテンツ委員 趣味 海外旅行 Vibe Coding

今回伝えたいこと 理想的にはDesign Systemが定義して使える環境 iOS/Android開発においてUIを取得する方法がある AIも現状がわからず完璧なUIを実装するのは難しい

Design Systemとは プロダクトやサービスのUIを一貫性を持って効率的に構築するための「ルール・コンポーネント・ガイドライン」をまとめた体系

理想的な環境 UI Component Tree Design System Component 置き換えるだけでUI実装完了 既存テキスト テキスト1 テキスト2 リストアイテムA リストアイテムB <Heading text="テキスト 1" /> <Heading text="テキスト 2" /> <List items={["A", "B"]} /> <List items={["A", "B"]} /> ガイドライン 呼び出し LLMの得意な作業 唯一の問題点 全部Design Systemで完結する環境が存在しない

実際の業務の開発で起こりうるパターン ほとんどのUIはDesign Systemを活用することで実装できる DogFoodingなどで問題が指摘があがり改善する必要が 既存のバグで特定の条件の時にUIが表示されてしまう...など

LLMに現在のUIを理解させる方法 Simulator/Emulator/実機のスクショを撮る スクショをLLMの入力欄に渡す(Claude CodeやCursorなど) Base64 encodeされ、LLMが内容を理解

この方法では面倒 LLMがUIの実装を修正するたびに毎回Human-in-the-loopしていては非効率 UI実装のバグを治すとかの場合、HITLの頻度が上がってしまう。。。 なんとかして自動化したい

iOSの場合 simctlを使うことでスクリーンショットを撮影できる xcrun simctl io booted screenshot screenshot.png

Androidの場合 (1/2) adbコマンドを使えば取得することができる adb exec-out screencap -p > ~/Documents/image_name.png 引用元: https://github.com/lana-20/adb-shell-screencap ローカルに持ってきた画像をLLMが読み込むようにpromptを書く

Androidの場合 (2/2) Layout Inspector Layout Inspectorをadb経由で使用し、UI/レイアウト情報を取得 Automation adb経由でLLMがUI操作を行い、任意の画面操作が可能

まとめ LLMが正しいUIを実装するためには、UIを理解させる必要がある iOS/Android それぞれで画面の状態を取得することができる MCP/Command/Skill と実装方法は状況次第だが、あらゆるツールに応用できる