Глава 04

Пройди свою штуку в голове

Пока без кода: что видно, что ты делаешь и что меняется на экране.

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


Лирическое отступление про вредного джинна

Это мой любимый мем про работу менеджера. Кажется, он замечательно переносится на нашу работу с ИИ-агентами.

Мем: менеджер обещает помочь с проблемами. Работник рассказывает о плохих поставках. Менеджер предлагает ему самому написать план решения, согласовать его и выполнить. Работник молча смотрит в ответ.
«Я здесь, чтобы помочь» — а дальше ещё нужно договориться, кто что делает. Нажми на мем, чтобы рассмотреть крупнее. На изображении указан источник: vk.com/inefficient.

Здесь легко узнать себя: хочется сказать «сделай мне хорошо», согласовать результат и пойти пить чай. Но агент не видел картинку у тебя в голове. ИИ-агент — это помощник, который не только отвечает в чате, но и может выполнять действия: например, создавать файлы и менять сайт.

Мне нравится думать о нём как о вредном джинне. Загадываешь желание — он пытается его исполнить. Если желание расплывчатое, результат может оказаться совсем не тем, что ты представлял. А там, где ты ничего не уточнил, он может сам выбрать контекст, внешний вид и поведение. И тебе эти решения, возможно, не понравятся.

Например: «Выбери занятие и дай мне пятнадцать минут». Должен ли таймер включиться сразу? Или сначала хочется прочитать занятие и только потом нажать «Начать»? Для тебя ответ очевиден. Для агента — пока нет.

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

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

А сейчас дадим джинну чуть меньше поводов гадать.

У твоего проекта уже есть задача. Теперь превратим её в маленький сценарий. AI не знает, что ты представляешь: если не объяснить важную деталь, он выберет её сам.

От открытия до ответа

Вот сценарий калькулятора из прошлой главы. Сначала видны два пустых поля: «Цена покупки, €» и «Твой доход за час, €». Вводишь 1 000 и 20, нажимаешь «Посчитать». Под кнопкой появляется «50 часов работы». Меняешь число и можешь посчитать ещё раз.

Ввод

Два числа

1 000 € · 20 €/час

Цена покупки и стоимость часа.

Действие

Посчитать

1 000 ÷ 20

Нажатие запускает расчёт.

Результат

Прочитать ответ

50 часов

Числа можно поменять и посчитать снова.

Эскиз поведения: из этих трёх шагов уже понятно, что нужно сделать.

Опиши свою страницу так же — короткими ответами на пять вопросов:

  1. Что видно сразу после открытия?
  2. Что я ввожу или выбираю?
  3. Какое главное действие совершаю?
  4. Что появляется или меняется в результате?
  5. Что могу сделать после этого?

У сайта про рилсы после выбора появляется занятие, но отсчёт ещё не идёт. Для запуска нужна отдельная кнопка. Такую деталь стоит назвать прямо: от неё зависит поведение приложения.

Запиши ответ, который заранее знаешь

Для нашего условного расчёта: 1 000 € ÷ 20 €/час = 50 часов. Это пригодится, когда откроешь первую версию и захочешь понять, правильно ли она считает.

У случайного выбора точный ответ обычно неизвестен. Но если оставить в списке только «Полить цветок», другого результата быть не должно. А генератор рисунков должен выдавать по одному слову из каждого заданного списка.

Выбери проверку для своей идеи и запиши, что должно получиться. Саму проверку проведём, когда появится страница.

А после обновления страницы?

Если ты набрал пятнадцать занятий, хочется увидеть их и завтра. Это отдельное требование: «Сохраняй список после обновления страницы в этом браузере».

У калькулятора можно каждый раз вводить числа заново. Если твоей штуке нечего запоминать, так и запиши. Сохранение на компьютере не означает, что данные появятся на телефоне: для этого нужна дополнительная возможность.

Теперь ты

Дополни заметку пятью ответами о работе страницы, одним проверочным примером и решением о сохранении данных.

Готово, когда В заметке есть путь «ввожу → нажимаю → получаю» и способ проверить результат. Эти же слова войдут в первый запрос.

Описание готово. Теперь откроем место, где AI превратит его в работающую страницу.