Как сп*здить любой сайт?

Статья от канала - https://t.me/crypto_sgx

Ссылка на репозиторий - https://github.com/JCodesMore/ai-website-cloner-template?tab=readme-ov-file

Это универсальный шаблон для обратного проектирования любого сайта в чистую современную кодовую базу на Next.js с помощью AI‑агентов по кодингу.sourceforge+1

Рекомендуется: Claude Code с Opus 4.6 для наилучшего результата, но шаблон работает со многими AI‑агентами по кодингу.incrypted+1
Укажи URL, запусти /clone-website, и твой AI‑агент обследует сайт, извлечёт дизайн‑токены и ассеты, напишет спецификации компонентов и запустит параллельных билдеров для сборки.

Демонстрация

Демонстрация видос - https://youtu.be/O669pVZ_qr0?si=jLhuoyK9hXbIqC3n

Быстрый старт
Клонируй этот репозиторий
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone

Установи зависимости
npm install

Запусти свой AI‑агент — рекомендуется Claude Code:
claude --chrome

Запусти навык:
/clone-website <target-url1> [<target-url2> ...]

Кастомизация (опционально) — после базового клонирования модифицируй по необходимости.

Используешь другого агента?
Открой AGENTS.md для инструкций по проекту — большинство агентов подхватывают их автоматически.

Поддерживаемые платформы- https://github.com/JCodesMore/ai-website-cloner-template#supported-platforms

Предварительные требования

• Node.js 24+
• AI‑агент по кодингу (см. «Поддерживаемые платформы»)github+1

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

• Next.js 16 — App Router, React 19, TypeScript strict
• shadcn/ui — базовые компоненты Radix + Tailwind CSS v4
• Tailwind CSS v4 — дизайн‑токены в формате oklch
• Lucide React — иконки по умолчанию (заменяются на извлечённые SVG‑иконки при клонировании)sourceforge+1

Как это работает
Навык /clone-website запускает многофазный конвейер:incrypted+1

1. Разведка — скриншоты, извлечение дизайн‑токенов, обход взаимодействий (скролл, клик, наведение, адаптивность).
2. База — обновление шрифтов, цветов, глобальных стилей, скачивание всех ассетов.
3. Спецификации компонентов — подробные файлы спецификаций (docs/research/components/) с точными вычисленными CSS‑значениями, состояниями, поведением и контентом.
4. Параллельная сборка — запуск билдер‑агентов в git‑worktree, по одному на секцию/компонент.
5. Сборка и качество — слияние worktree, соединение страницы, визуальное сравнение с оригиналом.

Каждому билдер‑агенту передаётся полная спецификация компонента inline — точные значения getComputedStyle(), модели взаимодействий, многостадийный контент, адаптивные брейкпоинты и пути к ассетам. Никакого угадывания.

Варианты использования

• Миграция платформы — пересборка сайта, который тебе принадлежит, с WordPress/Webflow/Squarespace в современную Next.js‑кодовую базу.sourceforge+1
• Потерянный исходный код — сайт жив, но репозиторий пропал, разработчик ушёл или стек устарел. Восстанавливай код в современном формате.
• Обучение — разбор, как продакшен‑сайты достигают конкретных макетов, анимаций и адаптивного поведения, работая с реальным кодом.sourceforge

Не предназначено для

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

Структура проекта
src/
app/ # Роуты Next.js
components/ # React‑компоненты
ui/ # Базовые компоненты shadcn/ui
icons.tsx # Извлечённые SVG‑иконки
lib/utils.ts # Вспомогательная функция cn()
types/ # TypeScript‑интерфейсы
hooks/ # Кастомные React‑хуки

public/
images/ # Скачанные изображения с целевого сайта
videos/ # Скачанные видео с целевого сайта
seo/ # Фавиконы, OG‑изображения

docs/
research/ # Результаты извлечения и спецификации компонентов
design-references/ # Скриншоты

scripts/
sync-agent-rules.sh # Перегенерировать файлы инструкций для агентов
sync-skills.mjs # Перегенерировать навык /clone-website для всех платформ

AGENTS.md # Инструкции для агентов (единственный источник истины)
CLAUDE.md # Конфиг Claude Code (импортирует AGENTS.md)
GEMINI.md # Конфиг Gemini CLI (импортирует AGENTS.md)

Команды
npm run dev # Запустить dev‑сервер
npm run build # Сборка для продакшена
npm run lint # Проверка через ESLint
npm run typecheck # Проверка TypeScript
npm run check # Запустить lint + typecheck + build

Если используешь Docker
docker compose up app --build # собрать и запустить приложение
docker compose up dev --build # запустить приложение в dev‑режиме на порту 3001

Обновление для других платформ
Два файла являются единственным источником истины для всех платформ. Отредактируй источник, затем запусти скрипт синхронизации:

Что

Источник истины

Команда синхронизации

Инструкции по проекту

AGENTS.md

bash scripts/sync-agent-rules.sh

Навык /clone-website

.claude/skills/clone-website/SKILL.md

node scripts/sync-skills.mjs

Каждый скрипт автоматически перегенерирует платформо‑зависимые копии. Агенты, которые читают исходные файлы «нативно», не требуют дополнительной перегенерации.github+1