Как я перестал верстать руками и доверил клонирование сайтов нейросетям

Знакомая ситуация: заказчик приносит ссылку на сайт и говорит: «Хочу точно так же, только с нашими текстами и на Next.js». Раньше это означало долгие часы в DevTools, копирование стилей, выковыривание SVG-иконок и попытки понять, как работает эта хитрая сетка на Tailwind. Недавно я наткнулся на репозиторий ai-website-cloner-template, который обещает сделать всю эту грязную работу за вас с помощью ИИ-агентов.

Проект собрал уже больше 16 тысяч звезд на GitHub, и это не просто очередной скрипт для скачивания HTML. Это полноценный пайплайн, который разбирает чужой сайт на атомы и собирает его заново на современном стеке.

Что это вообще такое

По сути, перед нами шаблон проекта на Next.js 16, заточенный под работу с ИИ-кодинг-агентами вроде Claude Code, Cursor или Windsurf. Основная магия скрыта в наборе инструкций и скриптов, которые объясняют нейросети, как именно нужно «реверс-инжинирить» целевой ресурс.

Вы даете агенту URL, запускаете одну команду, и он начинает методично обходить сайт: снимает скриншоты, вытаскивает токены дизайна (цвета, шрифты, отступы), скачивает ассеты и пишет спецификации для каждого компонента.

Как устроено под капотом

Система работает в несколько этапов, и это выглядит куда серьезнее обычного парсинга.

Сначала запускается разведка. ИИ не просто смотрит код, он имитирует действия пользователя: скроллит, кликает по кнопкам, проверяет ховер-эффекты и смотрит, как сайт ведет себя на разных экранах. Все найденные стили превращаются в дизайн-токены Tailwind CSS v4.

Затем создается фундамент. Скрипты обновляют глобальные стили, настраивают шрифты и раскладывают картинки по папкам. Самое интересное начинается на этапе генерации спецификаций. В папке docs/research/components/ появляются файлы с подробным описанием каждого блока: от точных значений getComputedStyle() до логики поведения.

На финальном этапе проект задействует параллельную сборку. Если ваш ИИ-агент это поддерживает, он может разбросать задачи по разным веткам (git worktrees), чтобы одновременно собирать футер, шапку и карточки товаров, а потом склеить всё в единую страницу.

Технологический стек

Разработчик выбрал максимально свежие инструменты, что радует:

• Next.js 16 с App Router
• React 19 и строгий TypeScript
• Tailwind CSS v4 с использованием oklch для цветов
• shadcn/ui в качестве базы для компонентов

Интересный нюанс: вместо того чтобы тянуть тяжелые библиотеки иконок, инструмент старается извлекать оригинальные SVG прямо с сайта и сохранять их как чистые React-компоненты.

Зачем это нужно на практике

Я вижу три реальных сценария, где это экономит дни работы.

Во-первых, миграция со старых платформ. Если у вас висит проект на WordPress или Webflow, который давно пора перетащить на нормальный стек, этот шаблон сделает 80% рутины по переносу верстки.

Во-вторых, восстановление исходников. Бывает, что проект живет на хостинге, а доступ к репозиторию потерян вместе с уволившимся фрилансером. Это легальный способ получить чистый код своего же сайта в современном формате.

В-третьих, это крутой образовательный инструмент. Можно посмотреть, как топовые сайты реализуют сложные анимации или адаптивность, разобрав их на компоненты с помощью ИИ.

С чего начать

Для работы авторы настоятельно рекомендуют Claude Code с моделью Opus 4.7, хотя список поддерживаемых агентов огромен — от Cursor до Aider.

Алгоритм простой:

1. Создаете свой репозиторий через кнопку Use this template на странице проекта.
2. Клонируете его себе и ставите зависимости через npm install.
3. Запускаете своего агента (например, claude --chrome).
4. Вводите команду /clone-website и ссылку на сайт.

Пара слов об этике

Автор проекта в README отдельно просит не использовать инструмент для фишинга или воровства чужого контента. Логотипы, тексты и брендинг по-прежнему принадлежат их владельцам. Это инструмент для разработчиков, а не для создания подделок.

Стоит ли пробовать

Если вы часто занимаетесь фронтенд-разработкой и вам надоело переписывать одни и те же секции «Hero» и «Pricing» с нуля, то однозначно да. Проект избавляет от скучного копирования стилей и позволяет сразу перейти к настройке логики.

Конечно, результат не будет идеальным на 100% — ИИ иногда ошибается в сложных JS-взаимодействиях, и код всё равно придется просмотреть глазами. Но как база для быстрого старта это сейчас одно из лучших решений на GitHub.

Единственный минус — зависимость от платных API нейросетей. Для качественного клонирования большого сайта может уйти приличное количество токенов, но это всё равно дешевле, чем тратить 20-30 часов чистого времени разработчика.