ai-site-cloner — скилл
ai-site-cloner превращает Claude Code или Cursor в конвейер копирования сайта в Next.js с замером стилей и сверкой по пикселям.
- 56 ★ репозитория
- Последний коммит
- MIT
Широкий доступ
Почему такой уровень
- Агент скачивает чужие страницы и ресурсы, а копирование без разрешения нарушает авторские права.
- Playwright и Chromium запускаются локально, параллельные агенты правят рабочие деревья.
Установка
- Работает в
Ручная установка
npm installШаг 2 Quick Start из README: выполняют в репозитории, созданном из шаблона. Chromium ставится при первом запуске или командой `npm run setup`.
Доступ и проверки
Как мы проверяемШирокий доступИнструмент может менять данные, выполнять команды или работать с секретами.
- Агент скачивает чужие страницы и ресурсы, а копирование без разрешения нарушает авторские права.
- Playwright и Chromium запускаются локально, параллельные агенты правят рабочие деревья.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
ai-site-cloner — шаблон репозитория со скиллами `/clone-website` и `/restyle`. Команда обходит сайт по карте и навигации, снимает вычисленные стили скриптом Playwright, скачивает ресурсы и замеряет макет на трех ширинах экрана. Из JSON выгрузки строятся спецификации секций, а агент дописывает только решения о верстке. Сборку ведут параллельные агенты в рабочих деревьях git. Контроль качества сравнивает страницы по пикселям и возвращает номера секций, которые не дотянули до 95% на трех экранах. Затем `/restyle` перекрашивает клон под ваш бренд из файла `BRAND.md`. Поддержаны Claude Code, Cursor, Copilot, Gemini CLI и еще восемь инструментов.
Для кого. Фронтенд-разработчикам и студиям, которым нужно воспроизвести собственный или разрешенный сайт на Next.js с контролем точности.
Подходит, если
- Нужно перенести старый сайт заказчика на Next.js без потери верстки.
- Лендинг надо воспроизвести как основу и перекрасить под новый бренд.
- Агент гадает значения отступов по скриншоту, и нужны замеры вместо догадок.
- Стоит оценить точность копии числом, а не на глаз.
Не подходит, если
- Нет прав на копируемый сайт или его дизайн.
- Страница почти целиком отрисована на холсте или скрыта за входом.
- Нужен только быстрый макет без точности.
Пример запроса к агенту
Склонируй сайт моего проекта командой /clone-website и покажи, какие секции не дотянули до 95%.Ограничения
Репозиторий используют как шаблон: создайте свой на его основе, выполните `npm install`, Chromium скачается при первом запуске. Рекомендуется запуск `claude --chrome` для разбора взаимодействий. Копирование чужого сайта может нарушать авторские права и условия сервиса: клонируйте свой проект или сайт с разрешением. Холст и динамические состояния воспроизводятся не везде, итог проверяют вручную. Лицензии шрифтов и картинок оригинала остаются на совести автора проекта.
Как отключить. Удалите созданный из шаблона репозиторий и скачанный Chromium из кэша Playwright. Скиллы лежат в `.claude/skills`, `.codex/skills` и `.github/skills` проекта.
Частые вопросы
Как запустить клонирование?
Создайте репозиторий из шаблона, выполните `npm install`, откройте `claude --chrome` и вызовите `/clone-website https://example.com`.
Чем это отличается от скриншота в код?
Значения шрифтов, отступов, цветов и состояний замеряет скрипт на живой странице, агент их не придумывает. Итог сверяется по пикселям.
Какую точность обещает автор?
На примере plausible.io средняя сверка составила 99,71% на девяти секциях и трех экранах. Это результат автора для одного сайта.
Как сменить дизайн клона?
Заполните `BRAND.md` и вызовите `/restyle`: клон получает ваши цвета и шрифты.
Какие агенты поддерживаются?
Claude Code, Cursor, Copilot, Gemini CLI и еще восемь инструментов, у каждого свой каталог правил в репозитории.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл clone-website воссоздает сайт по URL как чистое Next.js-приложение: скриншоты, замер стилей, параллельная сборка секций и визуальная сверка
Скилл-методика воспроизведения сайтов: от статичной страницы до тяжелого WebGL, с упором на настоящий исходный код, а не на выдуманный агентом
Скилл и CLI pwc: по одной команде clone с адресом агент воссоздает страницу сайта как проект Vite и React и измеряет совпадение
Скилл воссоздает интерфейс по сайту, скриншоту или записи экрана и оценивает копию по макету, стилю, пикселям и движению.
Скилл для сборки премиальных скролл-сайтов с реальным дизайн-стандартом: типографика, ритм, глубина, движение и проверка в браузере
design-to-code — сайт из изображения дизайна
design-to-code
Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном
Коротко о README
Шесть фаз идут по порядку и возобновляются с любого места: обход, замеры, основа, секции, сборка и проверка. Токены экономят компактные выгрузки и спецификации по 2–4 КБ.