Зачем это нужно
Частая ситуация: есть сайт, который нравится — по вёрстке, анимациям, подаче. Хочется похожий для себя или для заказчика. Раньше вариантов было два: заказать разработку с нуля или долго разбирать исходники руками.
AI Website Cloner Template меняет подход. Вы даёте агенту ссылку на страницу, он открывает её в браузере, разбирает на блоки и собирает работающий проект, который дальше правится как обычный код: меняете тексты, цвета, порядок секций.
Автор проекта — JCodesMore. Репозиторий открытый, лицензия MIT, на момент написания около 37 тысяч звёзд.
Что получается на выходе
Не скриншот и не архив со страницей, а проект на Next.js 16 с React 19 и строгим TypeScript, где каждый блок вынесен в отдельный компонент. Стили описаны через Tailwind CSS v4 и shadcn/ui. Такой код можно открыть, отредактировать и задеплоить как собственный сайт.
- Вёрстка повторяет исходную страницу — сетки, отступы, типографику.
- Адаптив снимается отдельно: агент смотрит и десктопную, и мобильную раскладку.
- Анимации, привязанные к скроллу и времени, разбираются отдельно, включая сайты на Framer.
- Картинки, шрифты и SVG забираются из оригинала (при наличии прав на их использование).
Как устроен процесс
Внутри репозитория лежит инструкция для агента (.agents/skills/clone-website/SKILL.md). Она описывает четыре этапа.
1. Карта
Агент читает настройки проекта, открывает исходные ссылки и составляет соответствие: какая страница сайта превращается в какой маршрут проекта. Уже существующие файлы не затираются.
2. Осмотр
Страница открывается в браузере. Агент фиксирует внешний вид на разных размерах экрана, забирает ресурсы напрямую по HTTP, где это удобнее, чем через браузер, и проверяет состояния элементов — наведение, меню, модальные окна.
3. Сборка
Пишутся компоненты и рабочие интеракции. Независимые секции агент может отдать отдельным подагентам, чтобы работать параллельно.
4. Сверка
Локальная страница сравнивается с оригиналом при одинаковом размере окна и одинаковых состояниях. Отличия исправляются, после чего запускается проверка сборки.
Сценарии применения
| Сценарий | Что делает инструмент |
|---|---|
| Понравился чужой сайт | Собирает похожую структуру, которую вы переделываете под свой контент |
| Переезд со старого движка | Переносит страницы с WordPress, Webflow или Squarespace в современный код |
| Потеряны исходники | Восстанавливает проект по живому сайту |
| Разбор чужих анимаций | Показывает на реальном коде, как устроено движение и раскладка |
Установка и первый запуск
Нужен Node.js 24+ и кодинг-агент с доступом к браузеру.
Set up https://github.com/JCodesMore/ai-website-cloner-template as a standalone project in a new folder on my computer.
После того как проект развёрнут, в Claude Code или Cursor:
/clone-website https://example.com
Дальше агент проходит все четыре этапа и отдаёт результат: соответствие маршрутов, инструкции запуска, скриншоты сравнения и список того, что осталось расхождением.
Поддерживаемые агенты
- Claude Code — рекомендуется, лучше всего работает с Opus.
- Codex CLI.
- OpenCode.
- Cursor.
Инструкция хранится в одном месте и читается всеми агентами напрямую; для Claude Code есть тонкая обёртка-команда /clone-website.
Ограничения
Клон снимает вёрстку и поведение, но не переносит чужие права на логотипы, фотографии и тексты. Для использования в продакшене нужны свои материалы. Сложные динамические сценарии — личный кабинет, оплата, серверная логика — инструмент не воссоздаёт: он работает с тем, что видно и доступно в браузере.
Сайты с жёсткой защитой от автоматизации могут отдаваться не полностью, тогда часть блоков придётся доделать руками.
Итог
Инструмент закрывает конкретную задачу: быстро получить рабочий прототип по образцу понравившегося сайта и дальше вести его как обычный проект. Особенно полезен дизайнерам и разработчикам, которым нужно показать заказчику живой результат, а не макет.
