Первый проект за вечер

В прошлом уроке мы смотрели, что агент делает с вашей фразой: строит план, пишет файлы, запускает команды, проверяет результат. Смотреть со стороны полезно ровно один раз. Сегодня пройдём тот же путь своими руками: к концу вечера у вас работает собственная страница, и — что ценнее — вы понимаете каждое звено цепочки «просьба → файлы → dev server → браузер», потому что видели их все.

Проект на сегодня: страница-визитка

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

Составные части скромные: заголовок с именем, два-три абзаца, форма. Без регистрации и баз данных. Жить всё будет прямо на вашем компьютере — для полного цикла разработки этого достаточно.

Осталась, казалось бы, мелочь: попросить агента это сделать. Именно на этой «мелочи» первый вечер чаще всего и заканчивается.

Формула просьбы

Мысленно отправьте агенту фразу «Сделай мне красивый современный сайт про меня». Агент не откажется и не завалит вас вопросами — он сделает сайт. Но каждое решение, которое вы не приняли, он примет за вас: о чём страница, каким тоном написана, что на ней главное, нужна ли форма. Через несколько минут вы получите аккуратную страницу — чужую. Про абстрактного человека, которого агент себе вообразил.

Текст просьбы к агенту называют промптом (prompt — запрос, дословно «подсказка»). Хороший промпт новичка собирается по формуле из четырёх частей:

• ЧТО — одна фраза. «Одностраничный сайт-визитка с формой обратной связи».
• ДЛЯ КОГО — кто будет читать страницу. Это определяет тон и содержание сильнее, чем любые слова про «красиво».
• КАК ПОЙМЁМ, ЧТО ГОТОВО — два-три пункта, каждый проверяется глазами: открыл страницу — увидел или не увидел.
• ЧЕГО НЕ ДЕЛАТЬ — граница задачи. Без неё агент охотно добавит базу данных, регистрацию и админку, и вечерний проект превратится в стройку на неделю.

Сравните две просьбы. Плохая:

Сделай мне красивый современный сайт про меня.

Хорошая:

Сделай одностраничный сайт-визитку.

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

Готово, когда:
1. Вверху — моё имя и одной строкой, чем я занимаюсь.
2. Ниже — три коротких блока: опыт, как проходят
   занятия, цена.
3. Внизу — форма «напишите мне»: поле для сообщения
   и кнопка.

Чего не делать: без базы данных и внешних сервисов.
Форма пока может никуда не отправлять.

Вторая просьба длиннее в десять раз, и при этом в ней нет ни строчки кода — только решения: что, для кого, как проверить, где граница. Решения — ваша часть работы. Код — часть агента.

Отправляем хорошую просьбу. Агент думает, что-то печатает, через пару минут отчитывается: «Готово, проект создан». И правда — на диске появилась новая папка. Прежде чем открывать страницу, заглянем внутрь: надо же знать, что нам оставили.

Что появилось на диске

Внутри папки — несколько файлов с непривычными расширениями:

my-page/
  index.html   — сама страница: заголовки, текст, форма
  style.css    — внешний вид: цвета, шрифты, отступы
  script.js    — поведение: что происходит по кнопке

Названия и состав могут отличаться — зависит от того, как агент решил собрать проект, — но суть одна. И первое, что стоит сделать: откройте любой из этих файлов. Подойдёт какой угодно редактор текста, хоть «Блокнот».

Внутри — обычный текст. Не шифр и не бинарная каша, а строки, написанные для того, чтобы их читали люди:

<h1>Анна Смирнова</h1>
<p>Репетитор по математике</p>

Даже не зная языка HTML (язык разметки: он описывает, из каких частей состоит страница), вы узнаете здесь своё — имя из промпта, заголовки, подпись кнопки. Код проекта не принадлежит агенту и не спрятан у него «внутри»: это текст в папке на вашем диске. Читать его — нормальная часть работы, и скоро вы начнёте его ещё и править.

Но текст в папке — ещё не страница. Файл лежит на диске, а страница должна открываться в браузере и меняться после каждой правки. Между «текстом» и «страницей» стоит ещё одна программа — и агент запустил её, даже не спросив вас.

Dev server: программа, которая показывает результат

Пролистайте, что агент делал после создания файлов. Там найдётся команда в терминале (текстовом окне, где программы запускают, набирая их имя) и ответ примерно такого вида:

Local: http://localhost:3000

Это заработал dev server (сервер разработки) — программа, которая следит за файлами проекта и показывает собранную из них страницу в браузере. Адрес localhost означает «этот самый компьютер»: страница не в интернете, её видите только вы.

У dev server две обязанности. Первая: когда браузер открывает адрес, отдать ему свежую страницу, собранную из ваших файлов. Вторая — интереснее: следить за файлами. Вы сохранили правку — dev server замечает изменение и сам обновляет страницу в браузере, без перезапусков и ручного колдовства.

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

Запустите сценарий и проследите путь целиком: фраза уходит агенту, агент пишет файлы, dev server их подхватывает, браузер показывает страницу.

Схему пути вы теперь видели целиком. Осталось пройти его на своей машине — с вашим именем в заголовке.

Практика: ваша страница

План на вечер — пять шагов.

1. Напишите промпт заранее. Не в окне агента, а в заметках: ЧТО одной фразой, ДЛЯ КОГО, три пункта «готово, когда», ЧЕГО НЕ ДЕЛАТЬ. Пример с репетитором можно взять за основу и подставить себя.
2. Отправьте промпт агенту. Claude Code, Cursor, Copilot — интерфейсы разные, механика одна. Пока агент работает, не уходите в другую вкладку: смотрите, какие файлы он создаёт и что пишет о своих шагах.
3. Откройте адрес, который назовёт агент — вида localhost с номером порта. Страница на экране? Дальше. Белый экран или ошибка? Опишите агенту прямо в чате, что видите, и попросите починить.
4. Проверьте пункты «готово, когда» — по одному, глазами. Что не сошлось, верните агенту как замечание: «пункт 2 не выполнен: блоков два, а не три».
5. Внесите одну правку сами. Откройте файл с текстом страницы, найдите знакомую фразу, поменяйте слово, сохраните — и посмотрите на браузер.

Критерии приёмки — минимум на сегодня:

• [OK] Страница открывается по локальному адресу, в заголовке ваше имя или дело, а не заглушка.
• [OK] Форма «напишите мне» на месте: поле ввода и кнопка.
• [OK] Вы поменяли слово в файле, сохранили — и браузер показал новую версию без вашего участия.

Три галочки — и у вас работающий проект плюс пройденный своими ногами путь «просьба → файлы → dev server → браузер». Это больше, чем «агент что-то сделал»: вы знаете, где лежит результат и кто его показывает.

Страница живёт, пока не ломается

У пятого шага есть тёмный двойник. Однажды вы поменяете слово, сохраните — а вместо обновления получите белый экран, и в терминале dev server напечатает что-то красное и длинное. Не «однажды, может быть», а скорее всего на этой же неделе: опечатка в один символ умеет остановить всю цепочку.

Посмотрите заранее, как это выглядит: тот же путь, но в файл проскакивает опечатка — проследите, в каком звене цепочка рвётся и что видят браузер и терминал.

Красный текст в терминале — не приговор. Это сообщение, написанное для того, чтобы его прочитали: оно почти всегда называет файл и строку, где случилась беда. Как читать такие сообщения и превращать панику в план действий — в следующем уроке: «Почему сломалось: читаем ошибки».