📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Level Up Your VS Code Productivity (Mastering AI Workflows)

Burke Holland20:36

Transcription

В течение долгого времени я задавался вопросом, в чем разница между файлами подсказок (prompt files), пользовательскими инструкциями (custom instructions) и пользовательскими агентами (custom agents) в Visual Studio Code. И этот вопрос я слышу часто. Итак, в этом видео мы погрузимся в это. Мы рассмотрим все эти вещи, как они работают вместе, чтобы полностью понять, когда и где их использовать. Вы готовы? Поехали. Прежде чем мы действительно рассмотрим пользовательские инструкции или файлы подсказок или пользовательские агенты, очень важно, чтобы вы поняли, как работает система подсказок агента в Visual Studio Code. И это важно, потому что вам нужно будет знать, куда, по сути, эти инструкции вставляются в эту подсказку. Итак, давайте быстро пройдемся по этому. Итак, если бы мы ввели какое-то сообщение, просто скажем здесь "hello world" и отправили его в чат, оно будет отправлено. Но давайте посмотрим, что на самом деле происходит за кулисами. За кулисами Copilot составляет подсказку, и она начинается с системной подсказки, подобной этой. И системная подсказка начинается с некоторой основной идентичности и глобальных правил. И это просто очень общий материал. На самом деле, я думаю, там всего две или три строки. Это вроде как "ты — умный ИИ-ассистент по программированию". Просто такая общая идентичность. А затем под этим идут общие инструкции. И эти инструкции могут различаться в зависимости от модели, потому что у моделей есть различные особенности. Например, если модель очень агрессивно относится к написанию кода в чате, когда ей следует просто писать его в файл, может быть инструкция "никогда не выводить блоки кода с изменениями в файлах". А затем под этим идут инструкции по использованию инструментов. И это инструкции для модели о том, как использовать инструменты, которые включены в Copilot, такие как инструмент редактирования, инструмент терминала или инструмент списка дел, любые встроенные инструменты. А затем под этим идут некоторые инструкции по форматированию вывода, которые просто говорят агенту, как форматировать вывод для токенизации в чате, чтобы такие вещи, как маленькие "таблетки" файлов, которые вы увидите в Visual Studio Code, отображались правильно.

Следующее, что происходит, это то, что пользовательская подсказка добавляется к сообщению, которое отправляется модели. Оно еще не отправлено. Сообщение пользователя содержит информацию об окружении. Так, информацию об операционной системе пользователя и т. д. И оно также включает информацию о рабочей области. И это буквально выглядит так. Это своего рода структура вашего проекта в текстовом формате. Название проекта, папки, файлы. А затем к сообщению добавляется еще одна пользовательская подсказка, которая еще не была отправлена, и она содержит информацию о контексте, такую как текущая дата и время, список открытых терминалов, которые у вас есть. Она также содержит любые файлы, которые вы добавили в чат. В нашем случае мы не добавляли никаких файлов к сообщению, но если бы мы добавили файлы, то они бы появились здесь, прямо здесь, в этом контексте редактора. И, наконец, у нас есть "hello world". И затем все это отправляется модели, и модель отвечает сообщением ассистента. И все эти вещи вместе составляют контекстное окно. Таким образом, контекстное окно просто строится здесь. У нас есть одно, затем добавляется еще одно, затем добавляется еще одно здесь, и затем все это отправляется, и затем приходит ответ, и затем это добавляется, и теперь это все контекстное окно здесь, верно, все это. И если бы мы добавили еще одно пользовательское сообщение, оно просто добавилось бы сюда и стало бы частью контекста.

