私は普段Codexやantigravityを使って、FigmaのデザインからUIコードを自動生成させています。
AIはある程度それっぽいHTML/CSSを吐き出してくれますが、自分で書いたコードがブラウザでどう表示されているかを確認する手段を持っていません。
レイアウトがどれだけ崩れていてもAI自身には見えないため、結局人間がブラウザを開いて確認し、「ここがズレてるから直して」とチャットで何往復も指示を送る羽目になり、労力がかなりかかっていました。
AIが「コードを書き、画面を見て、ズレていたら自分でCSSを直す」というループを勝手に回してくれないと、自動化の意味がなく、
AIにブラウザ画面を見せる「目」が必要だと感じていました。
そこで、Figmaの配置データと実際のブラウザ画面を比較するMCPサーバー design-compare を作りました。
1. 開発の背景：自律テストには「AI専用の目」が必要だった
以前自分でビジュアルリグレッションテスト（VRT）を実装した経験がありました。
その経験から、「VRTの比較ロジックをそのままAIエージェントに組み込めば、AIの『目』として使えるんじゃないか」と気づきました。
Figmaのデザイン画像と、ブラウザで表示した画像をプログラムで突き合わせれば、AI自身が「ここが10pxズレている」と認識できると考えました。
ところが、既存のMCPサーバーをどれだけ探しても、Figmaのデータとブラウザのスクショを比較してAIに結果を返せるようなツールはどこにも転がっていませんでした。
2. 幾何データと画像による2つのアプローチ
デザインと実装の整合性をチェックするために、design-compare には「幾何データ（ツリー）を比較する方法」と「画像（スクリーンショット）を比較する方法」の2つを実装しました。
A. 構造ツリーを比べる (layout_tree)
画像（ピクセルデータ）の比較は行わず、Figmaの要素データ（JSON）と、ブラウザのDOM構造（JSON）の位置情報を直接突き合わせます。
画面幅が変わること（レスポンシブ）を考慮し、各要素の位置（X, Y）やサイズ（幅、高さ）を「親要素に対する相対的な比率（%）」に変換した上で、一番近い要素同士をプログラムでマッチングします。
文字の内容や色は完全に無視されるので、「デザインで定義されたレイアウト構造（テンプレート）通りにHTMLが組まれているか」を純粋にデータレベルで検証できます。
B. 画像で比べる (perceptual / strict)
スクリーンショット画像をベースにして比較します。ここには2つのモードを用意しました。
-
perceptual（知覚ハッシュ）: 2つの画像を16x16ピクセルに極小縮小してグレースケール化します。文字や細かい線はすべて綺麗にぼやけて消え、大まかなブロックの明暗だけが残ります。この明暗パターン（aHash）を比較するため、フォントの違いや微妙な位置ズレは無視して「見た目の大まかな配置が合っているか（テンプレート検証）」を判定できます。 -
strict（厳密比較）: Mapboxのpixelmatchを使い、文字の輪郭のアンチエイリアスの違いは自動で除外しながら、1ピクセル単位で厳密に色や余白の違いをチェックします。これはグラデーションのズレやマージンの微細な変化を検知したい時に使います。
3. AIにセルフチェックさせるループの現実
この design-compare を、AI用の手順指示書（SKILL.md）と一緒にCodexやClaudeに読み込ませることで、AIエージェントが勝手に以下のループを回すようになります。
- Figma MCPを呼び出してデザインデータをエクスポート
- Chrome-DevTools MCPを呼び出して実装画面を撮影（必要ならフォームにID/PWを入力して自動ログイン）
- design-compare の
compare_designを呼び出して比較実行 - 差分（ズレ）が検出された場合、AIが「Figmaの座標に対してCSSのmarginがズレている」と認識し、自らスタイルコードを修正して再テストを回す
これで「作って、見て、直す」という作業がAIの中で完結するようになり、人間がいちいち画面のズレを目視確認するコストがかなり浮くようになりました。
注意点
デザインを正しく機械解析するためには、Figma側でもあらかじめレイヤー構造を整理しておき、AIが正しい構造で解析できる状態にあるという前提が必要となります。
例) 全てを絶対配置で配置したデザインだとツリー構造の解析が行えないため、機能しなくなります。
4. まとめ
AIにコードを書かせるだけでなく、その成果物をAI自身に確認させる手段を持たせることが、自動生成開発を一歩前に進めるために必要だと考えています。
今回、Figmaとブラウザ操作という既存のツールをMCPで組み合わせ、シンプルな幾何判定やハッシュ比較を行う仕組みを挟んだことで、開発時の大きなボトルネックである「画面のズレのセルフチェック」を自動化できるようになりました。
リポジトリと導入手順はGitHubに公開しています。同じようにFigmaからのコード生成フローを構築している方は、ぜひ試してみてください。