ユーザーインターフェース（UI）デザインをフロントエンドコードに自動変換することは、ソフトウェア開発の加速とデザインワークフローの民主化に大きな可能性を秘めている。近年の大規模言語モデル（LLM）は、テキストからコードを生成する分野で進展を示しているが、多くの既存手法は自然言語のプロンプトに依存しており、空間的なレイアウトや視覚的デザインの意図を十分に捉えられないという限界がある。一方で、実際のUI開発は本質的にマルチモーダルであり、しばしば視覚的なスケッチやモックアップから始まる。このギャップを埋めるために、本研究では、UIからコードへの変換を「接地（grounding）」「計画（planning）」「生成（generation）」の三段階で解釈可能なプロセスに分離したモジュール型のマルチエージェントフレームワークを提案する。接地エージェントは視覚言語モデル（VLM）を用いてUIコンポーネントを検出・ラベル付けし、計画エージェントはフロントエンドエンジニアリングの事前知識に基づいて階層的なレイアウトを構築し、生成エージェントは適応型プロンプトベースの合成によりHTML/CSSコードを生成する。このアーキテクチャにより、従来のエンドツーエンド型ブラックボックス手法に比べ、堅牢性、解釈可能性、および正確性の面で向上が見られた。さらに、本フレームワークをスケーラブルなデータエンジンへと拡張し、大規模な画像-コードペアを自動生成する仕組みを構築した。この合成データを用いて、オープンソースのVLMを微調整・強化することで、UI理解力とコード品質に顕著な向上が得られた。広範な実験の結果、本手法はレイアウトの正確性、構造的整合性、コードの正しさにおいて、現在の最先端性能を達成した。本研究のコードは、https://github.com/leigest519/ScreenCoder にて公開されている。