概要
https://speakerdeck.com/oikon48/aiturudedokomadedezainwozhong-shi-nishi-zhuang-dekirunoka
詳細内容
## AIツールでどこまでデザインを忠実に実装できるのか
https://speakerdeck.com/oikon48/aiturudedokomadedezainwozhong-shi-nishi-zhuang-dekirunoka
Oikonは、Figmaデザインからコード生成を行うAIツールの忠実度を比較実験し、現在のAIツールがデザインを70%程度再現できるものの、ピクセルパーフェクトな実装には課題が残ることを示した。
**Content Type**: Research & Analysis
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 80/100 | **Annex Potential**: 80/100 | **Overall**: 80/100
**Topics**: [[AIコーディング, Figma-to-Code, フロントエンド開発, UI/UX実装, AIツール比較]]
Oikon氏が「UI/UXも、AIと共に。～フロントエンド開発におけるAI活用事例～」で発表した本資料は、AIツールを用いたデザイン実装の忠実度について検証しています。現在のフロントエンド開発において、デザインからコードへの変換には、デザインの意図を正確にコード化することの難しさ（AI生成コード特有の「AI臭」）、適切な指示がない場合のレスポンシブ対応の抜け漏れ、最新のライブラリやフレームワーク知識の不足、そして一貫性のあるコンポーネント設計の難しさといった課題があると指摘しています。現状ではピクセルパーフェクトな実装は難しいものの、Figmaからコードへの変換は比較的忠実であると述べられています。
発表では、主に二つのAIツールの特徴が紹介されました。一つは「Figma MCP（Multi-Modal Prompting）」で、FigmaのデザインデータをAIが直接読み込み、自然言語で細かい指示を出せるため、ClaudeやCodexがデザインの意図をより深く理解できる点が挙げられます。これはClaude CodeやCodex CLIと連携して使用されます。もう一つはインドのスタートアップが開発したフロントエンド専用AIエージェントツール「Kombai」です。これはプロジェクト全体を解析し、技術スタック（フレームワーク・ライブラリ）を設定でき、仮想環境内で実行して承認されるまでローカルに変更を加えないといった特徴があります。
実際の検証として、Oikon氏は同一のFigmaデザインを「Claude Code + Figma MCP」「Codex CLI + Figma MCP」「Kombai」の3つのツールでコード化し、その忠実度を比較しました。共通のプロンプト「このFigma Designを実装して」を使用し、各ツールの生成結果を分析しています。
実験結果として、AIツールだけでのピクセルパーフェクトな実装はまだ難しいものの、約70%程度の忠実度でデザインを再現できることが示されました。また、生成されたコードのフレームワークやライブラリの整合性については、現状ではエンジニアによる評価が不可欠であると結論付けています。この結果は、ウェブアプリケーションエンジニアがAIツールをフロントエンドのデザイン実装に活用する際の、現在の能力と限界を具体的に示唆しており、現実的な期待値を持つ上で重要な情報を提供しています。