Шаг 1. Находим нужный эффект
Открываем сайт-референс, включаем инспектор браузера: F12 → вкладки Elements и Sources. Смотрим, какие библиотеки подгружаются (three.js, GSAP, WebGL-шейдеры) — это уже сузит задачу для нейронки.
Шаг 2. Вгружаем эффект в нейронку
Если нашли код фрагмента — копируем его как есть. Если нет — описываем эффект своими словами: что именно происходит, при каких условиях, как выглядит переход.
Промпт: «Вот код эффекта с сайта [ссылка]: [вставить фрагмент]. Мне нужно перенести именно этот эффект в свой проект — не переписывать всё с нуля».
Или без доступа к коду:
Промпт: «Я пытаюсь повторить эффект с сайта [ссылка]: [описание — что происходит, как выглядит, что меняется]. Похоже, что это делается через шейдер / WebGL — предложи, как это реализовать».
Шаг 3. Погружаем нейронку в контекст своего проекта
Прикладываем файлы, в идеале — указываем стек. Так нейронка адаптирует эффект под вашу структуру и не сломает остальное.
Промпт: «Вот мой текущий код тулзы: [вставить]. Адаптируй эффект выше под эту структуру, сохранив логику: [вставить эффект/описание]».
Шаг 4. Просим нейронку объяснить, что изменилось
Что именно она поменяла и почему — это и страховка от нерабочего кода, и способ самому лучше разобраться в теме.
Промпт: «Объясни своими словами, что ты изменила и почему — хочу понимать логику, а не просто скопировать код».
Шаг 5. Финалим результат через скриншоты, а не текстом
Если результат не совпадает с референсом — не пытаемся описать разницу словами, просто присылаем скриншот и указываем, что не так.
Промпт: «Вот скриншот моего результата и скриншот референса. Разница в [цвете / скорости / плавности] — поправь под референс».
Ну, а можно просто поросить Claude самому написать для себя промпт, как у меня на скрине, — и тоже получить адекватный результат.
10 реакций — и Анита покажет эффект-референс и результат, когда вернётся из дэй-оффа.