PixelPerfect UI Replicator

PixelPerfect UI Replicator
参照画像を、実装済みのUIへ近づけるための反復型UI再現スキル

PixelPerfect UI Replicatorは、単に画像を見てコードを生成するだけのスキルではありません。

参照画像を分析し、実際にUIを実装・起動・検証・比較・修正するサイクルを繰り返し、視覚的な一致度を高めることを目的とした、フロントエンド開発・UIリファクタリング向けの専門スキルです。

React、Next.js、Vue、Svelte、HTML/CSSなどのWebフロントエンドに対応し、既存機能を維持しながらデザインを改善します。

主な機能
画像からUI構造を解析

参照画像から以下を分析します。

レイアウト
グリッド
コンポーネント構成
余白
フォントサイズ
配色
ボーダー
シャドウ
角丸
アイコン
ボタン
カード
ナビゲーション
UIを実装

対応例

React
Next.js
Vue
Svelte
HTML/CSS
Tailwind CSS
CSS Modules

既存プロジェクトの構成を尊重し、不必要な依存関係の追加は行いません。

ブラウザで実際に検証

コードを書くだけでは終了しません。

実際にブラウザ上で

ページを表示
スクリーンショットを取得
コンソールエラー確認
Error Overlay確認
主要な操作確認

を実施します。

画像比較

参照画像と実装画面を比較し、

MAE
RMSE
Pixel Match
Difference Bounding Box
Changed Pixel Ratio

などを測定します。

画像サイズが異なる場合は、勝手に拡大・縮小して比較しません。

自動改善ループ

改善は一度で終了しません。

以下を繰り返します。

差分を分析
コードを修正
再ビルド
再表示
再比較
再評価

改善が止まるか、設定した終了条件を満たすまで反復します。

既存機能を保護

UIだけを変更し、

API
認証
データ取得
ビジネスロジック
状態管理

など、見た目以外の機能は必要がない限り変更しません。

不正な一致方法は禁止

このスキルでは、次のような方法は使用しません。

❌ 画面全体を画像として貼り付ける

❌ HTMLではなく背景画像だけで再現する

❌ 実測していない一致率を報告する

❌ ビルド成功だけで完成と判断する

❌ 存在しないスクリーンショット比較を報告する

対応フレームワーク
React
Next.js
Vue
Svelte
Astro
HTML/CSS
Tailwind CSS
CSS Modules
想定される用途
UIリニューアル
Figmaデザインの再現
スクリーンショットからの実装
デザイン修正
視覚回帰テスト
ダッシュボード改善
管理画面改善
SaaS UI改善
LP制作
ポートフォリオ制作
出力内容

実行後には以下を生成します。

編集・変更したファイル一覧
実施した修正内容
画像比較結果
視覚QAレポート
コンソールエラー確認
ビルド結果
型チェック結果
差分一覧
残っている差分
制約事項
再現コマンド
利用例
例1

「添付画像と同じダッシュボードをNext.jsで再現してください。」

例2

「既存のReactアプリのUIを、この参考画像と同じになるまで改善してください。」

例3

「Tailwind CSSを使って、この管理画面を忠実に再現してください。既存機能は変更しないでください。」

注意事項

このスキルは、検証可能な範囲でUIの再現性を高めることを目的としています。

OSやブラウザ、フォントレンダリング、元画像・アイコン・フォントの有無などの違いにより、環境によって表示差が生じる場合があります。

また、対象プロジェクトやブラウザ検証環境が提供されていない場合は、その制約を明示し、未実施の検証を完了済みとして報告することはありません。