概要
https://zenn.dev/zozotech/articles/20251205_figma_mcp_ui
詳細内容
## Figma MCP × Claude Codeで効率的にUI実装するためのアプローチ
https://zenn.dev/zozotech/articles/20251205_figma_mcp_ui
ZOZOは、Figma MCPとClaude Codeを組み合わせたFlutter UI実装において、デザイン情報を直接渡すよりも、一度プロンプトとして構造化させてからAIに渡す2段階のアプローチが最も精度が高いことを実証し、その具体的なワークフローと技術的考察を公開した。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 86/100 | **Annex Potential**: 84/100 | **Overall**: 84/100
**Topics**: [[Figma MCP, Claude Code, Flutter UI実装, AIコード生成, 段階的プロンプティング]]
本記事は、Figmaで作成されたデザインからFlutter UIを効率的に実装するためのAI活用アプローチを紹介する。特に、Anthropicが策定しFigmaが提供するFigma MCP（Model Context Protocol）とClaude Codeの組み合わせに焦点を当て、Figmaリンクの渡し方による出力精度の違いを検証した。
筆者は、スクリーンショットを渡す方法、Figmaリンクを直接Claude Codeに渡す方法、そして一度AIにFigmaデザイン情報をプロンプトとして構造化させてからそのプロンプトで実装を依頼する2段階のアプローチの3パターンを比較検証した。結果として、3番目の「一度プロンプト化してから渡す」方法が最も出力精度が高いと結論付けている。
このアプローチが優れている理由として、以下の点が挙げられる。まず、AIがデザイン情報を一度分析し構造化することで、実装に必要な要素が整理され、明示的な仕様となる。これにより、デザイントークンの活用やデザインシステムに沿った実装が容易になる。次に、MCPが生データとして提供する膨大な情報はAIにとってノイズとなりやすく、優先順位付けが困難になる。AIに一度抽象化レイヤーを挟ませることで、「段階的プロンプティング」や「タスク分解」と呼ばれるLLMの出力精度向上に寄与する手法が適用されるためだ。また、Claudeはプロンプト生成タスクを得意としており、この中間ステップでデザイントークンの優先使用といった設計原則が自然に盛り込まれる。さらに、プロンプト生成により「何のための実装か」という文脈と目的が明確になり、AIが目的に沿ったコードを生成しやすくなる。
具体的なワークフローとして、Figma MCPでデザイン情報を取得しつつプロンプト生成を依頼し、生成された構造化プロンプトを確認・修正した上で、そのプロンプトを使って実装を依頼する4ステップが示されている。この手間をかけることで、より正確なUI実装、デザイントークンやデザインシステムの適切な使用、実装前のプロンプトレビュー、そしてプロンプトの再利用といった多大なメリットが得られると筆者は強調している。