テック技報最新号へ →
デザイン

Figmaと実装の食い違いは、画像→構造JSON→差分の3スキルで検知し、レポートをエージェントに渡して直す

画素比較でもFigma APIの数値照合でもなく、書き出し画像とスクショから要素の構造JSONを抜き、文言・有無・並び順などの差分を警告レベル付きで出す。レポートHTMLをそのままClaude Codeに渡して修正→再検知できる。

@seikei_kin · 2026-11-07
#AI×デザイン#Figma#デザインレビュー#ClaudeCode#スキル#VRT

どんな問題を解決するか / いつ使うか

人の目では大文字小文字や項目の入れ替えを見落とすとき。VRTは「前回からの変化」しか見ず、最初からFigmaと違う実装を見逃すとき。PRごとに「Figmaの設定値」と実装を照合し、差分をPRコメントに出す（figma-vrt-review）がAPI連携できる環境と違い、画像さえあれば回したいとき。

具体手順（3スキル）

スキルやること入出力の核
構造抽出画像1枚から要素を読むorder / type / value / x,y,w,h のJSON
差分比較Figma側JSONとアプリ側JSONを比べる警告（修正／確認／参考）
レポート全画面をHTMLにまとめる番号付き矩形オーバーレイ＋警告一覧

構造抽出の要点

  • 縦に長い画像は分割してから認識（下の方の座標誤差を抑える）
  • 読み順で order を振る（上→下、同じ行は左→右）
  • ボタン内テキストはボタン1要素の value に含める

差分比較の要点

  • 幅の比率だけで座標をスケール（高さ比まで使うと余白差で歪む）
  • 中心座標＋種別で要素を対応づけ
  • 細かなpx・色・太さは警告にしない（抽出がぶれるため）。狙うのは要素の有無・文言・表示順序の入れ替わりなど体験に効く差
  • 氏名・金額などテストデータ差は除外。警告Levelは重要度ではなく次のアクション（修正／確認／参考）

レポート→修正ループ

  1. 同じ画面はFigma／アプリで同じファイル名・同じサイズの画像にする（ステータスバーの有無も揃える）
  2. 抽出→比較→レポート
  3. 修正依頼例：@output/report/report.html の警告と、比較する相手がいない画面をもとに、アプリをFigmaのデザインに合わせて直して
  4. 直したら画像を取り直し、同じ手順で再実行

検証では仕込んだ文言・欠落・順序・余分な行・片側だけの画面を検知し、修正後に「修正」「確認」警告が消えた。

注意点

  • 色・余白・フォントサイズの厳密なトークン照合が必要なら、PRごとに「Figmaの設定値」と実装を照合し、差分をPRコメントに出す（figma-vrt-review）やFigma MCP検査の方が向く。こちらは「明らかな食い違い」向き。
  • 実プロダクト画像を外部LLMに送る前に、未公開デザイン・個人情報のルールを決める。
  • 画像取得の自動化・誤検知率の定量は記事時点では未整備。構造抽出はSonnet、比較はOpus、などモデル分担の話あり（費用は環境に依存）。

出典

X の元の投稿を開く