PixelPerfect CSS Diff
PixelPerfect CSS Diff は、フロントエンドのビジュアル QA 向け Chrome 拡張です。
実ページと参照デザインを見比べ、dialog ベースのモーダルでも overlay が下に隠れない状態で確認し、ブラウザ上で CSS を調整して、その差分を AI エージェントやソースコード修正フローに渡したい場面で使えます。
インストール
Chrome Web Store からインストールできます。
できること
| 機能 | 役割 |
|---|---|
| 参照画像の重ね合わせ | 現在のページ上にデザイン画像を重ねる |
dialog モーダル対応 | dialog で作られたモーダル確認時も overlay が下に隠れない |
| 位置・透明度・スケール調整 | 実装と参照画像を合わせる |
| ガイド | 縦横ガイドでピクセル単位のずれを確認する |
| 色差分表示 | 参照画像と実ページの色の差分を確認する |
| PC / モバイル別状態 | viewport 幅ごとに別の overlay 状態を保持する |
| ブレイクポイント設定 | PC / モバイル状態を分ける基準を変更する |
| CSS 差分取得 | ブラウザ上で調整した CSS 変更を記録する |
| プロンプト出力 | CSS 差分を AI 向け修正指示としてコピーする |
| プロンプトカスタマイズ | 出力する修正プロンプトをチームや AI エージェントの運用に合わせて調整する |
設定
レビュー作業に合わせて、拡張機能側の設定を変更できます。
- PC / モバイルの overlay 状態を切り替えるブレイクポイント
- CSS 差分の修正指示として出力するプロンプト
基本フロー
- 確認したいページを開く
- 参照デザイン画像を読み込む
- 位置・透明度・スケール・ガイドで重ね合わせる
- CSS baseline を設定し、ブラウザ上で見た目を調整して差分を取得する
- 出力したプロンプトを AI エージェントやソースコード修正フローに渡す
SpiraCSS との関係
PixelPerfect CSS Diff は、SpiraCSS を使うための必須ツールではありません。
SpiraCSS は、構造と Stylelint で CSS 設計の一貫性を守ります。PixelPerfect CSS Diff は別の領域として、参照デザインとの見た目の差分確認と、ブラウザ上で観測した CSS 調整を修正指示に変換する作業を支援します。