Хорошо, теперь вы понимаете, что на самом деле происходит, когда вы отправляете подсказку. Теперь вопрос в том, что такое пользовательские инструкции, файлы подсказок и пользовательские агенты, и куда они на самом деле попадают в эту подсказку? Так что давайте посмотрим на это. Вероятно, лучше всего начать с чего-то вроде пользовательских инструкций. Таким образом, наиболее каноническое использование пользовательских инструкций — это содержать высокоуровневую информацию о вашем проекте, которая может помочь модели лучше отвечать на ваши вопросы. Например, в Visual Studio Code, если вы нажмете на шестеренку здесь, мы можем сгенерировать инструкции чата, и это сделает именно то, что я только что сказал. Он создаст файл инструкций, который содержит высокоуровневую информацию о вашей архитектуре проекта, любые шаблоны, которые вы можете использовать. Вы можете фактически перейти и прочитать эту подсказку здесь, чтобы увидеть, что именно ее просят написать. Но мы рекомендуем это для каждого проекта. И это, вероятно, самый распространенный сценарий использования пользовательских инструкций. Как только мы сгенерировали эти пользовательские инструкции, если бы мы отправили еще одно сообщение, вы увидите, когда мы это сделаем, пользовательские инструкции автоматически передаются прямо туда. Вот они. Таким образом, этот файл передается как часть контекста. Так в чем же вопрос, где именно это отображается в подсказке? Итак, в нашей диаграмме пользовательские инструкции должны отображаться прямо здесь, в системной подсказке, и они фактически добавляются прямо здесь. Таким образом, они являются последним элементом в системной подсказке агента. И следует отметить, что инструкции Copilot всегда будут последним элементом в системной подсказке агента, потому что вы можете создавать столько файлов инструкций, сколько захотите.

Итак, позвольте мне привести пример. Этот сайт называется Awesome Copilot, и он полон файлов подсказок, пользовательских инструкций и пользовательских агентов, предоставленных сообществом. Это кладезь пользовательских инструкций, на которые вы можете посмотреть для вдохновения. Итак, мы могли бы пойти сюда и найти некоторые инструкции, которые нам нравятся. Итак, здесь таблица всех различных доступных. Итак, давайте спустимся сюда и выберем, возможно, лучшие практики NextJS для LLM. Итак, если мы нажмем "установить", это установит файл в Visual Studio Code. Мы можем продолжить и принять его. Он спрашивает нас, куда мы хотим его поместить. Мы можем поместить его в папку пользовательских данных, что сделает его глобально доступным, или мы можем поместить его в папку github/instructions, что означает, что он будет доступен только в этом проекте, что именно я и собираюсь сделать. И теперь, если вы посмотрите, мы увидим, что у нас есть папка инструкций и файл инструкций next.js внутри. И если бы мы передали еще одну подсказку здесь, вы, вероятно, догадаетесь, что произойдет. Оба этих файла фактически передаются. И просто для уточнения, помните, что инструкции nextjs всегда будут идти перед файлом инструкций Copilot. Он всегда идет последним. Так что на высоком уровне это пользовательские инструкции.

Теперь давайте поговорим о файлах подсказок. Файлы подсказок — это многоразовые подсказки, которые вы можете определить, а затем использовать прямо в чате. Теперь, почему бы вы это сделали? Ну, позвольте мне привести пример. Если мы хотим определить файл подсказки, мы можем перейти к настройке файлов подсказок. И вы можете видеть, что у меня есть куча разных файлов подсказок здесь. Итак, давайте посмотрим на этот здесь, который называется "помнить". Итак, я посмотрю на подсказку "помнить". И в подсказке "помнить", это подсказка, которую я использую для создания файла памяти. Так что я могу в любое время сказать ИИ, чтобы он просто запомнил что-то, и он сделает это. Теперь вы можете видеть здесь, в начале, что я могу указать агент здесь, внизу. Мы просто останемся с агентом. Но затем мы также можем добавить описание. Но затем другая очень мощная вещь здесь заключается в том, что мы также можем добавить модель. И вы можете видеть, что мы получаем IntelliSense для всех доступных нам моделей. Многие из них находятся на Open Router. Некоторые из них встроены. Я буду использовать небольшую модель для этого, чтобы не тратить премиальные запросы. И это означает, что когда я использую этот файл подсказки, он автоматически переключит нас на правильную модель. Итак, позвольте мне показать, что я имею в виду. Итак, скажем, модель постоянно совершает одну и ту же ошибку, пытаясь использовать useEffect в серверных компонентах, чего нельзя делать в Nex.js, и поэтому мы просто хотим, чтобы она помнила не делать этого. Так что мы можем использовать этот файл подсказки, просто набрав здесь слэш, а затем вставив наше сообщение. И когда мы отправим это, вы заметите, что мы используем Claude Opus 45, который является премиальной моделью с множителем 3x. Но когда мы отправляем его, он фактически отправляется с GPT41, потому что именно это мы указали в файле подсказки прямо здесь, gpt41. И теперь он создал для нас файл инструкций. И этот файл инструкций будет автоматически добавляться к каждому запросу. Так что вы можете видеть здесь, как я начинаю создавать рабочие процессы, используя фактически как файлы подсказок, так и пользовательские инструкции.

