Чему вы научитесь
После занятия вы сможете объяснить, что именно делает человек при работе с нейросетью, а что можно поручить помощнику. Вы выберете небольшой проект, опишете его пользователя и сформулируете одно главное действие. Затем составите список наблюдаемых признаков готовности и проверите предложенное ИИ решение без необходимости понимать каждую строку программы.
Наш сквозной пример — сайт небольшой мастерской, которая ремонтирует велосипеды. Это учебный проект: реальные адреса, цены, фотографии клиентов и сведения о заказах здесь не используются. Сначала посетитель сможет узнать перечень услуг и способ связи. В следующих занятиях мы постепенно добавим данные, запись и интерфейс для владельца. Такое развитие позволяет видеть, зачем появляется каждая новая техническая часть.
Что нужно знать заранее
Ничего. Достаточно уметь открывать страницы в браузере и сохранять файлы. Браузер — программа для просмотра сайтов: например, Firefox, Chrome или Safari. Если вы пока работаете только с телефона, изучить материал можно и на нём. Для дальнейшей практики удобнее компьютер: на большом экране легче сравнивать страницу, запрос к помощнику и файлы проекта.
Не нужно заранее покупать платный инструмент. В первом занятии основная работа происходит с текстом: мы учимся ставить задачу. Позже вы выберете доступный вам сервис по его возможностям, ограничениям и условиям использования.
Ключевые термины
Вайбкодинг — разговорное название способа создавать программы через объяснение задачи ИИ и последовательное уточнение результата. Единого обязательного стандарта у этого слова нет. В нашем курсе оно означает управляемый процесс: человек задаёт цель, помощник предлагает изменения, человек проверяет результат и решает, что делать дальше.
Код — текст инструкций, которые выполняет компьютер. Его можно сравнить с рецептом: в рецепте перечислены продукты и действия, в программе — данные и правила их обработки. Красивое описание рецепта ещё не гарантирует вкусный обед; уверенное объяснение программы ещё не гарантирует правильную работу.
Промпт — сообщение с задачей для ИИ. Оно может содержать цель, исходные сведения, ограничения, примеры и требования к ответу. Хороший промпт уменьшает количество догадок, но не заменяет проверку.
Прототип — предварительная версия, созданная для проверки идеи или отдельных решений. Продукт — решение, которым человек может воспользоваться для своей задачи в реальных условиях. Между ними находятся проверки, исправления, работа с данными, поддержка и ясные границы ответственности.
Критерий готовности — наблюдаемое условие, по которому можно решить, выполнена ли задача. «Выглядит современно» трудно проверить одинаково двум людям. «На экране телефона текст читается без горизонтальной прокрутки» проверяется гораздо точнее.
1. Что меняется, когда рядом появляется ИИ
Представьте, что вы объясняете мастеру, какую полку хотите получить. Можно сказать: «Сделайте хорошую полку». Мастер будет вынужден самостоятельно выбрать размер, материал, крепление и нагрузку. Если вы уточните ширину стены, назначение полки и допустимый бюджет, вероятность подходящего результата вырастет. Однако после изготовления всё равно нужно убедиться, что полка держится и подходит по размеру.
Работа с программным помощником устроена похоже. Вы можете описывать результат обычными словами, не набирая все инструкции вручную. Помощник способен предложить структуру страницы, написать код, объяснить ошибку и перечислить варианты решения. Это сокращает часть механической работы, но не передаёт ему знание ваших реальных обстоятельств.
ИИ не присутствует в мастерской, не разговаривает с её владельцем и не знает, какая услуга сейчас недоступна. Если эти сведения не переданы, он может заполнить пробел правдоподобным предположением. Поэтому ответственность за факты остаётся у человека. В учебном проекте неподтверждённую цену следует убрать, а не заменять выдуманным числом ради законченного вида.
Начинайте с разделения ролей. Ваша роль — понять задачу, выбрать ограничения и оценить результат. Роль помощника — предложить реализацию и объяснить решения. Если вы поручаете ему проверку, попросите назвать конкретные выполненные действия: какие страницы открыты, какие значения введены, какие случаи испытаны. Фраза «всё работает» без описания проверки не является доказательством.
Полезная привычка — сохранять рядом с проектом короткую запись решений. Например: «На первой версии нет формы записи; вместо неё показан способ связи». Через несколько дней эта заметка напомнит, что отсутствие формы было осознанным ограничением, а не забытым пунктом.
2. Начинайте с человека, а не со списка функций
Функция — отдельная возможность программы: показать услуги, отправить сообщение, сохранить запись. Новичок часто начинает со списка функций, потому что его легко расширять. Можно придумать личный кабинет, бонусные баллы, карту, чат и календарь. Но большое количество возможностей не объясняет, какую проблему решает сайт.
Для мастерской полезнее начать с конкретной ситуации: у посетителя плохо переключаются передачи, он хочет понять, берутся ли здесь за такую работу и как связаться с мастером. Чтобы помочь ему, первая версия должна показать услуги, понятное описание обращения и согласованные контактные сведения. Система баллов в этой ситуации ничего не меняет.
Запишите три предложения. Первое: «Этот сайт нужен человеку, который…». Второе: «Сейчас ему мешает…». Третье: «После посещения страницы он сможет…». Если последнее предложение содержит несколько независимых действий, выберите главное. Остальные можно добавить позже, когда проверите основное предположение.
Затем проверьте, действительно ли для задачи нужен сайт. Иногда достаточно исправить описание компании в каталоге или подготовить понятную карточку услуг. Умение отказаться от лишней разработки тоже относится к профессиональной работе. Инструмент выбирают под проблему, а не проблему под понравившийся инструмент.
В учебном проекте мы всё же делаем сайт, потому что он позволяет последовательно изучить устройство интернет-продукта. Но даже здесь полезно сформулировать альтернативу: какие сведения человек мог бы получить без сайта и что наша страница делает удобнее. Это защищает от создания сложного интерфейса без понятной пользы.
3. Рабочий цикл: задача, изменение, проверка
Самый устойчивый цикл состоит из небольших шагов. Сначала вы описываете одно изменение. Затем помощник предлагает или выполняет его. После этого вы проверяете результат по заранее выбранным условиям. И только затем переходите к следующему изменению. Такой подход напоминает сборку мебели: разумнее убедиться, что основание стоит ровно, прежде чем крепить верхние секции.
Первый запрос для мастерской может касаться только структуры страницы. Попросите перечислить блоки и объяснить назначение каждого. На этом этапе не нужны цвета, анимации и программа записи. Проверьте, отвечает ли структура на вопросы посетителя. Если блок «Наши достижения» не содержит подтверждённых сведений, его можно исключить.
Следующий запрос касается текста одного блока. Например, нужно объяснить порядок обращения: описать неисправность, согласовать время, привезти велосипед после подтверждения. Проверьте текст с точки зрения реального процесса. Если мастерская не гарантирует ответ в определённый срок, не разрешайте помощнику обещать мгновенную связь.
Только после этого переходите к реализации. Попросите собрать страницу с согласованным текстом и одной кнопкой связи. Когда результат появится, нажмите кнопку, измените ширину окна, пройдите по элементам клавишей Tab и увеличьте масштаб браузера. Проверка должна соответствовать изменению, а не превращаться в бесконечный просмотр всего проекта.
Если обнаружена ошибка, опишите разницу между ожидаемым и фактическим поведением. «Кнопка сломалась» не даёт достаточно информации. «На странице услуг при нажатии кнопки открывается пустая вкладка; ожидалось открытие согласованного контакта» уже помогает искать причину. Добавляйте последовательность действий и текст сообщения об ошибке, если оно появилось.
После удачного изменения сохраните рабочее состояние. Пока достаточно отдельной копии папки с понятным названием. Позже мы изучим Git — систему, которая хранит историю изменений и помогает возвращаться к прежним версиям без множества копий.
4. Почему красивый экран ещё не готовый продукт
Скриншот показывает внешний вид в один момент, но не доказывает правильность поведения. Представьте витрину мастерской с аккуратно оформленным расписанием. Если дверь закрыта в указанное рабочее время, витрина не решает задачу посетителя. Так же и сайт может выглядеть убедительно, но вести на неверный контакт или терять введённые данные.
Проверяйте три стороны результата: содержание, поведение и устойчивость. Содержание отвечает на вопрос «правдивы ли сведения». Поведение — «может ли человек выполнить нужное действие». Устойчивость — «что произойдёт при неидеальных условиях». Для первой страницы это может быть медленная связь, маленький экран или отсутствие приложения, которое должно открыться по ссылке.
Не все проверки требуют специального инструмента. Тексты можно прочитать вслух и попросить другого человека пересказать смысл. Ссылки можно открыть вручную. Страницу можно посмотреть при увеличении масштаба. Форму, когда она появится, нужно испытать с пустыми и неправильными значениями, а не только с одним аккуратно заполненным примером.
Заранее обозначайте границы версии. «На этой странице можно посмотреть услуги и начать разговор; подтверждённой записи через сайт пока нет» — ясная граница. Если интерфейс показывает сообщение «Вы записаны», хотя никто не проверяет расписание, он создаёт ложное ожидание. Ошибка здесь заключается в обещании, даже если технически кнопка реагирует правильно.
Особенно осторожно относитесь к действиям с деньгами, персональными данными и доступом пользователей. Их нельзя оценивать только по внешнему виду. В таких задачах понадобятся серверные проверки, правовые основания и отдельные испытания. Мы будем вводить эти понятия постепенно, а не добавлять их к первому проекту ради впечатления сложности.
5. Как учиться, не превращаясь в пересыльщика ошибок
Можно построить работу так, что человек только копирует сообщения между браузером и ИИ. Иногда это помогает быстро исправить конкретную проблему, но понимание почти не растёт. Чтобы постепенно становиться самостоятельнее, после каждого значимого изменения отвечайте на три вопроса: что изменилось, почему это нужно и как проверить результат.
Не требуйте от себя понимания всего проекта сразу. Выберите один небольшой участок. Например, узнайте, какой файл содержит текст главного заголовка и где задаётся адрес кнопки. Затем измените текст самостоятельно и убедитесь, что результат соответствует ожиданию. Такие небольшие управляемые действия дают более надёжную основу, чем попытка за вечер изучить весь язык программирования.
Просите объяснение через связи. Вместо «расскажи про весь код» лучше спросить: «Какие два файла участвуют в отображении этой кнопки и что произойдёт после нажатия?» Затем проверьте ответ по файлам. Помощник может ошибиться даже в объяснении собственного решения, поэтому возможность проследить действие важнее уверенного тона.
Ведите список непонятных слов и добавляйте короткое определение своими словами. Не переписывайте длинные справки. Для начала достаточно: «Компонент — повторно используемая часть интерфейса». Когда появится реальная необходимость, определение можно уточнить и связать с конкретным компонентом вашего проекта.
Полезно также отделять эксперимент от основной работы. Если хочется попробовать необычную анимацию, сделайте это в копии проекта. Тогда неудачный опыт не разрушит уже проверенную страницу. Эксперимент становится способом обучения, а не источником страха перед любым изменением.
Разбор на примере
Допустим, владелец учебной мастерской говорит: «Хочу сайт, чтобы люди меньше спрашивали одно и то же». Сразу писать код рано. Сначала нужно выяснить, какие вопросы повторяются. В нашем примере это перечень работ, порядок обращения и возможность привезти велосипед без согласования. Из ответов получается структура: краткое описание мастерской, услуги, порядок обращения и контакт.
Теперь формулируем цель: посетитель должен понять, подходит ли ему мастерская, и отправить осмысленный запрос. Первое ограничение: на странице нет неподтверждённых цен. Второе: отправка сообщения не равна записи. Третье: реальные контактные данные добавляет владелец после проверки. Эти ограничения помогают избежать красивых, но ложных обещаний.
Критерии готовности можно записать так: посетитель видит список услуг; порядок обращения расположен до кнопки связи; кнопка открывает согласованный адрес; текст не выходит за экран телефона; клавиатурный фокус заметен; на странице нет выдуманных отзывов. Каждый пункт можно проверить независимо.
Обратите внимание: мы получили полезный результат ещё до создания программы. У нас есть объяснение задачи, границы и способ проверки. Когда ИИ предложит решение, вы сможете сравнить его с этим документом. Без такого ориентира легко принять любое аккуратное оформление за успешное выполнение работы.
Готовые промпты для ИИ
Подставьте вместо квадратных скобок свои сведения. Если информации нет, прямо попросите задать вопрос, а не дополнять её догадкой.
Помоги уточнить задачу небольшого сайта.
Пользователь: [кто приходит на страницу].
Его ситуация: [что произошло и чего он хочет].
Главное действие: [одно действие после посещения].
Известные факты: [подтверждённые сведения].
Сначала задай до пяти вопросов, без которых нельзя выбрать структуру.
Не выдумывай цены, контакты, отзывы и гарантии.
Пока не пиши код.
Второй запрос полезен после согласования структуры. Он превращает субъективную оценку в последовательную проверку.
Для этой страницы составь проверку готовности.
Структура: [перечень блоков].
Главное действие: [ожидаемое действие посетителя].
Ограничения: [что не входит в первую версию].
Раздели проверки на содержание, поведение и неудобные условия.
Для каждой укажи действие проверяющего и ожидаемый результат.
Не называй проверку выполненной, пока её никто не провёл.
Типичные ошибки новичков
- Просить целый бизнес одним сообщением. Когда в запросе одновременно магазин, кабинет, доставка и аналитика, трудно понять причину сбоя. Сократите первую версию до одного полезного действия и добавляйте возможности отдельно.
- Принимать уверенность за точность. Спокойный ответ ИИ может содержать неверные факты. Проверяйте сведения о бизнесе у владельца, а поведение программы — собственными действиями.
- Исправлять всё одновременно. После нескольких несвязанных изменений невозможно определить, какое помогло или навредило. Сначала воспроизведите одну проблему, затем внесите одно объяснимое изменение.
- Не сохранять удачные состояния. Если рабочая версия перезаписана экспериментом, восстановление занимает лишнее время. Создавайте контрольную копию перед рискованным изменением и постепенно переходите к системе версий.
- Считать обучение списком инструментов. Новое приложение не заменит понимание задачи. Оценивайте свой рост по тому, можете ли вы объяснить решение и проверить его, а не по количеству установленных сервисов.
Практическое задание
За ориентировочно сорок — шестьдесят минут подготовьте одностраничное описание сайта учебной мастерской. Запишите пользователя, его ситуацию, главное действие, четыре основных блока и пять ограничений. Затем составьте не менее шести критериев готовности, среди которых есть проверка маленького экрана и проверка правильности контакта.
Попросите ИИ предложить структуру по вашему описанию. Сравните ответ с исходной задачей и отметьте каждое неподтверждённое предположение. Если помощник добавил отзывы, цены или гарантии, удалите их либо замените на вопрос владельцу. Сохраните исходный запрос, ответ и вашу исправленную версию в одной папке.
Работа готова, если другой человек может прочитать документ и объяснить, для кого создаётся сайт, что посетитель должен сделать и какие возможности пока не входят в проект. Дополнительный критерий: вы способны проверить каждый пункт готовности конкретным действием. Если пункт нельзя проверить, перепишите его более точно.
Самопроверка
1. Почему вайбкодинг не отменяет необходимость понимать задачу?
ИИ получает только доступный ему контекст и не знает всех обстоятельств реального бизнеса. Если цель, ограничения и факты не сформулированы, помощник будет выбирать их самостоятельно. Понимание задачи позволяет человеку оценить полезность результата, заметить неверное обещание и решить, какое изменение действительно нужно.
2. Чем прототип отличается от готового продукта?
Прототип проверяет отдельную идею или показывает предполагаемый сценарий. Продукт должен позволять выполнить задачу в реальных условиях, соответствовать своим обещаниям и иметь проверенные ограничения. Один и тот же экран может выглядеть одинаково в обоих случаях, поэтому различие определяется поведением, содержанием и надёжностью, а не количеством декоративных деталей.
3. Как превратить «сделай красиво» в проверяемое требование?
Уточните свойства, которые важны пользователю: читаемый размер текста, понятная последовательность блоков, заметная основная кнопка, отсутствие горизонтальной прокрутки на телефоне. Внешнее настроение можно дополнить референсом, но критерии готовности должны описывать наблюдаемые условия. Это не запрещает эстетическую оценку, а делает её обсуждение предметным.
4. Что делать, если помощник сообщил, что ошибка исправлена?
Повторите действия, которые вызывали проблему, и сравните результат с ожидаемым. Затем проверьте ближайший связанный сценарий: например, после исправления кнопки на компьютере проверьте её на телефоне. Сохраните рабочее состояние только после проверки. Сообщение помощника описывает его вывод, но не заменяет независимого наблюдения.
5. Почему маленькая первая версия часто полезнее большого списка функций?
Небольшая версия позволяет проверить главное предположение и быстрее обнаружить непонимание задачи. Если посетителю прежде всего нужны услуги и контакт, эти блоки дают основу для обратной связи. Дополнительные функции увеличивают число возможных ошибок и стоимость изменений, поэтому их разумно добавлять после подтверждения необходимости.
Краткий итог
Вайбкодинг помогает создавать программы через диалог, но человеком остаются поставлены цель, ограничения и проверка. Рабочий цикл прост: описать небольшой шаг, получить изменение, проверить наблюдаемый результат и сохранить удачное состояние. Вы уже можете начать этот цикл без знания синтаксиса языка программирования.
Дальше разберём, что происходит между вводом адреса и появлением страницы. В следующем уроке появятся сайт, сервер, база данных и домен. Эти понятия помогут понимать ответы помощника и различать внешнюю часть интерфейса и реальные действия с данными.