Webサイトをピクセル単位で再現するAIエージェント向けSkill「clone-website」

clone-website は、Webサイトをピクセル単位の精度で再現するオープンソースのエージェント向けスキルだ。対応環境で /clone-website とURLを入力するだけで、エージェントがデザイン情報や素材を抽出し、フロントエンドを忠実に再構築する。

エージェントの「ごまかし」をどう防ぐか

Webページ全体をそのままAIに作らせようとすると、余白やフォントサイズを適当に推測し、見た目だけ似ていて細部が崩れたコードになりがちだ。このツールは徹底したエンジニアリングルールでその課題を解決している。

まず採用されているのが、タスクの徹底的な細分化だ。コンポーネントの仕様記述が約150行を超えると強制的に分割され、エージェントには getComputedStyle() で取得した実際のCSS計算値と単一パーツのみが渡される。

構築前にはスクリーンショットやテキスト、素材パス、状態変化をまとめた仕様書を作成し、契約書のようにプロンプトへ組み込む。さらに、ページをスクロールさせてスクロール連動かクリック連動かを事前に判定し、根本的な作り直しのリスクを防ぐ。コード生成時は複数のエージェントが独立した git worktree 上で並行作業を行い、最後に結合して元サイトとの画像差分をチェックする仕組みだ。

なぜ重要か

Webサイトをスクレイピングしてコード化するツールは多いが、AI特有の曖昧さを排除できず、手動の手直しが膨らむケースがほとんどだった。このプロジェクトは、仕様を極小に分割し、実測データで縛り、隔離環境で並行処理させればエージェントが高精度な実装を完遂できることを証明している。プロトタイプ制作やUI再現を行う開発者にとって、ワークフローの設計自体が大きな参考になるはずだ。