Perfect Web Clone — скилл
Скилл и CLI pwc: по одной команде clone с адресом агент воссоздает страницу сайта как проект Vite и React и измеряет совпадение
- 280 ★ репозитория
- Последний коммит
- MIT
Широкий доступ
Почему такой уровень
- Позволяет воссоздать чужую страницу целиком: тексты, изображения и дизайн защищены авторским правом, а копия фишинговой страницы может нанести вред третьим лицам
- Запускает браузер Chromium, обращается к произвольным сайтам и скачивает их ресурсы на диск
- Агент выполняет сборку и запускает локальный просмотр, то есть исполняет код проекта Node
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/perfect-web-cloneОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемШирокий доступИнструмент может менять данные, выполнять команды или работать с секретами.
- Позволяет воссоздать чужую страницу целиком: тексты, изображения и дизайн защищены авторским правом, а копия фишинговой страницы может нанести вред третьим лицам
- Запускает браузер Chromium, обращается к произвольным сайтам и скачивает их ресурсы на диск
- Агент выполняет сборку и запускает локальный просмотр, то есть исполняет код проекта Node
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Perfect Web Clone ведет агента по полному циклу копирования страницы: снимок живого адреса с локализацией ресурсов, план реальных разделов, чистый React для каждого раздела, сборка, оценка совпадения и исправление худшего раздела. Запрос формулируется одной фразой вроде `clone https://example.com`, и этого достаточно для всего прогона. Работа разделена между агентом и командой `pwc`. Агент понимает материал и пишет код. `pwc` выполняет детерминированные шаги и никогда не вызывает модель: `pwc extract` снимает страницу, `pwc plan` строит план, `pwc assemble` собирает проект, `pwc build` собирает сайт, `pwc fingerprints` и `pwc weight` проверяют отпечатки и вес, `pwc score` сравнивает эталонный и итоговый скриншоты. Каждая команда печатает JSON, и значимо только поле `ok`. Прогон завершается статусом `ready_for_user_review` или `failed_with_residuals` с доказательствами. Работа считается готовой только по измерениям, а не по внешнему сходству: скилл не останавливается после первого экрана и не засчитывает похожий, но нерабочий виджет. Если страница построена на WebGL, canvas во время выполнения или анимации прокрутки, заранее сообщается, что такой вид может не повториться, но содержимое все равно клонируется. Шаблон проекта собран на Vite, React и Tailwind.
Для кого. Фронтенд-разработчикам и дизайнерам, которым нужна точная заготовка по существующей странице: свой старый сайт, макет, который надо воспроизвести в коде, или страница для разбора.
Подходит, если
- Старый сайт без исходников надо перенести на Vite и React с сохранением вида
- Нужна заготовка по лендингу, который вы вправе воссоздать, чтобы дальше править его в коде
- Скриншота мало, и требуется чистый компонентный код с локализованными ресурсами
- Совпадение хочется измерять: вес, отпечатки и визуальный счет, а не оценивать на глаз
- Страницу надо разобрать по разделам и посмотреть, как она собрана
Не подходит, если
- Нужно повторить чужой коммерческий сайт или бренд без разрешения: так нарушаются авторские права и права на товарный знак
- Страница держится на WebGL, canvas в реальном времени или хореографии прокрутки: клон воспроизведет содержимое, но не вид
- Нужен сайт с серверной логикой, формами и личным кабинетом: клонируется страница, а не бэкенд
- Нет Python 3.10, Node 20 и Chromium для Playwright
Пример запроса к агенту
clone https://example.com и после сборки покажи, какой раздел совпал хуже всего и что ты в нем исправилОграничения
- Нужны Python 3.10 или новее, Node 20 или новее и Chromium для Playwright (`playwright install chromium`).
- Страницы с WebGL, canvas во время выполнения или анимацией по прокрутке воспроизводятся без такого вида, и скилл сообщает об этом заранее.
- Результат бывает `failed_with_residuals`: тогда остаются отчеты об оставшихся расхождениях, их надо дорабатывать вручную.
- Копируемые тексты, изображения и стили принадлежат владельцу исходной страницы, право на их использование в другом проекте нужно проверять самостоятельно.
Как отключить. Удалите скилл из каталога навыков агента и плагин, если подключали его. Пакет снимается командой `pip uninstall` с именем пакета из pyproject, а созданные проекты и каталог с локализованными ресурсами удаляются как обычные папки.
Частые вопросы
Как установить Perfect Web Clone?
Выполните `pip install "git+https://github.com/ericshang98/Perfect-Web-Clone.git"` и `playwright install chromium`, затем подключите скилл из репозитория perfect-web-clone-skill к Claude Code, Codex или другому агенту, который запускает `pwc`.
Что говорить агенту, чтобы начать клонирование?
Одну фразу с адресом, например `clone https://example.com`. Одного запроса достаточно для всего прогона: снимка, плана, кода, сборки и исправлений.
Чем это отличается от сохранения страницы как HTML?
Выходом служит чистый проект на Vite, React и Tailwind с компонентами по разделам и локализованными ресурсами. Кроме того, результат измеряется по отпечаткам, весу и визуальному совпадению.
Что значит failed_with_residuals?
Прогон дошел до конца, но измеренные расхождения остались выше порога. Вместе со статусом выдаются доказательства, чтобы вы видели, какие разделы требуют ручной доработки.
Можно ли копировать любой сайт?
Технически можно, но тексты, изображения и дизайн защищены правами их владельцев. Воссоздавайте свои страницы или те, на которые есть разрешение.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл-методика воспроизведения сайтов: от статичной страницы до тяжелого WebGL, с упором на настоящий исходный код, а не на выдуманный агентом
Скилл clone-website воссоздает сайт по URL как чистое Next.js-приложение: скриншоты, замер стилей, параллельная сборка секций и визуальная сверка
Скилл разбирает и переносит WebGL, WebGPU и Canvas-эффекты со страницы в отдельный локальный проект на нативном JS
Скилл для сборки премиальных скролл-сайтов с реальным дизайн-стандартом: типографика, ритм, глубина, движение и проверка в браузере
Скилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
Скилл /taste разбирает дизайн сайта по ссылке: токены, принципы с компромиссами и готовые правила для Cursor и Claude Code
Коротко о README
README объявляет скилл основным продуктом, а репозиторий измеряемым ядром. Затем идут установка, семь шагов прогона, список команд `pwc`, структура репозитория и лицензия MIT. Отдельно оговорено, что сайты с WebGL, canvas и анимацией по прокрутке имеют потолок точности.
Бейдж для README
Исходный SKILL.md
--- name: perfect-web-clone description: >- Reproduce a live website from its URL as a clean, deployable Vite + React project by running the complete agent-driven Perfect Web Clone harness: capture source evidence, plan the full page, author every section, implement common interactions, build, compare, repair, and hand the measured result to the user for review. Use whenever the user asks an agent to clone, copy, reproduce, replicate, rebuild, or 复刻 a website or web page, including a minimal request containing only an action and URL. The user gives one natural language instruction; the current agent runs the internal multi-step loop through the deterministic pwc hands and eyes. --- # Perfect Web Clone Pixel-perfect cloning is this skill. The current agent is the harness runtime. `pwc` is the deterministic hands and eyes: it captures, persists, builds, renders, replays, and measures. It never calls another model. You understand the evidence, author code, and choose targeted repairs. A single natural-language request such as “复刻 https://example.com” authorizes the entire local reproduction workflow. Treat it as one user operation even though the harness performs many internal tool calls and repair iterations. Do not ask for routine confirmation when the request contains a usable URL. Infer that a full-page clone is the default. Continue across phases without returning control merely to announce progress or request ordinary implementation choices. Ask only when a missing fact would materially change scope, when credentials or new authority are required, or when the user must resolve an external blocker. Deployment is never implicit. Produce a local build and review URL by default; deploy only when the user explicitly asks. Use one owning agent for the whole page so global visual context survives across sections. Do not delegate unless the user explicitly asks. ## Non-negotiable execution contract 1. Run capture, planning, authoring, build, verification, repair, and handoff as one continuous task. 2. Inspect every `ok` or `success` flag and its error evidence. Never invent a tool result. 3. Preserve immutable raw evidence separately from normalized evidence. Refuse