概要
AIによる不確実なデザインレビューを補完するため、SSIMやピクセル差分等の決定論的な画像比較指標をAI開発ループに組み込み、自動でデザインのズレを修正する仕組みを提案。
詳細内容
### 背景とコンセプト
フロントエンド開発におけるAIのデザインレビューは確率的（Probabilistic）であり、同じ画像に対しても指摘が不安定だったり、細部を見落としたりする課題があります。著者は、これを解決するために、数値や条件で判定できる「決定論的（Deterministic）」なレイヤーをAIエージェントのハーネスとして導入することを提案しています。
### 実装された仕組み
AIが実装したコンポーネントをStorybookで表示し、Playwrightでスクリーンショットを撮影。それをデザイン原稿と比較して、以下のメトリクスで合否判定を行います。
- **画像サイズ・変更ピクセル率**: 座標ごとの色の差異を算出（閾値10%以下）。
- **SSIM (Structural Similarity)**: 輝度やコントラスト、構造的な類似性を評価（閾値0.9以上）。
- **補助指標**: 特徴点マッチング（ORB）や人間が知覚する差分（Butteraugli）を、AIが原因を特定するための補足情報として提供。
### 検証結果と課題
この決定論的ループを導入することで、AIが「px調整職人」のようにCSSを微調整し、人間が見落としがちな余白やフォントサイズのズレを自動修正できることが確認されました。一方で、フォントの描画環境の差異やアニメーション、厳しすぎる閾値設定によるトークン消費の増大といった実用上の課題も整理されています。