Теперь давайте вернемся к нашей диаграмме и посмотрим, где именно в системной подсказке отображаются эти файлы подсказок. Итак, ответ таков: они не отображаются в системной подсказке. Они фактически отображаются здесь, в пользовательской подсказке. Итак, в пользовательской подсказке происходит следующее: содержимое этих файлов подсказок добавляется прямо здесь, в самом начале. Так что еще до информации о контексте у нас будут файлы подсказок. А затем у нас будет просто содержимое файла подсказки, который был использован. А затем, ниже в этом сообщении, говорится "следуйте инструкциям в" и затем указывает обратно на содержимое этого файла подсказки, но фактически использует специальный синтаксис для этого. Он как бы указывает на него по имени, хотя он фактически включен в пользовательскую подсказку. А затем после этого идет ваше системное сообщение, которое будет "useEffect может использоваться только в клиентских компонентах". Правильно. Вот где появляются файлы подсказок. И поэтому, если у нас много сообщений, они могут быть очень, очень далеко в списке, верно? Может быть, очень далеко здесь. Каждый раз, когда мы используем файл подсказки, он становится частью пользовательской подсказки, а не частью системной подсказки.

Теперь вопрос, который вы зададите: имеет ли значение расположение подсказки в иерархии сообщений? И ответ таков: я не знаю. Однако "контекстное гниение" (context rot) — это реальная вещь. И основная идея здесь заключается в том, что по мере роста и удлинения контекстного окна производительность модели снижается. Это улучшилось со временем. Как подробно описано в статье, оно улучшилось. Но вы все еще можете видеть здесь, что по мере роста контекстного окна, например, подсказка на 32 000 токенов, точность резко падает. Даже Claude 35 Sonnet снижает точность с 88% до 30%. Поэтому важно помнить, что по мере роста вашей подсказки здесь. Итак, если у нас есть системная подсказка и пользовательская подсказка, и пользователь, а затем сообщение ассистента, а затем пользовательская подсказка, а затем у нас есть еще одно сообщение ассистента, потому что мы не начали новый чат. Так что мы просто продолжаем и продолжаем. На самом деле не имеет значения, используете ли вы пользовательские инструкции или файлы подсказок. Производительность или точность модели просто будет снижаться. И это одна из причин, по которой окна токенов или контекстные окна в VS Code ограничены определенным моментом, и это сделано для поддержания производительности. Так что трудно ответить на вопрос, будет ли более точным передавать ваши инструкции в виде файла подсказки или пользовательской инструкции. Лучшее, что можно сделать, — это вместо того, чтобы беспокоиться о позиционировании, просто использовать их так, как они предназначены, то есть для помощи в составлении рабочих процессов и не беспокоиться об их положении в подсказке.

