Инструменты: ИИ-ассистенты, редакторы кода и как они работают вместе

Чему вы научитесь

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

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

Что нужно знать заранее

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

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

Ключевые термины

ИИ-ассистент — инструмент, который помогает работать с текстом, кодом и другими данными с помощью модели искусственного интеллекта. Он может существовать как чат, часть редактора или отдельная программа с доступом к инструментам.

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

Агентный режим — режим, в котором помощник может не только отвечать текстом, но и выполнять разрешённые действия: читать файлы, менять их или запускать команды. Конкретные возможности зависят от продукта и настроек.

Терминал — интерфейс для запуска команд текстом. Зависимость — сторонняя библиотека или программа, необходимая проекту. Версия — обозначение конкретного выпуска инструмента или пакета. Эти понятия понадобятся, когда помощник предложит установить или запустить что-либо.

1. Выбирайте роль инструмента, а не громкое название

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

Разговорный помощник удобен для уточнения задачи, сравнения решений и объяснения непонятных слов. Например, ChatGPT или Claude могут помочь составить структуру сайта и разобрать сообщение об ошибке. Однако обычный разговор сам по себе не означает, что помощник видит вашу папку или изменяет файлы на компьютере. Доступ к ним должен быть явно предоставлен соответствующей возможностью сервиса.

Редактор вроде Visual Studio Code нужен для работы с самим проектом. Некоторые редакторы, включая Cursor, тесно объединяют файлы и ИИ-возможности. Другие позволяют добавлять расширения. Расширение — дополнительный модуль, который меняет возможности редактора. Перед установкой такого модуля важно понимать, кто его выпускает и к каким данным он получает доступ.

Браузер нужен для проверки интерфейса. Его встроенные инструменты разработчика помогают увидеть ошибки и сетевые обращения. На первых шагах достаточно уметь открыть консоль — область, где программа сообщает об ошибках и диагностических событиях. Название команды открытия может различаться, поэтому ищите её в меню инструментов разработчика вашего браузера.

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

2. Сравнивайте инструменты на своей задаче

Не существует универсального ответа «какой помощник лучший» без условий. Один удобнее объясняет, другой лучше интегрирован с файлами, третий доступен в вашем регионе или подходит под правила организации. Сравнивать стоит не впечатление от демонстрации, а выполнение небольшой одинаковой задачи.

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

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

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

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

Составьте короткую таблицу решения: задача, выбранный инструмент, причина выбора, ограничение и запасной вариант. Например, обсуждение структуры — доступный чат; редактирование — установленный редактор; проверка — браузер. Такая запись избавляет от постоянной смены набора при появлении очередной рекомендации.

3. Организуйте рабочую папку и передачу контекста

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

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

В файле README.md запишите назначение проекта, способ запуска и известные ограничения. Markdown — простой текстовый формат, где заголовки и списки обозначаются специальными символами. Редактор обычно умеет показывать его в удобном виде. Для начала достаточно нескольких абзацев; важнее актуальность, чем оформление.

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

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

Не передавайте секреты в контекст. Секрет — значение, которое даёт доступ к защищённым действиям: например, токен бота или закрытый ключ сервиса. Для обсуждения используйте обозначение вроде BOT_TOKEN и объяснение назначения. Если настоящий секрет уже раскрыт, простого удаления сообщения недостаточно; обычно требуется отозвать его у поставщика и выдать новый.

4. Различайте предложение, изменение и выполненную проверку

Помощник может сказать: «Добавьте этот код». Это предложение, которое ещё нужно применить. Он может изменить файл через редактор. Это изменение, которое ещё нужно проверить. Он может запустить команду проверки. Это действие, результат которого нужно прочитать. Эти три состояния часто смешивают, из-за чего человек думает, что задача завершена раньше времени.

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

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

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

Не используйте слепое правило «раз ИИ предложил, значит безопасно». Помощник может ошибиться в пути или предположить другую операционную систему. Сначала убедитесь, что команда подходит вашей среде. Для первого проекта достаточно небольшого числа понятных действий; сложность не должна появляться только потому, что инструмент умеет выполнять много команд.

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

