Несмотря на обилие моделей (а я время от времени использую четыре топовые), всё-таки на стыке моих технологий GPT-4.1 даёт лучший результат по сравнению с другими.

Всё равно главным секретом остаётся следующее:

Когда я добавляю в своё приложение какую-то отдельную задачу, которая в теории будет состоять из нескольких компонентов, я каждый раз сохраняю эти компоненты в файл Google Документы. И каждый раз при генерации новой функции или целого компонента я "вскармливаю" текст из этого документа именно в формате текста. В общем, эта штука работает хорошо.

Но сегодня я смог этот уже довольно-таки мощный инструмент существенно улучшить. По моим внутренним ощущениям — наверное, на 50%.

Вот что я сделал

Теперь, когда я пишу запрос, в конце всегда добавляю это:

«Пожалуйста, объясни как ты понял мою проблему, почему я считаю что это важно, как ты собираешься это решать и что будет правильным решением.»

Если задачи не слишком сложные, то я её сразу же дополняю: «Не дожидаясь следующего запроса, сразу после описания предоставь мне полное готовое решение, которое будет включать в себя весь код компонента без сокращений.»

Но в некоторых случаях, если задачи сложные, бывает очень важно понять, что способ решения, который хочет предложить модель искусственного интеллекта, полностью соответствует твоему вектору мысли. И тогда имеет смысл дождаться ответа, может быть немножко подискутировать или может быть в корне изменить решение. И только потом запрашивать весь код компонента.

Конкретный пример

Давайте расскажу на конкретном примере, чтобы вы посмотрели, как отвечает модель.

И так, у меня была проблема, связанная с анимацией badge в React-компоненте меню. При наведении badge исчезал, но текст ссылки оставался обрезанным, не занимая освободившееся место. Вот так я написал задачу:

«Исследуй проблему с неправильной анимацией ссылок, которые содержат badge. При наведении на такую ссылку badge исчезает и появляется стрелка — это правильное поведение, но текст ссылки остается укороченным, и мы не можем прочитать полное содержимое. Правильное поведение должно заключаться в том, чтобы после наведения исчезал badge, появлялась стрелка, и при этом исходный текст ссылки должен восстанавливаться до такого состояния, как будто badge в ссылке не существовал. Пожалуйста, объясни как ты понял мою проблему, почему я считаю что это важно, как ты собираешься это решать и что будет правильным решением, а потом предоставь готовое решение.»

А теперь давайте посмотрим, как мне ответила модель:

1. Как я понял твою проблему

   Если у ссылки есть badge и длинный текст, визуально ссылка выглядит как:
   [ТЕКСТ ...] [BADGE]

   При наведении badge исчезает, появляется стрелочка (ArrowRight). Однако область текста не расширяется, она по-прежнему занимает меньше ширины, из-за чего длинный текст остаётся урезанным и не становится полностью видимым.

2. Почему это важно для UX: пользователь получает максимум информации при наведении, похожее поведение часто реализовано в рациональных интерфейсах (боковые меню, дропдауны — см. Figma, Notion и т.д.) — бейдж не мешает чтению подробной информации.

3. Как это буду решать

   Использовать условный рендер вместо opacity: при наведении показывать только стрелку и текст, без badge вообще (badge удаляется из DOM или заменяется на стрелку). У <span>, содержащего текст, не должно быть фиксированной ширины – оно должно автоматически занимать освободившееся место.

4. Подходящее решение:

• При обычном состоянии: [ТЕКСТ (укорочен)] [badge]

• При наведении: [ТЕКСТ (полный)] [ArrowRight]

Ниже модель предоставила полностью работоспособное решение с правильным условным рендером и динамическим управлением шириной.

Делайте выводы

Лично я для себя уже сделал — буду использовать этот подход постоянно. Модель теперь не просто генерирует код, а думает над задачей структурированно, что кардинально улучшает результат.

Кстати говоря, кто за мной следит — это связано с разработкой интерфейса меню для моего open source стартера Next.js для приложений с искусственным интеллектом AIFA. Прямо сейчас я работаю над созданием второй части из четырёх для генерации красивых страниц при помощи команд — это будет одна из функций, которая будет представлять собой аналог v0 или Lovable.

P.S. Если тебе интересна тема разработки с AI и open source решения, буду рад, если подпишешься — уже сегодня покажу открытый исходный код очень интересного варианта для верхнего меню сайта и мобильной версии, которая может масштабироваться до бесконечного количества категорий и ссылок, при этом оставаясь элегантной.

? Ссылки:

• Проект: https://aifa.dev

• Открытый исходный код: https://github.com/aifa-agi/aifa