Поручите Claude Code добавить поиск в учебный каталог и принимайте изменение по поведению страницы. Заранее задайте случаи проверки: тогда объяснение агента можно сверить с кодом, а спорную правку вернуть с точной причиной.

Подготовьте задачу, которую можно проверить за один проход

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

Понадобятся установленный Claude Code, доступная сессия, браузер и Git. На Windows сначала пройдите установку по официальной инструкции. Для самого задания нужны базовые HTML и JavaScript: вы должны понимать обработчик события и создание элементов DOM. Общие приёмы постановки запросов разобраны в статье о промптах для фронтендеров.

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

Создайте пустую папку catalog-agent-demo. Сохраните в ней index.html:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Учебный каталог</title>
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Учебный каталог</h1>
      <label for="search">Название товара</label>
      <input id="search" type="search">
      <p id="status" role="status"></p>
      <ul id="products"></ul>
    </main>
  </body>
</html>

В app.js поместите исходный вариант, который пока выводит все товары:

const products = [
  {id: 'lamp', name: 'Настольная лампа'},
  {id: 'cup', name: 'Кружка'},
  {id: 'bag', name: 'Рюкзак'}
];

const list = document.querySelector('#products');
const search = document.querySelector('#search');
const status = document.querySelector('#status');

function render(items) {
  list.replaceChildren();

  for (const item of items) {
    const element = document.createElement('li');
    element.textContent = item.name;
    list.append(element);
  }
}

render(products);

Откройте HTML-файл в браузере. Должны появиться три названия и поле поиска. Ввод текста пока ничего не меняет: это исходное поведение, которое предстоит доработать.

Зафиксируйте исходное состояние

Из папки проекта выполните:

git init
git add index.html app.js
git diff -- index.html app.js

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

Перед работой со своим репозиторием проверьте git status. Если там уже есть чужие или ваши незавершённые правки, выберите отдельную копию проекта. Агенту трудно объяснить происхождение строк, которые изменились до начала задания.

Откройте Claude Code из этой папки в режиме планирования:

claude --permission-mode plan

В документации рабочего процесса Claude Code этот режим предназначен для чтения кода и подготовки плана до изменений. Смотрите на режим в интерфейсе: слово «план» в вашем запросе само по себе не меняет конфигурацию разрешений.

Дайте агенту контракт поиска

Отправьте запрос:

В index.html и app.js находится учебный каталог.

Добавьте поиск по названию товара:
- реагировать на событие input;
- сравнивать без учёта регистра;
- убирать пробелы по краям запроса;
- при пустом запросе показывать все товары;
- при отсутствии совпадений показывать «Ничего не найдено»;
- при совпадениях очищать сообщение.

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

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

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

Если план подходит, подтвердите переход к изменению файлов в интерфейсе Claude Code. При запросе отдельного разрешения сверяйте действие с задачей. Если требуется запуск команды, прочитайте её целиком, включая аргументы и рабочую папку.

Разберите механизм правки

Один из вариантов решения — добавить функцию фильтрации и обработчик. Это эталон для разбора, а не обещание точного ответа Claude Code:

function filterProducts(items, value) {
  const query = value.trim().toLocaleLowerCase('ru');
  return items.filter((item) =>
    item.name.toLocaleLowerCase('ru').includes(query)
  );
}

function updateCatalog() {
  const matches = filterProducts(products, search.value);
  render(matches);
  status.textContent =
    matches.length === 0 ? 'Ничего не найдено' : '';
}

search.addEventListener('input', updateCatalog);
updateCatalog();

Последний исходный вызов render(products) заменяется на updateCatalog(). Каталог теперь проходит один путь обновления и при запуске, и при вводе запроса.

Метод undefined удаляет пробелы с краёв строки. Обе стороны сравнения приводятся к одному регистру. undefined создаёт массив совпавших элементов, сохраняя исходные данные для следующего запроса. Пустая строка содержится в любом названии, поэтому возвращаются все товары.

Для сообщения используется undefined: браузер воспринимает значение как текст. Поле role="status" подготовлено в исходной разметке, чтобы изменение сообщения можно было объявить вспомогательным технологиям. Это ещё не полноценная проверка доступности всего интерфейса.

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

Проверьте diff до проверки страницы

После ответа агента выполните:

git status --short
git diff --stat
git diff -- index.html app.js

Команда undefined показывает различия. Сначала оцените список файлов: при заданных условиях новых зависимостей и конфигурации быть не должно. Затем прочитайте саму правку.

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

Проверьте способ вывода пользовательского запроса. В этой задаче вообще не требуется вставлять его в разметку. Если агент добавил innerHTML, попросите объяснить необходимость и вернуть текстовый вывод там, где нужна строка.

Отчёт агента «проверки прошли» должен сопровождаться конкретикой: что запускалось, что наблюдалось и что осталось непроверенным. Этот принцип входит в рекомендации Anthropic о проверке результата. Компиляция JavaScript сама по себе не проверяет взаимодействие с DOM.

Пройдите сценарии в браузере

Обновите страницу после изменения файлов. Откройте консоль браузера и убедитесь, что при загрузке и вводе нет исключений. Затем выполните таблицу вручную.

ЗапросОжидаемый результат
Пустое полеВсе три товара; сообщение пустое.
КРУЖОдна кружка; сообщение пустое.
лампа Одна лампа, пробелы по краям не мешают.
палаткаСписок пуст; видно «Ничего не найдено».
Удалить запрос после «палатка»Все товары снова появились; сообщение исчезло.

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

Мы не запускали Claude Code на этом задании: здесь дана законченная учебная процедура и вариант реализации. Фактический diff агента и браузерные проверки получите при выполнении упражнения.

Верните агенту точный контрпример

Если поиск «КРУЖ» ничего не показывает, сначала убедитесь, что браузер открыл изменённый файл. Сверьте адрес страницы и обновите её. Затем сравните ввод и название товара в коде: нормализация должна применяться к обеим строкам. Агенту передайте именно этот случай, без просьбы «сделать поиск лучше».

Уточнение можно сформулировать так: «При запросе КРУЖ список пуст. Ожидается Кружка. Найдите причину в текущем обработчике, исправьте минимально и проверьте поиск в верхнем регистре, пустую строку и возврат карточек после удаления запроса». Так замечание остаётся внутри исходной задачи.

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

Повторите цикл на своём критерии

Добавьте самостоятельное условие: рядом с результатом должно появляться количество найденных товаров. Сначала определите формулировки для пустого списка и для одного совпадения, затем проведите тот же цикл с планом и проверкой. Так вы потренируете постановку задачи без расширения проекта до приложения с API.

Для дальнейшей практики откройте бесплатный первый раздел курса «Разработка с AI-агентами: инженерный подход». Начните с одной задачи, результат которой можете проверить собственными руками.