5. Настройте безопасный и спокойный рабочий ритм

Автоматизация полезна, когда вы понимаете её границы. Начинайте с ограниченного доступа к рабочей папке и подтверждения значимых действий. Для чтения учебного HTML-файла не нужен доступ к личной почте или платёжному аккаунту. Чем уже область разрешённых действий, тем легче понять последствия ошибки.

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

Следите за усталостью внимания. После десятого похожего ответа легко перестать замечать, что помощник предлагает уже проверенный неудачный вариант. Если обсуждение ходит по кругу, остановитесь и составьте краткое резюме: что ожидалось, что происходит, какие попытки были сделаны и что они изменили. Новый запрос с таким резюме часто полезнее ещё одного «не работает».

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

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

Разбор на примере

У нас есть файл index.html мастерской и задача добавить блок «Как обратиться». Сначала в чате уточняем текст: посетитель описывает проблему, мастер согласует время, велосипед принимают после подтверждения. Мы не просим одновременно менять дизайн, подключать базу и создавать форму.

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

Предположим, помощник дополнительно добавил обещание бесплатной диагностики. Оно не было подтверждено владельцем. Мы удаляем его и уточняем ограничение в описании проекта. Это пример того, почему проверка содержания остаётся обязательной независимо от качества редактора и модели.

Теперь проверяем различия файла. Если изменение затронуло только нужный блок, задача понятна. Если появились новые подключения к внешним сервисам, выясняем причину и убираем ненужное. В конце сохраняем рабочее состояние и записываем: «Добавлен порядок обращения; цены и сроки ответа не обещаются». Это завершённый небольшой цикл.

Готовые промпты для ИИ

Используйте первый запрос при выборе набора инструментов. Он помогает избежать рекомендации продукта без учёта условий.

Помоги выбрать минимальный набор инструментов для учебного сайта.
Устройство и система: [укажите].
Доступные сервисы: [перечислите те, к которым есть доступ].
Бюджет и ограничения данных: [укажите].
Задача: простая страница мастерской без базы и оплаты.
Раздели роли: обсуждение, редактирование, запуск, проверка.
Для каждого выбора объясни причину и альтернативу.
Не утверждай актуальные цены и региональную доступность без проверки.

Следующий запрос подходит для редактора с доступом к файлам. Он ограничивает область действия и требует проверяемого отчёта.

Работай только с папкой текущего учебного проекта.
Задача: добавить раздел «Как обратиться» в index.html.
Согласованный текст: [вставьте текст].
Не меняй другие разделы, не устанавливай зависимости и не подключай сервисы.
Сначала перечисли план изменений.
После выполнения укажи изменённые файлы и способ ручной проверки.
Отдели выполненные проверки от тех, которые должен сделать я.

Типичные ошибки новичков

• Постоянно менять инструмент при первой трудности. Причина может быть в неполном запросе или непонятной задаче. Сначала воспроизведите проблему на небольшом примере и оцените ограничение, затем решайте, нужна ли замена.
• Открывать слишком широкую папку. Помощнику не требуется весь компьютер для правки страницы. Создавайте отдельное рабочее пространство и предоставляйте только необходимые файлы.
• Считать код из чата уже применённым. Проверьте наличие файла и сохранение изменений. Уточняйте, инструмент только советует или действительно работает с проектом.
• Пропускать просмотр различий. Иногда маленький запрос приводит к большой переделке. Смотрите, какие части изменились, и просите объяснить несвязанные изменения до их принятия.
• Отправлять секрет ради удобства. Реальный токен не нужен для объяснения структуры программы. Используйте имя переменной и описание, а секрет храните в предназначенной для этого среде.

Практическое задание

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

Затем выполните одно небольшое изменение: добавьте согласованный порядок обращения. До изменения сохраните исходный файл отдельно, после — сравните версии. Откройте результат и проверьте текст на неподтверждённые обещания. Если помощник не имеет доступа к файлам, примените его предложение вручную; это полноценный вариант выполнения задания.

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

Самопроверка

Краткий итог

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

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