AI Website Cloner Template: пересобрать любой сайт в чистом Next.js одной командой

Есть сайт, который хочется иметь в виде нормального кода: свой WordPress или Webflow-проект, потерянный репозиторий, легаси-стек, который никто не может поддерживать. Раньше путь от «живой сайт» до «редактируемая кодовая база» был ручным: разметка, стили, ассеты, адаптив, анимации. Репозиторий JCodesMore/ai-website-cloner-template превращает этот путь в одну команду — /clone-website https://example.com, которую выполняет ваш AI-агент.

Что это за проект

Это Next.js-шаблон (MIT, TypeScript) с заранее подготовленной инфраструктурой и одним агентским скиллом /clone-website. Вы не пишете промпт с нуля и не придумываете архитектуру проекта — вы получаете рабочий боллерплейт на Next.js 16, в который агент подставляет результаты автоматического анализа целевого сайта.

Ключевая идея: скилл не «смотрит на страницу и описывает её словами», а снимает конкретные числа. Каждый builder-агент получает inline полные спецификации компонентов с точными вычисленными значениями getComputedStyle(), моделями взаимодействий, контентом для нескольких состояний, адаптивными брейкпоинтами и путями к ассетам. Как сформулировано в README: никакого угадывания.

На момент публикации у репозитория около 35,2 тыс. звезд и 5,1 тыс. форков, основной язык — TypeScript, лицензия MIT. Это популярный инструмент, но относиться к нему стоит как к инженерному, а не магическому: качество результата определяется тем, насколько аккуратно разложен оригинал.

Быстрый старт

Первый путь — попросить агента настроить всё самому. Вставьте в Claude Code, Codex или любой другой агент такой текст:

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.

Агент сам спросит, куда положить проект, склонирует репозиторий, удалит origin remote, поставит зависимости и прогонит проверки.