Теперь давайте поговорим о последнем, и это пользовательские агенты. Пользовательские агенты раньше назывались пользовательскими режимами, и я создал один некоторое время назад, который назывался "режим зверя" (beast mode), который был разработан для улучшения работы GPT4.1. И идея здесь в том, что вы можете передавать инструкции для переопределения или дополнения поведения агента по умолчанию. Итак, давайте посмотрим на них. Я хочу посмотреть на один из тех, которые мы сейчас поставляем в Visual Studio Code, а именно на режим планирования (plan mode). Итак, вы можете нажать "настроить пользовательские агенты" и посмотреть на наш встроенный режим планирования здесь. Итак, давайте посмотрим на режим планирования. Вы можете видеть, что это название и описание, а затем есть эти инструменты, а затем есть эти вещи, называемые "передачами" (handoffs), к которым мы перейдем через секунду. А затем вы можете видеть, что это очень похоже на написание подсказки агента. Это сильно отличается от пользовательских инструкций, верно? Если мы посмотрим на пользовательские инструкции, это отличается. Это просто дает ему информацию. Это дает ему идентичность. Так что это очень похоже на системную подсказку агента. А затем он пройдет и использует рабочий процесс для начала процесса планирования с пользователем. Первый шаг — собрать контекст и провести исследование, затем представить краткий план для итерации, а затем обработать обратную связь пользователя. А затем он даст вам возможность либо реализовать план, либо записать план в редактор, и он делает это с помощью передач.

Итак, давайте фактически запустим это и посмотрим, как это выглядит в действии. Итак, я выберу модель, которая немного лучше планирует. Я использую наш встроенный режим планирования. Итак, давайте сделаем то, что всегда делается в этих демонстрациях. Мы просто добавим темный режим в приложение. Я не знаю, почему это всегда используемая подсказка, но это потому, что она визуальна, и это то, что мы можем видеть. Итак, мы позволим Haiku пройти и проработать этот план. Вы можете увидеть это, а затем мы вернемся и поговорим о том, что на самом деле происходит здесь. Хорошо, мы используем этот новый агент планирования, и мы отправили эту подсказку. Что на самом деле происходит за кулисами? Давайте вернемся и посмотрим на нашу диаграмму. Итак, что происходит, когда вы используете пользовательский агент, это следующее. Он фактически добавляется в системную подсказку здесь. Итак, давайте освободим место. И пользовательский агент всегда добавляется здесь, под вашими пользовательскими инструкциями. Так что это порядок в системной подсказке. Пользовательские инструкции будут добавлены в конец системной подсказки, а затем инструкции пользовательского агента будут добавлены в конец системной подсказки. Они являются последним элементом в системной подсказке агента.

Итак, теперь давайте посмотрим, как мы можем использовать пользовательские инструкции, файлы подсказок и пользовательские агенты для составления агентских рабочих процессов, потому что именно это они собой представляют. На самом деле нет правильного или неправильного способа их использования. Это просто строительные блоки для составления ваших собственных рабочих процессов, но это не имеет особого смысла в абстракции. Это поможет вам, если вы увидите, как это сделал кто-то другой. Итак, что я хочу сделать сейчас, это показать вам, как я составляю рабочие процессы. Итак, я собираюсь использовать файл подсказки для планирования. У меня есть пользовательский файл подсказки для планирования, а затем я попрошу его переработать пользовательский интерфейс этого приложения, чтобы он стал более чистым и современным. И вы заметите, что первое, что он делает, это переключает нас на Opus45, потому что именно это я определил в файле подсказки. Мы можем фактически посмотреть на это. Если мы пойдем сюда, вот мой файл подсказки. Вы можете видеть, что я определил модель, а затем мой файл подсказки для планирования очень похож на встроенный агент, но мой файл подсказки фактически инструктирует агента работать в концепции ветки. Таким образом, план фактически определяет один PR или одну ветку, и он просто определяет высокоуровневые шаги. Таким образом, он будет делать то, что делает встроенный агент планирования, например, исследовать кодовую базу и задавать мне вопросы, но формат плана, который он выдает, немного отличается, потому что это всего лишь один из строительных блоков, и это станет более понятным через секунду.

