Design Diff

FigmaデザインとページのUIを照合し、色・サイズ・余白などのスタイル差分をAIが検出してレポートします

Design Diffは、FigmaデザインとWebページの実装を照合し、スタイルの差分をAIが検出・レポートするツールです。フロントエンドエンジニア・UIデザイナー・QAチームがピクセルパーフェクトな実装を確認するために作られました。 AIプロバイダはGemini・OpenAI・Claudeから選択でき、入力したAPIキーに対応するビジョン対応モデルが自動で取得されます。常に最新のモデルを使用できます。 ページ上のフローティングパネルから設定・要素選択・比較実行をすべて行えるため、タブを離れる必要はありません。キャプチャ前にブラウザのウィンドウ幅をFigmaフレームに合わせるオプションもあり、デザインと実装を同じ幅で比較できます。設定はブラウザのローカルストレージに保存され、外部へ送信されることはありません。 拡張機能を起動し、FigmaのURLを入力します。検査したいDOM要素をページ上でクリックして選択するだけで、あとは自動で動作します。スクリーンショットの取得・対象要素のCSSスタイル抽出・FigmaノードデータのAPI取得・AI分析を一括で処理し、差分レポートを生成します。 レポートには色・フォントサイズ・余白・角丸・不透明度などの差分が一覧で表示され、それぞれに影響度と差分の説明が付きます。Figmaキャプチャと実装スクリーンショットを同じ縮尺で並べたビューでは、差分箇所にカラーマーカーが重なり、リストの項目にホバーすると該当領域がハイライトされます。 差分レポートはHTMLファイルとして書き出せるほか、MarkdownとしてコピーしてAIアシスタントに直接貼り付ければ、各差分の修正コードを即座に出力させる指示プロンプトとして機能します。プレーンテキストとしてコピーしてチームへ共有することも可能です。 デザイン差分のない実装を、すべての現場に。