フロントエンドエンジニアの大山です。AIエージェントを利用した開発によってフロントエンド開発がこれまでと大きく変わっていることを実感しています。
AI駆動開発導入前
デザイナーが作成したFigmaやXDファイルの数値（フォントサイズやマージン、カラーコードなど）を目視確認しながらコーディングしていました。 また、Chrome拡張機能（PerfectPixelなど）でデザインのスクリーンショットを半透明にして重ね合わせ、ピクセルパーフェクトを実現していました。
AI駆動開発導入後
AIエージェントがデザインデータの構造を直接解釈します。それを元にAIがコードを生成します。
生成されたコードとデザインカンプの差異をAIが把握して自動的に修正作業を行います。
人間は生成されるコードの精度を上げることに注力します。
以下で、その具体的な手法を紹介します。
Figma MCP サーバー
Figma MCP サーバー（以下Figma MCP）とは、Figmaが提供しているデザインデータの構造と文脈を参照するMCPサーバーです。2025年6月にベータ版、10月に正式版が提供開始されました。
デザイン上のコンポーネントやレイヤー、バリアントやプロパティなどの情報をAIエージェントに提供することが可能です。
これにより、AIエージェントに対して「Figma MCPを利用して選択しているページをReact/TypeScript/Tailwindで実装して」などと指示することでコード生成が可能となります。
Figma MCPの主要ツール
Figma MCPは、AIエージェントに対していくつかの「ツール（機能）」を提供することでデザインデータを渡しています。 時に以下のツールを明示的に指定することで、AIの挙動を制御し、コーディング精度を向上させることができます。
- get_design_context
選択したFigmaデザインの構造を、ReactおよびTailwind CSSで構成されたコード案とメタ情報として取得します。最も重要なツールです。
- get_screenshot
選択しているデザインデータのスクリーンショットを取得します。get_design_context で得たコード構造に対し、視覚的な情報を補完します。通常、get_design_context の直後に自動で実行されることが多いです。
- get_metadata
選択しているデザインのメタデータ（ノードID、ノード名、サイズ、色など）のみを取得します。get_design_contextは情報量が多いためAIエージェントのコンテキストウインドウを圧迫するケースがあります。その際に「まずget_metadataで全体を取得して必要なノードIDだけを指定して get_design_context を実行して」などと指示して使います。
- get_variable_defs
Figmaの「バリアブル」機能で定義されているデータを返します。正確なデザイントークンを生成する際に必須のツールです。
AIフレンドリーなデザインデータの作成
Figma MCPを利用したが意図通り実装されなかった、という経験をした人も多いと思います。
実はデザインデータの作りかたによって精度が大きく変わります。
Figmaの「コンポーネント」や「バリアブル」を使用することは当然ですが、それ以外にもさまざまなテクニックがあります。
重要なナレッジとなるため具体的に記載することはできませんが、フェンリルではUX/UIデザイナーとエンジニアが協業してAIフレンドリーなデザインデータの作りかたを常に模索しアップデートし続けています。
Playwrightを用いたVRT（Visual Regression Test）
Figma MCP等で生成したコードの見た目を担保するため、Playwright MCPを活用したVRTの自動修正ループが有効です。
VRT自動修正のサイクル
AIが実装したコードをローカル環境で起動する
デザインの正解画像（Figma MCPで取得）を用意する
ローカル環境のスクリーンショットを撮影し、正解画像と比較する
検出された差分をAIに渡し、修正します
このサイクルを回す上で中核となるのがPlaywright MCPです。 Playwright MCPとは一言で言えば「テストコードを書かずに、AIが自律的に動かせるPlaywright」です。 事前にテストスクリプトを用意しなくても、AIエージェントが必要に応じて「ボタンをクリックする」「特定要素のスクリーンショットを撮る」といったツール（機能）を呼び出し、ブラウザを直接操作して検証を行います。
まとめ
ここで挙げたものに加えて便利なMCPやツールが次々と誕生しています。 AI駆動開発による実装スキームの変化は大きく、またそのスピード感はすさまじいものがあります。 また、エージェントファイル（Skillsなど）の構成などは開発効率・精度に直結する部分です。 それらの調査→実証実験→導入→改善 の一連の流れをアジャイルのように短期間で回しているのが自分の現状ですが、とてもわくわくしながら取り組めています。