Хорошо, режим планирования завершен, и у нас есть один файл, который был создан, и я автоматически создаю этот файл. У него есть некоторые вопросы, но они незначительны. Ничего, что мне действительно нужно решать. Но вы можете видеть, что он просто разбивает вещи на шаги. Шаг первый, сделай это. Шаг второй, сделай это. Идея в том, что каждый из этих шагов — это коммит. А коммиты должны быть маленькими и тестируемыми. И коммиты будут накапливаться и создавать один PR, который мы затем сможем отправить. Однако у нас нет кода. Так что следующий шаг — получить код. Итак, давайте продолжим и сохраним это. И поскольку мы не хотим контекстного гниения, давайте начнем новую сессию чата. Очистим контекст. Теперь я собираюсь сделать кое-что уникальное. Вместо того, чтобы фактически реализовывать план, я попрошу его сгенерировать документ на основе этого плана. А затем я просто передам файл плана здесь. Итак, в этом случае я использую подсказку "сгенерировать" и передаю план, который мы только что создали. И я объясню, что он делает. Таким образом, подсказка "сгенерировать" берет план, а затем записывает весь код, необходимый для реализации этого плана, но она не записывает этот код в проект. Она фактически записывает его в файл markdown шаг за шагом. И причина, по которой я это делаю, заключается в том, что я пытаюсь максимально использовать свой премиальный трафик модели. Я уже дважды использовал Claude Opus 45. Это множитель 3x. Шесть премиальных запросов. Я хочу убедиться, что получаю максимальную отдачу от своих денег. Поэтому я собираюсь использовать меньшую модель для реализации и большую модель для написания кода. Меньшая модель будет реализовывать его, но большая модель будет его писать. Итак, через секунду мы посмотрим на этот план реализации и вы увидите, как именно это работает. Это не сложно. План реализации, который генерируется, длинный. Он очень длинный. Этот почти на 2000 строк, но вы можете видеть, что каждый фрагмент кода, необходимый для выполнения этой задачи, фактически находится в этом файле. Но что более важно здесь, так это то, что все они разбиты на шаги. И каждый шаг имеет здесь флажок.

Итак, теперь, когда у нас это есть, мы снова очистим контекстное окно, максимально эффективно используя наш контекст. И теперь мы собираемся использовать пользовательский агент, который просто называется "реализовать" (implement). И все, что нам нужно сделать, это передать план реализации здесь, вот так, и дать ему простую подсказку, а затем мы просто отправляем его. И вы можете видеть, что он автоматически переключается на VS Code Prime или Raptor Prime, который является вариантом с пятью мини, и это модель, которую я люблю использовать для реализации. Итак, мы продолжим и отправим это. Теперь, пока эта меньшая модель работает с этим документом, она будет реализовывать то, что находится в документе, дословно. Она фактически не пишет никакого кода. Она просто реализует код, который написала большая модель. И эта стратегия позволяет вам как бы одним выстрелом использовать огромную модель, а затем реализовывать и итерировать с небольшой бесплатной моделью. И эта модель будет продолжать работать до тех пор, пока не завершит любой шаг, который она выполняет в плане реализации. А затем она остановится и вернет управление мне, чтобы я мог протестировать, убедиться, что мне это нравится, а затем я просто подготовлю и закоммичу. А затем я просто повторю то, что сделал. Использую агент реализации, передам документ реализации, и он просто продолжит со шага второго и далее. И я буду итерировать с ним таким образом, пока мы не дойдем до конца реализации и все не заработает. И тогда у меня будет пул-реквест, которым я буду очень доволен.

Хорошо. Теперь у вас есть очень хорошее понимание того, что происходит за кулисами для агента в VS Code. Вы понимаете системную подсказку агента и как добавляются пользовательские подсказки, а также куда на самом деле попадают пользовательские инструкции и файлы подсказок в эту подсказку. Идите и создавайте ИИ-рабочие процессы, которые работают для вас. Я размещу ссылки на свои ниже и проверьте репозиторий Awesome Copilot, где вы найдете мои рабочие процессы, а также множество других файлов подсказок, инструкций и пользовательских агентов, которые вы можете использовать сегодня. И, как всегда, счастливого кодирования.