Шведский разработчик Дэвид Фант опубликовал метод извлечения React-компонентов с продакшен-сайтов. Техника использует внутреннюю структуру React Fiber для сбора данных о компонентах, а языковую модель — для реконструкции рабочего кода.
В основе метода лежит особенность архитектуры React: в браузере параллельно существуют два дерева. DOM — это "суп из дивов", который видит пользователь. Но рядом в памяти живет Fiber-дерево, которое хранит куда больше: какой компонент создал какой элемент, с какими пропсами, в каком состоянии. Структура доступна с React 16 через свойства DOM-элементов — именно ее использует React DevTools.
Пайплайн Фанта работает так: скрипт обходит Fiber-дерево и собирает примеры "пропсы → HTML" для каждого типа компонента. Затем LLM получает эти примеры вместе с минифицированным кодом и генерирует чистую реализацию. Результат проходит верификацию — сгенерированный компонент рендерится с теми же пропсами, и если HTML не совпадает с оригиналом, модель получает diff и дорабатывает код. Компоненты обрабатываются в порядке зависимостей: сначала листовые (Button, Input), потом родительские (LoginForm, Card).
Метод работает не всегда. JS-анимации ломают верификацию — снапшот DOM в середине анимации не соответствует итоговому состоянию. Внутреннее состояние компонентов (открытый дропдаун, активная вкладка) не выводится из пропсов. Для таких случаев Фант предлагает fallback: просто сохранить замороженный HTML.
Техника применима к статичным UI-компонентам — кнопкам, карточкам, формам — из которых состоит большинство интерфейсов. Правовой статус метода неоднозначен: технически это не взлом, данные уже отправлены в браузер и публично доступны. Однако пользовательские соглашения многих сайтов запрещают реверс-инжиниринг, а коммерческое использование полученного кода может нарушать авторские права.
P.S. Поддержать меня можно подпиской на канал "сбежавшая нейросеть", где я рассказываю про ИИ с творческой стороны.
