Рецепты для вайбкодера: глючит UI, агент не понимает что не так? Чиним

Надавно писал, как удобно в кодексе в режиме рецензирования собирать сайты чисто по макетам в Figma (раз, два про SSR). В общем я довел сайт до продакшена, но столкнулся с одним глюком.

🤷‍♂️ Постоянно моргали карточки форм ламелей при переключении. Записал видео, чтобы проиллюстрировать. Косяк вроде мелкий, но неприятный. Я пытался обращать внимание кодекса по всякому (в душе понимал, что нужно фиксировать высоту блока и всё), но Codex не хотел исправлять. Окно так и дрыгалось.

Рассказываю как решать.

🚀 Решение или Спасибо Тимуру Хахалеву за курс

Решение пришло во время просмотра одного из уроков курса от @the_ai_architect.

Я 20 лет работаю в диджитал (причем в что ни на сеть браузерном стеке — я начинал SEO-специалистом в 2006), а о том, как сгрузить отладочную информацию из браузера не знал.

Нажимаем F12 или cmd+options+i — откроется консоль браузера. Там переключаемся во вкладку Perfomance, нажимаем кнопку записи, воспроизводим глюк, сохраняем запись (проставив все галки). Получите архив с логами, его отдаете агенту и описываете проблему.
В случае с описанным глюком решилось через ваншот.

😀 Когда у меня получилось, я пошел к Тимуру сыпать благодарностями и спрашивать разрешения поделиться фишкой из курса и рассказать о программе. Оказалось, что сейчас я могу поделиться только лайфхаком, продажи курса сейчас не идут. Но летом Тимур обещал их открыть и поделиться со мной промокодом для подписчиков. А я поделюсь с вами.

🔭 Где исхать лайфхаки

В который раз поражаюсь, что проходя различные обучения и обмен опытом можно круто подсматривать хаки, которые сильно упрощают работу. Так например, когда-то когда я проходил iOS разработку на Яндекс.Практикуме, то подсмотрел утилиту Charles, и очень активно использую ее для разработки скиллов агентам.

Когда учился на Middle Python, проникся описанием компонентов и приложения через PlantUML и активно использовал эту механику для передачи данных об архитектуре для ИИ-кодинг агентов.

Теперь вот кейс с курсом Тимура — и почему я этого не знал.

Если у вас есть какие-то прикольные хаки при работе с ИИ и передаче агентам обратной связи — делитесь в комментариях.

🔗 Ссылка на курс Тимура «AI Coding для разрабочиков» — https://courses.khakhalev.com

UPD: В комментариях пара ссылок, которые лучше демонстрируют консоль браузера и профайлинг: https://t.me/c/2097983096/8534 + https://t.me/c/2097983096/8553

----

Поляков считает — AI, код и кейсы