До первого запроса на изменение нужно увидеть работающий исходник. Иначе непонятно, что сломал агент, а что не работало до него. В этой статье подготовим отдельную папку, откроем список задач и сохраним состояние, к которому можно вернуться.
Мы используем обычные HTML, CSS и JavaScript. Никакой установки Laravel, Node или базы данных для примера не требуется. Это сознательная граница упражнения: изучаем цикл работы с агентом, а не развёртывание приложения.
Скачайте и откройте исходную версию
Скачать учебный пример. Распакуйте архив целиком. Внутри папки ai-first-task лежат README и три каталога:
initial— исходный список без фильтра;completed— готовый вариант для сравнения;broken— намеренно сломанная версия для упражнения по отладке.
Откройте initial/index.html двойным щелчком. Браузер должен показать «Составить план», «Открыть проект» и «Проверить результат». Средняя задача уже выполнена. Отметьте первую: её текст станет зачёркнутым. Перезагрузите страницу: первая задача снова не выполнена.
Последнее поведение нормально. Данные живут в памяти JavaScript, сохранения после перезагрузки здесь нет. Не просите агент исправлять это как ошибку: в первой задаче мы добавляем фильтр, а не хранилище.
Если вместо страницы открылся текст, используйте «Открыть с помощью» и выберите браузер. Если список пуст, проверьте, что архив распакован и рядом с index.html есть app.js и styles.css. JavaScript должен быть включён. Не начинайте правки, пока исходник не показывает три задачи.
Создайте рабочую копию
Скопируйте каталог initial в соседний каталог work. Откройте в редакторе именно work и предоставьте агенту эту папку. Эталон completed оставьте для последующей сверки. Это позволяет сначала получить собственное решение, а не попросить переписать готовое.
Откройте work/index.html в браузере и ещё раз проверьте путь в адресной строке. Частая путаница в таком упражнении: менять одну копию, а перезагружать другую. Названия вкладок могут быть одинаковыми, поэтому ориентируйтесь на полный путь.
Для возврата достаточно создать новую копию initial. Уже изменённую work можно сохранить отдельно, чтобы разобрать неудачу. Не нужно удалять её или запускать команды очистки всего репозитория.
Если используете Git
В отдельной учебной папке удобно сделать исходный коммит. Эти команды выполняются внутри work, когда вы убедились, что она не находится в чужом репозитории. Git должен быть установлен и настроен; для прохождения серии он необязателен.
git init
git add index.html styles.css app.js
git commit -m "Исходный список задач"
git status --shortПосле коммита последняя команда должна вернуть пустой список изменений. Если Git просит настроить имя и почту, можно пока пользоваться копией initial. Не стоит превращать настройку Git в скрытую обязательную часть первого упражнения.
В существующем рабочем проекте другой порядок: сначала посмотрите текущие изменения и правила команды. Не сохраняйте чужие правки одним общим коммитом ради «чистой точки». Наличие исходного состояния полезно лишь тогда, когда вы понимаете, что в него вошло.
Задайте границы доступа и работы
Учебной папке не нужны API-ключи, доступ к серверу и файлы основного проекта. Предоставьте минимально необходимый каталог через доступные настройки выбранного инструмента. Текстовая инструкция объясняет намерение, а технические разрешения ограничивают действия; одно не заменяет другое.
Передайте агенту короткое описание среды:
Рабочая папка — work, отдельная копия учебного списка.
Здесь index.html, styles.css и app.js, запуск — открыть index.html в браузере.
Исходно три задачи, вторая выполнена. Перезагрузка сбрасывает состояние.
Зависимости и сервер не нужны. Хранилище и сеть не добавляем.
Сейчас только изучаем код. Изменение сформулирую отдельным сообщением.Этого достаточно для начала. Не нужно заранее придумывать десятки правил для ошибок, которых пока нет. Но известные особенности запуска и границы задачи стоит назвать сразу — ждать первой поломки ради их записи бессмысленно.
Когда подготовка закончена
У вас открыта рабочая копия, исходный список меняет статусы, перезагрузка возвращает начальные данные, а нетронутая версия доступна отдельно. Вы знаете, какую папку видит агент. Если один из этих пунктов не выполняется, сначала устраните конкретное препятствие.
Теперь можно попросить инструмент разобраться в проекте. В первом разговоре с агентом проверим, действительно ли он нашёл путь от checkbox до данных, прежде чем поручать новую функцию.
