AI Website Cloner Template — скилл
Скилл clone-website воссоздает сайт по URL как чистое Next.js-приложение: скриншоты, замер стилей, параллельная сборка секций и визуальная сверка
- 39 071 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скачивает и переиспользует чужие ассеты, шрифты и тексты с целевого сайта
- Может нарушить условия использования сайта, если клонировать без разрешения владельца
Установка
- Работает в
Ручная установка
/clone-website https://example.com
Команда доступна и в Cursor через ту же папку .agents/skills.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скачивает и переиспользует чужие ассеты, шрифты и тексты с целевого сайта
- Может нарушить условия использования сайта, если клонировать без разрешения владельца
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл clone-website пошагово разбирает целевой сайт: делает скриншоты, снимает шрифты, цвета и отступы, проходит по интерактивным состояниям и скачивает ассеты. По каждой секции он пишет отдельный файл спецификации с точными значениями computed CSS, состояниями и содержимым, а затем раздает эти спецификации параллельным агентам-сборщикам в отдельных git worktree, каждый строит свой компонент на Next.js, shadcn/ui и Tailwind. В конце worktree сливаются, страница собирается целиком и сверяется визуальным диффом с оригиналом. Репозиторий это шаблон проекта, который можно развернуть как отдельную копию через GitHub template или склонировать вручную.
Для кого. Для разработчиков, которым нужно быстро восстановить исходники сайта, который они уже ведут, или изучить, как устроена чужая верстка.
Подходит, если
- Нужно перенести свой сайт с Wordpress, Webflow или Squarespace в современный Next.js-код
- Сайт живой, а исходники потеряны или разработчик ушел
- Нужно разобрать, как устроены конкретные анимации и responsive-поведение на реальном примере
Не подходит, если
- Сайт не ваш и его нельзя копировать по условиям использования или по закону
- Цель выдать чужой дизайн, бренд или тексты за свои
Пример запроса к агенту
/clone-website https://example.comОграничения
README прямо запрещает использовать шаблон для фишинга, выдачи чужого дизайна за свой или обхода запрета на скрапинг в условиях сайта. Клонируется только то, что видно на странице: реальный бэкенд, база данных, аутентификация и SEO-оптимизация не входят в объем по умолчанию.
Как отключить. Удалите папку .agents/skills/clone-website из проекта или весь проект, созданный из шаблона.
Частые вопросы
Скилл работает одинаково во всех агентах?
Canonical-версия скилла лежит в .agents/skills/clone-website, Codex, Cursor и OpenCode читают ее напрямую, а Claude Code использует тонкий мостик .claude/commands/clone-website.md для той же команды.
Клонируется ли бэкенд сайта?
Нет, по умолчанию клонируется только видимый слой: верстка, стили, взаимодействия и заглушечные данные, реальный бэкенд и аутентификация не входят в объем.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
Скиллыai-site-cloner превращает Claude Code или Cursor в конвейер копирования сайта в Next.js с замером стилей и сверкой по пикселям.
Скилл-методика воспроизведения сайтов: от статичной страницы до тяжелого WebGL, с упором на настоящий исходный код, а не на выдуманный агентом
Скилл и CLI pwc: по одной команде clone с адресом агент воссоздает страницу сайта как проект Vite и React и измеряет совпадение
design-to-code — сайт из изображения дизайна
design-to-code
Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном
Скилл воссоздает интерфейс по сайту, скриншоту или записи экрана и оценивает копию по макету, стилю, пикселям и движению.
Скилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
Из блога
Коротко о README
README описывает шаблон как способ дать агенту URL и получить чистое Next.js-приложение взамен. Показан пятифазный процесс: разведка, фундамент (шрифты, цвета, ассеты), детальные спецификации по компонентам, параллельная сборка в git worktree и финальная сборка с визуальной сверкой. Указан стек: Next.js 16, shadcn/ui, Tailwind CSS v4, Lucide React. Отдельно перечислены запрещенные сценарии использования: фишинг, выдача чужого дизайна за свой, обход условий сайта на скрапинг. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: clone-website description: Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", or "pixel-perfect clone". The request must include one or more target URLs. --- # Clone Website You are about to reverse-engineer and rebuild the target URL or URLs in the user's request as pixel-perfect clones. When multiple URLs are provided, preserve every pathname as a distinct route and isolate each target's research, screenshots, components, and assets. Parallelize page work only after the shared foundation and output plan are fixed so concurrent builders cannot overwrite one another. This is not a two-phase process. You are a foreman walking the job site — as you inspect each section of the page, you write a detailed specification to a file, then hand that file to a specialist builder agent with everything they need. Extraction and construction happen in parallel, but extraction is meticulous and produces auditable artifacts. ## Scope Defaults Unless the user specifies otherwise: pixel-perfect fidelity, visual layout and styling, component structure and interactions, responsive design and mock data are in scope; real backend, authentication, real-time features, SEO optimization and accessibility audit are out of scope.