Несмотря на обилие моделей (а я время от времени использую четыре топовые), всё-таки на стыке моих технологий GPT-4.1 даёт лучший результат по сравнению с другими.
Всё равно главным секретом остаётся следующее:
Когда я добавляю в своё приложение какую-то отдельную задачу, которая в теории будет состоять из нескольких компонентов, я каждый раз сохраняю эти компоненты в файл Google Документы. И каждый раз при генерации новой функции или целого компонента я “вскармливаю” текст из этого документа именно в формате текста. В общем, эта штука работает хорошо.
Но сегодня я смог этот уже довольно-таки мощный инструмент существенно улучшить. По моим внутренним ощущениям — наверное, на 50%.
Вот что я сделал
Теперь, когда я пишу запрос, в конце всегда добавляю это:
“Пожалуйста, объясни как ты понял мою проблему, почему я считаю что это важно, как ты собираешься это решать и что будет правильным решением.”
Если задачи не слишком сложные, то я её сразу же дополняю: “Не дожидаясь следующего запроса, сразу после описания предоставь мне полное готовое решение, которое будет включать в себя весь код компонента без сокращений.”
Но в некоторых случаях, если задачи сложные, бывает очень важно понять, что способ решения, который хочет предложить модель искусственного интеллекта, полностью соответствует твоему вектору мысли. И тогда имеет смысл дождаться ответа, может быть немножко подискутировать или может быть в корне изменить решение. И только потом запрашивать весь код компонента.
Конкретный пример
Давайте расскажу на конкретном примере, чтобы вы посмотрели, как отвечает модель.
И так, у меня была проблема, связанная с анимацией badge в React-компоненте меню. При наведении badge исчезал, но текст ссылки оставался обрезанным, не занимая освободившееся место. Вот так я написал задачу:
“Исследуй проблему с неправильной анимацией ссылок, которые содержат badge. При наведении на такую ссылку badge исчезает и появляется стрелка — это правильное поведение, но текст ссылки остается укороченным, и мы не можем прочитать полное содержимое. Правильное поведение должно заключаться в том, чтобы после наведения исчезал badge, появлялась стрелка, и при этом исходный текст ссылки должен восстанавливаться до такого состояния, как будто badge в ссылке не существовал. Пожалуйста, объясни как ты понял мою проблему, почему я считаю что это важно, как ты собираешься это решать и что будет правильным решением, а потом предоставь готовое решение.“
А теперь давайте посмотрим, как мне ответила модель:
-
Как я понял твою проблему
Если у ссылки есть badge и длинный текст, визуально ссылка выглядит как:
[ТЕКСТ ...] [BADGE]При наведении badge исчезает, появляется стрелочка (ArrowRight). Однако область текста не расширяется, она по-прежнему занимает меньше ширины, из-за чего длинный текст остаётся урезанным и не становится полностью видимым.
-
Почему это важно для UX: пользователь получает максимум информации при наведении, похожее поведение часто реализовано в рациональных интерфейсах (боковые меню, дропдауны — см. Figma, Notion и т.д.) — бейдж не мешает чтению подробной информации.
-
Как это буду решать
Использовать условный рендер вместо opacity: при наведении показывать только стрелку и текст, без badge вообще (badge удаляется из DOM или заменяется на стрелку). У
<span>, содержащего текст, не должно быть фиксированной ширины – оно должно автоматически занимать освободившееся место. -
Подходящее решение:
-
При обычном состоянии:
[ТЕКСТ (укорочен)] [badge] -
При наведении:
[ТЕКСТ (полный)] [ArrowRight]
Ниже модель предоставила полностью работоспособное решение с правильным условным рендером и динамическим управлением шириной.
Делайте выводы
Лично я для себя уже сделал — буду использовать этот подход постоянно. Модель теперь не просто генерирует код, а думает над задачей структурированно, что кардинально улучшает результат.
Кстати говоря, кто за мной следит — это связано с разработкой интерфейса меню для моего open source стартера Next.js для приложений с искусственным интеллектом AIFA. Прямо сейчас я работаю над созданием второй части из четырёх для генерации красивых страниц при помощи команд — это будет одна из функций, которая будет представлять собой аналог v0 или Lovable.
P.S. Если тебе интересна тема разработки с AI и open source решения, буду рад, если подпишешься — уже сегодня покажу открытый исходный код очень интересного варианта для верхнего меню сайта и мобильной версии, которая может масштабироваться до бесконечного количества категорий и ссылок, при этом оставаясь элегантной.
🔗 Ссылки:
-
Проект: https://aifa.dev
-
Открытый исходный код: https://github.com/aifa-agi/aifa
Автор: bolshiyanov
