入力したURLの見た目をほぼそのままコードに落とし込める——そんな体験を実現しているのが、luminaチームが開発したbrowser-cliです。
この記事では、browser-cliの仕組みと、それを搭載したWeb復刻サービス「clonesite.ai」の使い方を整理します。
この記事でわかること
- browser-cliがWeb復刻で何をしているか
- セマンティック再構築とスクリーンショット比較の検証フロー
- 出力されるTanStackベースのtsxコードの中身
- clonesite.aiの料金体系と競合との違い
browser-cliとは何か
browser-cliは、AIコーディングエージェントがブラウザを操作しながらWebページを解析・再現するためのCLIツールです。開発者のD氏（@lumina__team）がclonesite.aiの復刻エンジンとして自社開発したもので、一般的なブラウザ自動化CLIとは用途が異なります。
通常のブラウザCLIはクリックやスクロールなどの操作に使われます。browser-cliはそれに加え、復刻対象のページを繰り返し読み取り、生成コードと元ページを突き合わせることに特化しています。独立開発者のidoubi氏による紹介では、復刻精度は95%以上に達すると報告されています（参考）。
なぜ従来のWeb復刻では精度が足りないのか
Webページをコードに変換するツールは、CopyWebやUX Pilot、Same.newなど複数存在します。多くはスクリーンショットや画像解析を起点にレイアウトを推測します。画像から構造を読み取る方式は、フォントや余白、レスポンシブのブレークポイントなど細部でズレが出やすいのが課題です。
browser-cliはこの課題に、実際のHTMLとCSSを直接取得するアプローチで対処します。clonesite.aiの公式サイトでも「スクリーンショットからの推測ではなく、公開ページの実HTML・CSS・フォント・ブレークポイントを読み取る」と明記されています。
セマンティック再構築とスクリーンショット比較
browser-cliの核心は、復刻中に走る2段階の検証ループです。
- セマンティック再構築 — 取得したDOMとスタイル情報から、ページの意味的な構造（見出し、ナビゲーション、カード、ボタンなど）を再構成する
- スクリーンショット比較 — 生成したページと元サイトの画面を並べ、ピクセル単位で差分を検出する
idoubi氏の紹介によると、browser-cliはこのループを要素ごとに繰り返し、各Web要素を個別に校正します。1回の生成で終わらず、差分が出た箇所を修正して再比較するため、最終的な見た目のズレを抑えられます。
この方式は、GitHubのwebclonerプロジェクトが採用するpixelmatchによる視覚QAループと思想が近いです。browser-cliはそれをclonesite.ai向けに統合し、エージェントが自律的に回せる形にしたと考えられます。
出力されるコードはTanStackベースのtsx
復刻が完了すると、ユーザーが受け取るのはプレビュー画面だけではありません。最終成果物はTanStackベースのソースコードで、復刻したページのtsxコンポーネントが含まれます。
D氏は普段から使っているフルスタック開発テンプレートを土台にしており、idoubi氏はShipAny TanStackテンプレートとの組み合わせを推奨しています。ShipAny TanStackはTanStack Start（Vite 8 + Nitro、React 19）上に認証・決済・RBACなどのSaaS基盤を備えたエージェント向けテンプレートで、/clone-websiteスキルでWeb復刻から本番デプロイまで一気通貫で進められます。
つまりbrowser-cliの出力は「見た目だけの静的HTML」ではなく、そのまま機能追加に進めるプロジェクトの起点になります。idoubi氏は「復刻完了後にコードをダウンロードし、エージェントに続きの機能開発を任せる」という使い方を、プロジェクトのコールドスタート解消として位置づけています。
clonesite.aiで体験する
browser-cliはclonesite.aiの裏側で動作するエンジンです。ユーザーはURLを1つ貼るだけで復刻フローが始まります。
主な機能
- 公開URLからHTML・CSS・フォント・レスポンシブブレークポイントを取得
- AIが構造を再構築し、ブランドカラー・コピー・ロゴへの差し替えも可能
- マルチページサイトの一貫したナビゲーション構造を維持した復刻
- ブラウザ上でライブ編集できるプレビュー
- 満足したらクレジットを消費して本番投入可能なコードをエクスポート
公式サイトのギャラリーには、Stripe、Notion、Linear、Framerなど実在サイトの復刻例が掲載されています。
料金体系
clonesite.aiはサブスクリプションではなく、復刻ごとの従量課金です。
| プラン | 内容 |
|---|---|
| Free | 1日1回の無料復刻、ライブプレビュー、セルフリブランド |
| Credits（$39/復刻） | 本番投入可能なコードのエクスポート、透かしなし |
| Full Clone（カスタム） | 全ページの復刻・リブランド・デプロイを代行 |
無料枠では毎日1回、透かし付きのプレビューまで試せます。コードのダウンロードはクレジット購入後です。$99で3回分のクレジットパックも用意されており、クレジットに有効期限はありません。
競合ツールとの違い
clonesite.aiは公式比較表でCopyWeb、UX Pilot、Same.newと機能差を示しています。URL入力のみで動作し、マルチページ復刻・ライブ編集プレビュー・コードエクスポート・従量課金をすべて揃えている点が差別化要素です。
idoubi氏自身もCopyWebの開発者であり、今回の投稿で「CopyWebもcoding agentへ転換し、CloneSiteに追随する」と述べています。同じWeb復刻領域でも、browser-cliの検証ループを搭載したclonesite.aiが精度面で先行しているという評価です。
注意点
browser-cliとclonesite.aiにはいくつか制約があります。
- バックエンドは復刻しない — 見た目とフロントエンド構造のみ。DBやAPIロジックは含まれません
- 公開ページが前提 — ログインが必要な非公開ページは対象外です
- 商標・ブランド資産の扱い — clonesite.aiはレイアウト構造を復刻したうえでリブランドする設計で、商標やバックエンドロジックのコピーは行いません
また、browser-cli自体は現時点でnpmやGitHubから一般公開されている形跡はなく、clonesite.ai経由で間接的にその成果を利用する形になります。
Web開発の現場でどう活きるか
フロントエンド開発者にとって、browser-cliの価値は「デザインの再現作業を自動化し、実装の出発点を一気に引き上げる」点にあります。ランディングページの参考サイトからコンポーネントを起こす作業、既存サイトのリニューアル前のたたき台づくり、プロトタイプのUI骨格生成——いずれもURLを渡すだけでTanStackのtsxコードが手に入るなら、初期コストを大幅に削れます。
idoubi氏の評価どおり、復刻精度で他のWeb復刻エージェントを上回るという点が最大の武器です。セマンティック再構築とスクリーンショット比較を組み合わせた検証ループが、その精度を支えています。