URLを指定するだけで、AIコーディングエージェントがWebサイトをモダンなNext.jsアプリとして再構築します
中辛 の解説
スタック：Next.js 16、React 19、TypeScript strict、shadcn/ui、Tailwind CSS v4、Lucide Reactです。難易度は3（中程度）で、Node.js 24+とAIコーディングエージェント（Claude Code推奨、Opus 5対応）の環境があれば利用できます。プロジェクトをセットアップして/clone-website https://example.comコマンドを実行するだけで、Webサイトの全資産（画像・動画・SVGアイコン）をダウンロードし、フォント・色・レスポンシブデザイン・インタラクション仕様を抽出して、git worktreeで並列にビルドしたコンポーネントを自動マージします。デモはYouTubeで公開されており、実際の動作を確認できます
こんなリポジトリです
こんなときに便利です
- WordPress・Webflow・Squaespaceで運用中のサイトをモダンなNext.jsコードベースに移行したい場合
- ソースコードが失われた・開発者が退職した・レガシースタックの既存サイトから現代的なコードを復元したい場合
- 本番環境のWebサイトがどうやってレイアウト・アニメーション・レスポンシブ対応を実装しているか学びたい場合
主な機能
ほかとの違い
単純なHTMLスクレイピングと異なり、getComputedStyle値・インタラクション仕様・マルチメディア資産を構造化した形でエージェントに提供し、手作業推測を排除して再構築精度を最大化します
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Node.js 24以上
- AIコーディングエージェント（Claude Code・Codex・Cursor・OpenCodeのいずれか）
すぐに始める
- プロジェクトをセットアップします。AIエージェント（Codex、Claude Code等）に以下を貼り付けます：
Set up https://github.com/JCodesMore/ai-website-cloner-template
as a standalone project in a new folder on my computer.
Ask me where to put it. Clone the repository, remove its origin remote,
install dependencies, and run npm run check. Leave it ready for me
to clone a website.
またはこのテンプレートから自分のGitHubリポジトリを作成し、エージェントにクローン・セットアップを指示します。
- 依存関係をインストールしてプロジェクトを確認します：
npm install
npm run check
- Webサイトをクローンします。エージェント（Claude Code、Cursor等）でブラウザアクセスを有効化した状態で実行します：
/clone-website https://example.com
example.comの部分を再構築したいWebサイトのURLに置き換えます。
-
ビルド完了後、エージェントに変更要求を出します。
-
開発サーバーで確認します：
npm run dev
- 本番ビルドを実行します：
npm run build
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try JCodesMore/ai-website-cloner-template
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
これを仕事に活かす
味見がすんだら次は応用です — 仕事やビジネスに活かす方法をまとめました。
レシピ — AI にこのまま頼んでみてください
レシピを読み込んでいます…
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「自動化・ワークフロー」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/JCodesMore/ai-website-cloner-template)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る