AIKraft/AI/Войти
AIKraft/Skills/web-clone

web-clone

Методология клонирования сайтов: от извлечения исходного кода до сборки проекта. Подходит для задач по репликации интерфейсов, верстки и воссоздания WebGL/Canvas эффектов. Включает разбор архитектуры для статических сайтов и SPA (React/Vue/Next).

OPOpenDesign official Разработка ★ 99.8k

Что делает навык

Методология клонирования сайтов, превращающая процесс репликации интерфейсов и эффектов в повторяемый алгоритм. Skill обеспечивает извлечение исходного кода, анализ архитектуры (SPA/статика) и сборку проекта с верификацией через реальные данные.

Когда применять

  • Репликация сложных интерфейсов и верстка по образцу
  • Воссоздание WebGL/Canvas эффектов (например, искажений DOM через SVG feDisplacementMap)
  • Разбор архитектуры SPA (React/Vue/Next) для их локальной сборки
  • Аудит и восстановление функциональности существующих веб-страниц

Как работает

  1. Инициализация проекта: запуск node scripts/init-clone.mjs для создания структуры (NOTES.md, RECON/, CLONE_REPORT.md) в текущей директории
  2. Подготовка окружения: использование встроенного CDP-контроля для работы с системным Chrome/Edge/Chromium без установки Playwright или Chromium
  3. Разведка (Recon): поиск исходного кода в GitHub и извлечение данных через скрипты recon-site.mjs с сохранением артефактов в RECON/
  4. Анализ и верификация: использование концептуальных схем из AI-анализа, но строгая проверка каждого блока кода по реальному исходному коду (true source)
  5. Сборка: создание финального index.html и документации CLONE_AUDIT.md на основе подтвержденных данных

Примеры запросов агенту

Клонируй сайт example.com, сохранив все WebGL-эффекты и структуру React-приложения
Воспроизведи интерфейс лендинга с анимациями искажения DOM, используя реальные исходники
Проведи аудит и реплику сайта mysite.ru, собрав проект в текущей директории

Что понадобится

  • Системный браузер Chrome, Edge или Chromium (доступ через CDP)
  • Среда Node.js для запуска скриптов из .od-skills/
  • Доступ к интернету для поиска исходников в GitHub и загрузки ресурсов

Описание составлено по SKILL.md навыка, сверено 08.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «web-clone» из репозитория: # https://github.com/nexu-io/open-design
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r web-clone/ ~/.claude/skills/web-clone/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.