Design Diff

About

Design Diffは、FigmaデザインとWebページの実装を照合し、スタイルの差分をAIが検出・レポートするツールです。フロントエンドエンジニア・UIデザイナー・QAチームがピクセルパーフェクトな実装を確認するために作られました。

AIプロバイダはGemini・OpenAI・Claudeから選択でき、入力したAPIキーに対応するビジョン対応モデルが自動で取得されます。常に最新のモデルを使用できます。

ページ上のフローティングパネルから設定・要素選択・比較実行をすべて行えるため、タブを離れる必要はありません。キャプチャ前にブラウザのウィンドウ幅をFigmaフレームに合わせるオプションもあり、デザインと実装を同じ幅で比較できます。設定はブラウザのローカルストレージに保存され、外部へ送信されることはありません。

拡張機能を起動し、FigmaのURLを入力します。検査したいDOM要素をページ上でクリックして選択するだけで、あとは自動で動作します。スクリーンショットの取得・対象要素のCSSスタイル抽出・FigmaノードデータのAPI取得・AI分析を一括で処理し、差分レポートを生成します。

レポートには色・フォントサイズ・余白・角丸・不透明度などの差分が一覧で表示され、それぞれに影響度と差分の説明が付きます。Figmaキャプチャと実装スクリーンショットを同じ縮尺で並べたビューでは、差分箇所にカラーマーカーが重なり、リストの項目にホバーすると該当領域がハイライトされます。

差分レポートはHTMLファイルとして書き出せるほか、MarkdownとしてコピーしてAIアシスタントに直接貼り付ければ、各差分の修正コードを即座に出力させる指示プロンプトとして機能します。プレーンテキストとしてコピーしてチームへ共有することも可能です。

デザイン差分のない実装を、すべての現場に。