← 一覧に戻る
pixel-clone スキル — テスト完全合格
2026年3月10日 23:30 更新
一言でいうと
Webサイトを「1ピクセルもズレなく」コピーするAIスキルが完成した
なぜこれが必要なのか
前に作った「design-cloner（デザインクローナー）」は、WebFetch（URLからHTMLを取得するツール）でサイトの情報を取って、デザインの特徴を分析してからゼロから作り直すアプローチだった。でもこれだと「そのサイトのイケてる部分」を正しく理解できないまま、似て非なるものができあがってしまう。
そこで発想を逆転させた。まず完全コピーを作って、それからモダンなコードに書き換える。コピーが正確かどうかは、スクリーンショットをピクセル単位で比較して検証する。1ピクセルでもズレてたら不合格。この「テスト駆動」のアプローチで品質を保証する。
このスキルがないと、AIは「それっぽいもの」を作るだけで、実際に元のサイトと一致しているかどうかの保証がない。
何をしたのか
「pixel-clone」という新しいスキル（AIへの指示書）を作って、3つのサイトでテストした。
スキルの仕組み（3フェーズ）
0キャプチャ（撮影）
Playwright（ブラウザを自動操作するツール）でサイトのスクリーンショットとHTML・CSSを丸ごと保存する。WebFetchと違い、JavaScriptが実行された後の完全な状態が手に入る。これがないと、動的に表示されるコンテンツが取得できない。
1完コピ（RED → GREEN）
取得したHTML/CSSをローカルに配置して、pixelmatch（ピクセル単位の画像比較ツール）でオリジナルと比較する。差分が0になるまで修正を繰り返す。TDD（テスト駆動開発）でいう「RED（テスト失敗）→ GREEN（テスト成功）」のサイクル。差分が1でもあれば不合格で、諦めることは許されない。
2書き換え（REFACTOR）
完全コピーが確認できたら、Next.js + Tailwind CSS（モダンなWeb開発のフレームワーク）に書き換える。書き換えのたびにピクセル比較して、見た目が崩れてないことを確認しながら進める。ユーザーが「参考にしたい」と言っている場合は、コンテンツもユーザー向けに差し替える。
不正防止の仕組み
TDD（テスト駆動開発）で一番やってはいけないのは「テストを書き換えて合格にする」こと。このスキルには3つの不正防止機能がある:
- SHA-256ハッシュ検証（暗号学的な「指紋」）— オリジナルのスクリーンショットに固有の指紋を記録しておき、すり替えを自動検出する
- 合格基準の固定 — 合格ラインは「差分ゼロ（完全一致）」で、これを緩めようとするとエラーで強制停止する
- 比較スクリプトの改変禁止 — 比較用のプログラムはスキル側にあり、プロジェクト側にコピーして改変できない設計
テスト結果
同じお題を「スキルあり」と「スキルなし」の両方で実行して比較した。スキルありは全項目合格、スキルなしはほぼ全滅。差は+95.8ポイント。スキルなしだとピクセル完全一致は1つも達成できなかった。
テストケース詳細
最もシンプルなサイト。CSS5行、段落2つだけのミニマルページ。
Next.js書き換え時に3回のTDDループ（5,027差分 → 82差分 → 0差分）。Tailwind CSSの初期設定（preflight）が文字間隔と下線装飾を勝手に変えてしまう問題を発見・修正した。
- Playwrightでスクリーンショット撮影
- HTML保存
- ピクセル比較で差分ゼロ達成
- Next.js + Tailwind CSSプロジェクト作成
- 改ざん防止ハッシュ記録
Swagger UI（API管理画面を自動生成するツール）を使った複雑なサイト。CSS 150KB。
最も難易度が高かった。8回のTDDループ（70,499差分 → ... → 0差分）。コンテンツもサンプルAPIドキュメント（5グループ17エンドポイント）に差し替え済み。
- Playwrightでスクリーンショット撮影
- 8回のTDDループで差分ゼロ達成
- Next.js + Tailwind CSSプロジェクト作成
- コンテンツをユーザー向けに差し替え
Starlight（ドキュメント向けテーマ）ベースの技術系サービスページ。スコープ付きCSS（特定コンポーネント専用のスタイル）が多数。
299回のツール呼び出し、38分の実行時間。CSSスコープ変数の解決やレイアウト順序の制御など、高度な技術課題を全て解決して差分ゼロを達成。
- Playwrightでスクリーンショット撮影
- 複数回のTDDループで差分ゼロ達成
- Next.js + Tailwind CSSプロジェクト作成
前バージョンとの比較
BEFORE（design-cloner）
- WebFetchでHTMLを取得
- デザイントークンを抽出
- ゼロから作り直す
- 「似てるけど違う」が限界
AFTER（pixel-clone）
- Playwrightで完全キャプチャ
- まず完全コピーを作る
- ピクセル単位で検証
- 1ピクセルもズレない完全一致
ポイント
t-wada（テスト駆動開発の日本の第一人者）の視点: このテストで最も価値があるのは「スキルあり vs スキルなし」の比較。スキルがあることで品質が上がることを数値で証明できれば、スキルの存在意義が立証できる。結果は100% vs 4.2%で、差は歴然だった。
コストについて: スキルありは時間がかかる（シンプルなサイトで約9分、複雑なサイトで約38分）。でもそれは「正確さを保証するために何度もチェックを繰り返す」から。スキルなしは速い（3〜5分）けど、品質の保証がない。
最大の発見: Tailwind CSS（CSSフレームワーク）の初期設定「preflight」が、元のサイトの見た目を壊す最大の原因だった。3つのテストケース全てで発生した共通の問題。スキルにこの知見が組み込まれているので、ユーザーは同じ罠にハマらずに済む。