Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Руководство по связке опенсорсного инструмента REA (Reverse Engineer Anything) с AI-агентами (Claude Code, персональный ассистент Jarvis на базе Anthropic Opus). В видео разбирается метод автоматического аудита frontend-архитектуры сложных 3D-сайтов и нативных macOS-приложений через Chrome DevTools с последующей генерацией точной рабочей копии без галлюцинаций.
👤 Кому будет полезно: Вайбкодерам, AI-инженерам, fullstack-разработчикам и создателям пет-проектов, которые хотят быстро перенимать чужие архитектурные решения, анимации и интерфейсы для воссоздания собственных продуктов.
✨ Что получите: Готовый пайплайн реверс-инжиниринга: от запуска скрытого анализатора браузера до генерации пошагового блюпринта (архитектура, стек, зависимости) и автономной сборки рабочего клона приложения с помощью Claude Code.
1. Архитектура REA: как дать ИИ «рентгеновское зрение» через DevTools
Контекст: При создании клонов интерфейсов или сложных веб-эффектов разработчики часто просят LLM «написать код как у сайта X», из-за чего нейросеть галлюцинирует и придумывает несуществующие структуры. Репозиторий REA (Reverse Engineer Anything) решает эту проблему, выступая промежуточным звеном между ИИ-агентом и целевым приложением. REA подключается к Chrome Developer Tools, перехватывает все сетевые запросы, сканирует DOM, выгружает ассеты и анализирует бандлы в реальном времени. В результате агент получает не приблизительное описание, а исчерпывающий технический отчет со списком используемых библиотек, шейдеров и точных версий зависимостей.
Тайминг: , ,
Выгода: Устраняет до 90% итераций ручной подгонки кода; ИИ сразу строит правильную архитектуру на основе реального продакшн-стека.
Как применить:
Шаг 1: Подключение REA к агенту — GitHub / REA Repo] — Интегрируйте REA в среду выполнения вашего AI-агента (Claude Code, пользовательский скрипт ассистента или среда Cursor) в качестве исполняемого инструмента/функции.
Шаг 2: Настройка триггера инспекции — Anthropic API / Claude Code] — Сконфигурируйте системный промпт агента так, чтобы по команде «reverse engineer» запускался скрытый браузер через CDP (Chrome DevTools Protocol).
Шаг 3: Передача задачи на деконструкцию — Терминал / Чат агента] — Сформулируйте команду для запуска процесса:
Reverse engineer the following target URL or local application: [TARGET_URL/APP_PATH].Inspect DOM structure, network payload, loaded bundles, animation libraries, and asset pipelines.Generate a structured teardown report with exact tech stack and implementation blueprint.
Результат: Агент в фоновом режиме открывает чистую сессию браузера, скроллит страницу, собирает лог всех запросов и формирует структурированный технический отчет.
2. Экспресс-разбор WebGL/3D сайтов на примере igloo.inc за 40 секунд
Контекст: 3D-сайты с продвинутыми скролл-анимациями считаются одними из самых сложных для анализа вручную из-за минифицированного кода и WebGL-конвейеров. Автор демонстрирует разбор отмеченного наградами сайта igloo.inc с помощью REA всего за 30–40 секунд. REA перехватил 95 сетевых запросов и определил, что весь сайт — это легковесная оболочка на Svelte всего из 27 DOM-элементов, которая лениво подгружает тяжелый WebGL-бандл. Анализ моментально вскрыл использование Three.js (r165), GSAP ScrollTrigger, пост-процессинга PMNDRS (Bloom, Depth of Field) и специальной текстуры данных скролла.
Тайминг: , ,
Выгода: Мгновенное раскрытие точного стека интерактивной 3D-графики и алгоритмов анимации без ручного копания в минифицированных source maps.
Как применить:
Шаг 1: Запуск автоматического скроллинга и захвата — REA Agent] — Передайте целевой веб-сайт ассистенту. REA откроет страницу в чистом инстансе браузера и начнет эмуляцию пользовательского скролла для активации триггеров.
Шаг 2: Сбор сетевых метрик и текстур — Chrome DevTools Hook] — Дождитесь завершения сбора данных (время выполнения — до 1 минуты). Инструмент зафиксирует загрузку 3D-моделей, Draco/Basis транскодеров и Web Workers.
Шаг 3: Чтение отчета Teardown — AI Vault / Markdown] — Изучите сгенерированный файл отчета со следующей структурой:
# Teardown Report: igloo.inc- DOM Size: 27 elements, 1 screen long (no raw <img>, <svg>, <iframe>)- Core Framework: Svelte (shell for lazy-loading 3D bundle)- 3D Engine: Three.js (r165)- Animation Drivers: GSAP + ScrollTrigger- Shaders & Post-Processing: PMNDRS (Bloom, Depth of Field, FXAA)- Texture Pipeline: Draco & Basis universal transcoders in Web Workers- Scroll Logic: Dedicated scroll data texture mapping
Результат: Полный инженерный рецепт веб-приложения, готовый к переносу в ваш собственный проект на Three.js / React Three Fiber / Svelte.
3. Деконструкция нативных десктопных приложений (macOS Apple Notes)
Контекст: Возможности REA не ограничиваются веб-страницами: инструмент умеет анализировать локальные установленные приложения операционной системы. Автор направляет Jarvis на анализ системного приложения macOS Notes.app (/System/Applications/Notes.app). Инструмент делает снапшот приложения, считывает его структуру бандла и определяет, что Notes — это тонкая нативная оболочка AppKit с 5 системными расширениями (Siri, Widgets, QuickLook, Sharing, Spotlight). Основной движок синхронизации и хранения при этом вынесен в приватные системные фреймворки Apple.
Тайминг: , ,
Выгода: Понимание компонентной модели и архитектурных слоев нативных десктопных программ для проектирования их кроссплатформенных веб- или Electron/Tauri-аналогов.
Как применить:
Шаг 1: Указание пути к локальному приложению — macOS / Local File System] — Укажите агенту путь к приложению для анализа.
Jarvis, reverse engineer the Apple Notes app on my Mac located at /System/Applications/Notes.app. Save the teardown to my vault.
Шаг 2: Извлечение UI-снимков и метаданных бандла — REA Analyst] — REA открывает приложение, фиксирует UI-состояния, инспектирует Layouts (Interface Builder), скомпилированные каталоги ассетов и плагины.
Шаг 3: Сохранение архитектурного блюпринта — AI Long-Term Memory] — Отчет автоматически помещается в долговременную память (Vault/Context) агента для дальнейшей фазы сборки.
Результат: Детализированная спецификация приложения: структура окон, компоновка сайдбара, список расширений и схема взаимодействия с локальной БД/хранилищем.
4. Автономная сборка рабочего клона через Claude Code за 15 минут
Контекст: Имея на руках технический отчет (блюпринт), AI-агенту больше не нужно угадывать функции или структуру интерфейса. На этапе сборки автор использует Claude Code, передавая ему сохраненный отчет деконструкции Apple Notes. Процесс генерации полностью автономен: агент проходит фазы скаффолдинга (Scaffold), написания кода (Code), тестирования в скрытом браузере (Test) и финального запуска (Launch). За 15 минут создается полноценно работающее приложение для заметок с сайдбаром, папками, закрепленными заметками и форматированием текста (Bold, Italic).
Тайминг: , , ,
Выгода: Создание работающего MVP с первого промпта без необходимости вести 10+ итераций исправлений и правок UI.
Как применить:
Шаг 1: Запуск пайплайна генерации — Claude Code / Jarvis] — Отдайте агенту команду на сборку на основе ранее сохраненного блюпринта:
Build a modern web-based notes app inspired by the Apple Notes teardown report from our vault.Requirements:1. Multi-column layout: Folders sidebar, Notes list with pinned section, rich text editor.2. Full CRUD for folders and individual notes.3. Rich text formatting toolbar (Bold, Italic, lists, headings).4. Run internal test suite and validate UI rendering in a headless browser before final output.
Шаг 2: Автономное тестирование и валидация — Headless Browser Engine] — Агент компилирует проект, запускает dev-сервер, открывает скрытый браузер, проверяет рендеринг кнопок и отсутствие ошибок в консоли.
Шаг 3: Приемка и запуск интерфейса — Web Browser] — Откройте готовое приложение и протестируйте создание заметок, вложенные папки и стили оформления текста.
Результат: Полностью рабочий клон Apple Notes в веб-интерфейсе с идентичной компоновкой, локальным сохранением данных и поддержкой rich-text форматирования.
FAQ
В: Что такое REA (Reverse Engineer Anything) простыми словами? О: Это инструмент автоматизированного реверс-инжиниринга, который подключается к Developer Tools (включая Chrome DevTools) и выступает «глазами» для AI-агента. Он анализирует исходный код, стили, бандлы, сетевые запросы и фреймворки веб-сайтов и приложений, формируя исчерпывающий технический отчет.
В: На какой модели работает ассистент автора (Jarvis)? О: Автор использует Anthropic Claude (в видео упоминается переключение на актуальные флагманские модели семейств Opus / Claude 3.5), работающий через API с интеграцией долговременной памяти (Vault) и набором внешних инструментов (DevTools, отправка SMS, запуск браузера).
В: Нарушает ли использование REA авторские права или правила безопасности? О: Нет. REA не взламывает закрытые серверы, а лишь агрегирует и структурирует публично доступную клиентскую информацию, которую любой разработчик может увидеть через вкладку Inspect / DevTools в браузере.
В: Почему нельзя просто скормить скриншот сайта в Claude Code или Cursor? О: Скриншот дает представление только о визуальном слое (цвета, отступы). REA извлекает внутренности: стек библиотек (Three.js, GSAP), алгоритмы работы шейдеров, структуру DOM, конфигурацию воркеров и логику обработки данных, что гарантирует точную функциональную копию, а не плоскую статичную верстку.
В: Сколько времени занимает процесс от деконструкции до готового клона? О: Анализ веб-сайта занимает от 30 до 60 секунд. Анализ нативного десктопного приложения — 2–3 минуты. Полная автономная сборка и тестирование рабочего веб-приложения через Claude Code занимает около 15 минут.
В: Можно ли использовать REA в Windows или Linux? О: Да, анализ веб-сайтов через Chrome DevTools работает кроссплатформенно. Для нативных приложений функционал зависит от платформы (для macOS анализируются .app бандлы и AppKit/SwiftUI слои, для веб-сервисов — универсальный браузерный стек).
Ресурсы и ссылки
Reverse Engineer Anything (REA) — популярный open-source репозиторий на GitHub для глубокого анализа архитектуры сайтов и приложений — упомянут в видео.
Claude Code — агентный инструмент командной строки от Anthropic для автономного написания, тестирования и рефакторинга кода — упомянут в видео.
Three.js & GSAP ScrollTrigger — ключевой стек веб-графики и скролл-анимаций, обнаруженный при анализе сайта igloo.inc — упомянут в видео.
AI Workshop Lite — бесплатное сообщество автора с промпт-паками для создания собственного ассистента Jarvis с поддержкой REA — ссылка в описании к видео.
Конспект создан на основе видео «Jarvis, reverse engineer this website» канала AI / Tech Creator. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=84CkBM_jF4g
