Web Clone
Скилл-методика воспроизведения сайтов: от статичной страницы до тяжелого WebGL, с упором на настоящий исходный код, а не на выдуманный агентом
Средний риск
Средний уровень ставим, когда инструмент запускает код, ходит в сеть или читает файлы проекта. Перед установкой посмотрите, что именно он делает.
Почему такой уровень
- Скрипты запускают браузер, ходят в сеть и сохраняют ассеты и ответы сторонних сайтов
- Воспроизведение чужих сайтов требует проверки лицензии и разрешения на публикацию
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/web-cloneОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a claude-code -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a cursor -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a github-copilot -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a codex -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a gemini-cli -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a cline -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a roo -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Форк Roo Code, папки .roo те же.
Выполните в терминале в папке проекта
npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a opencode -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Установи скилл: git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone. Пути к скриптам в SKILL.md поправь под свою машину, для разведки нужен Node и Playwright.
Другие способы из описания автора
git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-cloneПосле клонирования поправьте пути к скриптам в SKILL.md под свою машину.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл превращает воспроизведение сайта в повторяемый процесс из шести шагов. Главное правило: сначала найти настоящий исходный код, а любой код из готового ИИ-разбора считать выдумкой, пока он не сверен построчно с оригиналом. Дерево решений разводит задачу по веткам: статичный HTML зеркалится через wget, контентные сайты на React, Vue или Next пересобираются на шаблоне, многостраничные сайты сначала обходятся по маршрутам, а тяжелый фронтенд на WebGL, Canvas или Three.js разбирается по настоящему коду или через захват кадров с оценкой достоверности каждого вывода. К скиллу приложены скрипты на Node с Playwright: разведка страницы, сбор ассетов, захват сети, обход маршрутов, проба взаимодействий, зеркалирование статичной сборки и попиксельное сравнение оригинала с копией. Отдельно ведется проверка лицензии перед копированием и снятие трекеров.
Для кого. Для разработчиков и дизайнеров, которые изучают чужие сайты и делают на их основе собственные проекты.
Подходит, если
- Нужно локально воспроизвести сайт, чтобы разобраться, как он устроен
- Нужно разобрать сложный эффект на WebGL или Canvas по настоящему коду
- Нужно снять с сайта дизайн-структуру и заменить содержимое своим
Не подходит, если
- Хотите публично переопубликовать чужой сайт без разрешения и с нарушением лицензии
- Нужны серверная логика, оплата или авторизация оригинала, а не фронтенд
Пример запроса к агенту
Воспроизведи этот сайт локально и разбери, как сделан его эффект прокруткиОграничения
Скилл честно воспроизводит фронтенд и не берется за серверную логику, оплату, авторизацию и проприетарные API оригинала. Скрипты требуют Node и Playwright, а часть команд в SKILL.md записана с абсолютными путями машины автора, их нужно поправить под себя. Скилл настаивает на проверке лицензии: публично переопубликовывать чужой код без разрешения нельзя, отсутствие файла лицензии по умолчанию означает сохранение всех прав.
Как отключить. Удалите папку web-clone из каталога скиллов, например ~/.claude/skills/web-clone.
Проверка безопасности
- Скрипты запускают браузер, ходят в сеть и сохраняют ассеты и ответы сторонних сайтов
- Воспроизведение чужих сайтов требует проверки лицензии и разрешения на публикацию
Коротко о README
README описывает скилл для Claude Code по воспроизведению сайтов, от статичной страницы до тяжелого WebGL-демо, без слепого копирования выдуманного агентом кода. В основе правило доставать настоящий исходный код и дерево решений из шести шагов под разные типы сайтов. К скиллу приложены скрипты на Node с Playwright для разведки, зеркалирования, обхода маршрутов, захвата сети и попиксельного сравнения. Отдельно описаны оценка достоверности выводов при разборе эффектов и проверка лицензии перед копированием. Ставится копированием репозитория в каталог скиллов, лицензия MIT.
SKILL.md
--- name: web-clone description: > 网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。 metadata: author: jane (xiaoer) version: "1.6.0" use_case: 个人本地复刻/学习网站,沉淀自 website-clones 克隆中枢 --- # Web Clone 把"复刻一个网站"做成可重复的流程。配套工程区:~/projects/website-clones/。 ## 头号铁律:真源码至上,绝不信 AI 推测的代码 任何 AI 生成的"复刻分析/施工图",正文的概念骨架可以参考,但里面的可执行代码块默认全是臆造的,必须逐行用真源码核对,否则照抄必崩。 所以第一动作永远是:拿到真源码。
Частые вопросы
Чем это лучше, чем просто попросить агента скопировать сайт?
Скилл заставляет сначала достать настоящий исходный код и сверять с ним каждый блок, а не доверять правдоподобному, но выдуманному коду из ИИ-разбора.
Можно ли выложить копию в сеть?
Только если это разрешает лицензия оригинала. Скилл требует проверить лицензию, а по умолчанию копия делается для локального изучения и переработки под себя.
Похожие
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой