В цій статті:
• Що таке скіли в Claude Code і навіщо вони потрібні
• Що потрібно для запуску
• Покроковий гайд: клонуємо incrypted.com
• Коли це корисно
Наприкінці березня 2026 року розробник під ніком JCodesMore опублікував на GitHub шаблон, який перетворює Claude Code на інструмент для зворотного проєктування сайтів. За три дні репозиторій набрав понад 6000 зірок.
AI Website Cloner — це скіл (навичка) для Claude Code, який однією командою запускає повноцінний конвеєр: робить скриншоти через браузерне розширення, витягує кольори та компоненти, а потім запускає паралельних агентів, кожен із яких збирає свою частину сайту в окремій гілці. У фіналі система порівнює результат з оригіналом і виправляє розбіжності.
Редакція Incrypted розібралася, як працює цей скіл, і протестувала його на власному сайті — incrypted.com.
- AI Website Cloner — скіл для Claude Code (також працює з Cursor, Codex CLI, Gemini CLI та ще 10 ШІ-агентами), який клонує вебсайти однією командою.
- Для кожного компонента сторінки створюється файл-специфікація з точними значеннями відступів, кольорів, шрифтів, анімацій і станів.
- Claude Code запускає паралельних агентів — кожен збирає свою секцію.
Що таке скіли в Claude Code і навіщо вони потрібні
Перш ніж тестувати клонер, варто зрозуміти, що таке скіли в екосистемі Claude Code.
Скіл ― це набір інструкцій у форматі Markdown, який лежить у папці .claude/skills/ проєкту. Коли користувач вводить команду (наприклад, /clone-website), Claude Code завантажує відповідний файл SKILL.md і дотримується описаного в ньому алгоритму. По суті, навичка ― це детальний промпт, який перетворює загальну мовну модель на спеціалізованого агента для конкретного завдання.
Скіли можна писати самостійно або використовувати готові. Детальніше про систему скілів і команди Claude Code можна прочитати в нашому докладному гайді по Claude.
Гайд по Claude: як нейромережа Anthropic працює з кодом і текстом 11.03.2026 Читати
Що потрібно для запуску
Скіл працює поверх Claude Code ― інструмента Anthropic для агентного програмування. Для запуску знадобиться:
- Claude Code;
- скіл рекомендований для роботи з моделлю Opus 4.6;
- Chrome MCP ― браузерне розширення, яке Claude Code використовує для автоматизації браузера (встановлюється з Chrome Web Store).
Покроковий гайд: клонуємо incrypted.com
Крок 1. Клонуємо шаблон
Відкриваємо термінал і виконуємо:
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
Замість my-clone можна використати будь-яке ім’я. У нашому випадку — incrypted-clone.
Крок 2. Запускаємо Claude Code з Chrome MCP
claude –chrome
У меню, що з’явилося, підтверджуємо, що довіряємо Claude Code читати, редагувати й виконувати файли у вибраній папці.
На запит підтвердження встановлення розширення Claude у Chrome натискаємо Enter.
Крок 3. Запускаємо клонування
В інтерфейсі Claude Code вводимо:
/clone-website <адреса сайту для клонування>
У нашому випадку:
/clone-website https://incrypted.com/en/
Після цього відкриється окреме вікно Chrome, яким може користуватися Claude.
Якщо в терміналі виникла помилка доступу, виберіть будь-який із запропонованих варіантів меню на ваш розсуд.
У разі вибору другого варіанта з’явиться таке меню.
Якщо обрано перший варіант, далі потрібно підтвердити внесення перелічених змін у файл settings.json.
Після підтвердження потрібно знову запустити команду клонування:
/clone-website <адреса сайту для клонування>
(/clone-website https://incrypted.com/en/)
Якщо після цього з’явився рядок з інформацією про те, що розширення для Chrome не підключено, у новому меню виберіть перший варіант.
У разі, якщо після цього з’явиться список необхідних дій (зображення нижче), усі з яких уже виконані, просто введіть слово ready і натисніть Enter.
Далі з’явиться вікно надання дозволу Claude на навігацію в браузері. Обираємо варіант «Allow this action».
Можливо, Claude не зможе робити скриншоти відкритого сайту. У такому разі ШІ надасть інформацію про це.
Сесію доведеться перезапустити, або потрібно буде підтверджувати дії агента на кожному наступному етапі.
На запит Claude щодо вилучення контенту з клонованого сайту виберіть перший або другий варіант.
Далі в терміналі з’явиться запит на завантаження компонентів із копійованого сайту. У нашому прикладі ми обираємо другий варіант.
Коли розробку сайту-клона буде завершено, Claude повідомить про це в терміналі.
Таким чином, під час виконання команди клонування сайту Claude Code виконує такі дії:
- переходить на цільовий сайт у браузері;
- робить повносторінкові скриншоти;
- витягує шрифти, колірну палітру, глобальні стилі;
- прокручує сторінку, клікає по елементах, наводить курсор;
- складає мапу секцій: хедер із навігацією, основний блок, сайдбар, футер тощо;
- завантажує всі зображення та іконки;
- для кожної секції пише специфікацію та запускає білдер;
- об’єднує результати;
- порівнює клон з оригіналом.
Процес створення клона сторінки може тривати від 15 хвилин до години (як у випадку з головною сторінкою сайту incrypted.com) залежно від складності сторінки.
Крок 4. Перевіряємо результат
Після завершення роботи клонера запускаємо сервер:
npm run dev
Відкриваємо localhost:3000 у браузері та порівнюємо з оригіналом.
Коли це корисно
AI Website Cloner призначений для трьох сценаріїв:
- Міграція платформи. Сайт працює на WordPress, Webflow або Squarespace ― потрібно перенести його на сучасний стек.
- Втрачений вихідний код. Репозиторій сайту втрачено, розробник пішов, стек застарів. Клонер створює відправну точку з готовою візуальною структурою.
- Навчання. Розбір того, як влаштовані сайти ― які значення використовуються, як побудована компонентна структура, які патерни анімацій застосовуються.
Автор проєкту JCodesMore окремо підкреслює: скіл не призначений для фішингу, крадіжки чужого дизайну або порушення умов використання сайтів. Логотипи, бренд-компоненти та авторський контент належать їхнім власникам.
Сообщение Розробка з ШІ: як клонувати будь-який сайт однією командою появились сначала на INCRYPTED.
