Item logo image for Design Diff

Design Diff

4.0(

1 rating

)
ExtensionDeveloper Tools4 users
Item media 2 (screenshot) for Design Diff
Item media 1 (screenshot) for Design Diff
Item media 2 (screenshot) for Design Diff
Item media 1 (screenshot) for Design Diff
Item media 1 (screenshot) for Design Diff
Item media 2 (screenshot) for Design Diff

Overview

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アシスタントに直接貼り付ければ、各差分の修正コードを即座に出力させる指示プロンプトとして機能します。プレーンテキストとしてコピーしてチームへ共有することも可能です。 デザイン差分のない実装を、すべての現場に。

Details

  • Version
    1.0.0
  • Updated
    June 25, 2026
  • Offered by
    Kaworu Inoue
  • Size
    152KiB
  • Languages
    2 languages
  • Developer
    Email
    dev_kwr@icloud.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization

Design Diff has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.

Design Diff handles the following:

Authentication information
Website content

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, please open this page on your desktop browser

Google apps