Второй путь — создать свой репозиторий на GitHub через кнопку Use this template (ссылка на генератор: https://github.com/JCodesMore/ai-website-cloner-template/generate). Дальше то же самое: дайте агенту ссылку на свой репозиторий и попросите склонировать его, установить зависимости и выполнить npm run check.

Дальше всё сводится к одной команде. Откройте проект в агенте с доступом к браузеру (в Claude Code или Cursor) и выполните:

/clone-website https://example.com

Подставьте нужный URL. Когда сборка закончится, просите агента о любых правках обычным языком — дальше это обычная работа с кодовой базой.

Поддерживаемые агенты

Требования минимальны: Node.js 24+ и любой агент из таблицы. Никаких API-ключей к внешним сервисам клонирования не нужно — вся работа идёт через браузер агента и локальные инструменты.

Как устроен пайплайн

Скилл /clone-website выполняет многофазный процесс, и именно последовательность фаз отличает такой подход от «скриншот + промпт». Разбор по фазам:

1. Разведка (Reconnaissance) — скриншоты страницы, извлечение дизайн-токенов и обход взаимодействий: скролл, клики, наведение, проверка адаптивных состояний.
2. Фундамент (Foundation) — обновляются шрифты, цвета и глобальные стили, скачиваются все ассеты целевого сайта.
3. Спецификации компонентов (Component Specs) — агент пишет детальные spec-файлы в docs/research/components/ с точными вычисленными CSS-значениями, состояниями, поведением и контентом.
4. Параллельная сборка (Parallel Build) — запускаются builder-агенты в отдельных git worktrees, по одному на секцию или компонент. Изоляция через worktrees — то, что позволяет распараллелить работу над независимыми кусками без конфликтов в рабочем дереве.
5. Сборка и QA (Assembly & QA) — worktrees сливаются, страница собирается воедино, и выполняется визуальный diff с оригиналом.

Последний пункт особенно важен: финальная сверка с эталоном — это не самопроверка «похоже наверное», а сравнение с исходником. Сравнительные скриншоты кладутся в docs/design-references/ (в репозитории, например, лежит comparison.png), и по ним уже видно, где результат разошёлся с оригиналом.

Стек технологий

Боллерплейт намеренно скучный и современный:

То есть на выходе вы получаете не «выгрузку HTML», а проект с App Router, строгим TypeScript, дизайн-токенами и компонентами, к которым можно нормально возвращаться. Ассеты раскладываются в public/images/, public/videos/ и public/seo/.

Структура проекта

src/
  app/              # Next.js routes
  components/       # React components
    ui/             # shadcn/ui primitives
    icons.tsx       # Extracted SVG icons
  lib/utils.ts      # cn() utility
  types/            # TypeScript interfaces
  hooks/            # Custom React hooks
public/
  images/           # Downloaded images from target
  videos/           # Downloaded videos from target
  seo/              # Favicons, OG images
docs/
  research/         # Extraction output & component specs
  design-references/ # Screenshots
.agents/skills/
  clone-website/    # Canonical skill and inspection reference
.claude/commands/
  clone-website.md  # Thin Claude Code bridge
AGENTS.md           # Agent instructions (single source of truth)
CLAUDE.md           # Claude Code config (imports AGENTS.md)

Обратите внимание на нижнюю часть: скилл лежит в .agents/skills/clone-website/ — это переносимый формат, который Codex, Cursor и OpenCode читают напрямую. Для Claude Code в .claude/commands/clone-website.md лежит тонкий мост, чтобы команда /clone-website и её аргументы работали, не выставляя дубликат скилла остальным агентам. Правьте канонический скилл (его текст доступен в SKILL.md, а мост — в clone-website.md) — сгенерированных копий и скриптов синхронизации в проекте нет.

Инструкции для агента лежат в AGENTS.md и служат единственным источником истины; CLAUDE.md просто импортирует этот файл.

Команды и запуск

npm run dev       # Start dev server
npm run build     # Production build
npm run lint      # ESLint check
npm run typecheck # TypeScript check
npm run check     # Run lint + typecheck + build

npm run check — это линтер, проверка типов и продакшен-сборка в одной команде; именно её стоит прогонять после того, как агент закончил изменения, и именно её вызывает сценарий настройки из Quick Start.

Если предпочитаете контейнеры, в репозитории есть Dockerfile и docker-compose:

docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001

Сценарии использования

• Миграция платформы — пересобрать принадлежащий вам сайт с WordPress, Webflow или Squarespace в современную кодовую базу Next.js.
• Потерянный исходный код — сайт жив, а репозитория больше нет: разработчик ушёл, стек устарел, доступ к старой CMS пропал. Инструмент возвращает код в современном формате.
• Обучение — разобрать, как продакшен-сайты решают конкретные задачи: раскладка, анимации, адаптивное поведение, — на реальном рабочем коде, а не на абстрактных примерах.

О чём стоит помнить

Авторы прямо выделяют то, для чего проект не предназначен:

• Фишинг и имперсонация. Инструмент не должен использоваться для обмана, выдачи себя за другой сервис или любой противоправной деятельности.
• Выдача чужого дизайна за свой. Логотипы, брендовые ассеты и оригинальные тексты принадлежат их владельцам.
• Нарушение условий использования. Часть сайтов прямо запрещает скрейпинг и воспроизведение; проверяйте это до запуска.

Практический вывод: скилл — это ускоритель для легальной работы с сайтами, которые вам принадлежат, и исследовательских задач. Он не добавляет юридических прав, а ответственность за результат остаётся на пользователе.

Итог

Проект ценен не столько как «магический клонер», сколько как образец аккуратной организации агентского пайплайна: фазы, изоляция через worktrees, спецификации компонентов с точными значениями, визуальная сверка, один переносимый скилл вместо россыпи платформенных копий. Если вы всё равно планировали разбирать чужой фронтенд вручную, готовый Next.js-боллерплейт с этим скиллом сэкономит основную часть работы. Лицензия — MIT, текст в LICENSE, история изменений — в CHANGELOG.md.