📱

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

В течение долгого времени я задавался вопросом, в чем разница между файлами подсказок, пользовательскими инструкциями и пользовательскими агентами в Visual Studio Code. И это вопрос, который я часто слышу. Итак, в этом видео мы погрузимся в это. Мы рассмотрим все эти вещи, как они работают вместе, чтобы полностью понять, когда и где их использовать. Вы готовы? Поехали. Прежде чем мы фактически рассмотрим пользовательские инструкции, файлы подсказок или пользовательские агенты, очень важно, чтобы вы поняли, как работает система подсказок агента в Visual Studio Code. И это важно, потому что вам нужно будет знать, куда, по сути, эти инструкции вставляются в эту подсказку. Итак, давайте быстро пройдемся по этому. Итак, если бы мы набрали какое-то сообщение, просто скажем здесь "привет мир" и отправили его в чат, оно будет отправлено. Но давайте посмотрим, что на самом деле происходит за кулисами. За кулисами Copilot составляет подсказку, и она начинается с системной подсказки, подобной этой. И системная подсказка начинается с некоторой основной идентичности и глобальных правил. И это просто очень общий материал. На самом деле, я думаю, там всего две или три строки. Это как будто вы — интеллектуальный ИИ-ассистент по программированию. Вроде бы эта общая идентичность. А затем под этим идут общие инструкции. И эти инструкции могут различаться в зависимости от модели, потому что у моделей есть различные особенности. Например, если модель очень агрессивно относится к написанию кода в чате, когда ей следует просто писать его в файл, может быть инструкция никогда не выводить блоки кода с изменениями файлов. А затем под этим идут инструкции по использованию инструментов. И это инструкции для модели о том, как использовать инструменты, которые включены в Copilot, такие как инструмент редактирования, инструмент терминала или инструмент списка дел, любые встроенные инструменты. А затем под этим идут некоторые инструкции по форматированию вывода, которые просто говорят агенту, как форматировать вывод для токенизации в чате, чтобы такие вещи, как маленькие файловые таблетки, которые вы увидите в Visual Studio Code, отображались правильно. Следующее, что происходит, это пользовательская подсказка добавляется к сообщению, которое отправляется модели. Оно еще не отправлено. Пользовательское сообщение содержит информацию об окружении. Так, информацию об операционной системе пользователя и т. д. Оно также включает информацию о рабочей области. И это буквально выглядит так. Это как бы структура вашего проекта в текстовом формате. Название проекта, папки, файлы. А затем еще одна пользовательская подсказка добавляется к сообщению, которое еще не было отправлено, и оно содержит информацию о контексте, такую как текущая дата и время, список открытых терминалов, которые у вас есть. Оно также содержит любые файлы, которые вы добавили в чат. В нашем случае мы не добавляли никаких файлов в сообщение, но если бы мы добавили такие файлы, они бы появились здесь, прямо здесь, в этом контексте редактора. А затем, наконец, у нас есть "привет мир". И затем все это отправляется модели, и модель отвечает сообщением ассистента. И все эти вещи вместе составляют контекстное окно. Таким образом, контекстное окно просто строится здесь. У нас есть одно, затем добавляется другое, затем добавляется еще одно здесь, и затем все это отправляется, и затем приходит ответ, и затем это добавляется, и теперь это все контекстное окно здесь, верно, все это. И если бы мы добавили еще одно пользовательское сообщение, оно просто добавилось бы сюда и стало бы частью контекста. Итак, теперь вы понимаете, что на самом деле происходит, когда вы отправляете подсказку. Теперь вопрос в том, что такое пользовательские инструкции, файлы подсказок и пользовательские агенты, и где они на самом деле находятся в этой подсказке? Итак, давайте посмотрим на это. Вероятно, лучше всего начать с чего-то вроде пользовательских инструкций. Наиболее каноническое использование пользовательских инструкций — это содержать высокоуровневую информацию о вашем проекте, которая может помочь модели лучше отвечать на ваши вопросы. Например, в 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 может использоваться только в клиентских компонентах". Правильно. Вот где используются файлы подсказок. И поэтому, если у нас много сообщений, они могут быть очень-очень далеко в списке, верно? Может быть, очень далеко здесь. Каждый раз, когда мы используем файл подсказки, он становится частью пользовательской подсказки, а не частью системной подсказки. Теперь вопрос, который вы зададите, имеет ли значение размещение подсказки в иерархии сообщений? И ответ таков: я не знаю. Однако "контекстное гниение" — это реальная вещь. И основная идея заключается в том, что по мере роста и удлинения контекстного окна производительность модели снижается. Это улучшилось со временем. Как подробно описано в статье, оно улучшилось. Но вы все равно можете видеть здесь, что по мере роста контекстного окна, например, подсказка на 32 000 токенов, точность резко падает. Даже Claude 35 Sonnet снижает точность с 88% до 30%. Поэтому важно помнить, что по мере роста вашей подсказки здесь. Итак, если у нас есть системная подсказка, пользовательская подсказка, пользовательское сообщение, затем сообщение ассистента, затем пользовательская подсказка, а затем еще одно сообщение ассистента, потому что мы не начали новый чат. Итак, мы просто продолжаем и продолжаем. Не имеет значения, используете ли вы пользовательские инструкции или файлы подсказок. Производительность или точность модели просто снизится. И это одна из причин, по которой окна токенов или контекстные окна в VS Code ограничены определенным пределом, и это сделано для поддержания производительности. Поэтому трудно ответить на вопрос, будет ли более точным передавать ваши инструкции в виде файла подсказки или пользовательской инструкции. Лучшее, что можно сделать, — это вместо того, чтобы беспокоиться о позиционировании, просто использовать их так, как они разработаны, то есть для помощи вам в составлении рабочих процессов и не беспокоиться об их положении в подсказке. Теперь давайте поговорим о последнем, и это пользовательские агенты. Пользовательские агенты раньше назывались пользовательскими режимами, и я создал один некоторое время назад, который назывался "режим зверя", предназначенный для улучшения работы GPT4.1. И идея здесь в том, что вы можете передавать инструкции для переопределения или дополнения поведения агента по умолчанию. Итак, давайте посмотрим на них. Я хочу посмотреть на один из тех, которые мы сейчас поставляем в Visual Studio Code, а именно на режим планирования. Итак, вы можете нажать "настроить пользовательские агенты" и посмотреть на наш встроенный режим планирования здесь. Итак, давайте посмотрим на режим планирования. Вы можете видеть название и описание, а затем есть эти инструменты, а затем есть эти вещи, называемые "передачами", к которым мы перейдем через секунду. А затем вы можете видеть, что это очень похоже на написание подсказки агента. Это сильно отличается от пользовательских инструкций, верно? Если мы посмотрим на пользовательские инструкции, это отличается. Это просто дает ему информацию. Это дает ему идентичность. Таким образом, это очень похоже на системную подсказку агента. А затем он пройдет и использует рабочий процесс для начала процесса планирования с пользователем. Первый шаг — собрать контекст и провести исследование, затем представить краткий план для итерации, а затем обработать обратную связь пользователя. А затем он даст вам возможность либо реализовать план, либо записать план в редактор, и он делает это через передачи. Итак, давайте фактически запустим это и посмотрим, как это выглядит в действии. Итак, я выберу модель, которая немного лучше планирует. Я использую наш встроенный режим планирования. Итак, давайте сделаем то, что всегда делается в этих демонстрациях. Мы просто добавим темный режим в приложение. Я не знаю, почему это всегда используемая подсказка, но это потому, что она визуальна, и это то, что мы можем видеть. Итак, мы позволим Haiku пройти и проработать этот план. Вы можете увидеть это, а затем мы вернемся и поговорим о том, что на самом деле происходит здесь. Итак, мы используем этот новый агент планирования, и мы отправили эту подсказку. Что на самом деле происходит за кулисами? Давайте вернемся и посмотрим на нашу диаграмму. Итак, когда вы используете пользовательский агент, происходит следующее. Он фактически добавляется в системную подсказку здесь. Итак, давайте освободим место. И пользовательский агент всегда добавляется сюда, под вашими пользовательскими инструкциями. Таков порядок в системной подсказке. Пользовательские инструкции будут добавлены в конец системной подсказки, а затем инструкции пользовательского агента будут добавлены в конец системной подсказки. Они являются последним элементом в системной подсказке агента. Теперь давайте посмотрим, как мы можем использовать пользовательские инструкции, файлы подсказок и пользовательские агенты для составления агентских рабочих процессов, потому что это то, чем они являются. На самом деле нет правильного или неправильного способа их использования. Это просто строительные блоки для составления ваших собственных рабочих процессов, но это не имеет особого смысла в абстракции. Это поможет вам, если вы увидите, как это сделал кто-то другой. Итак, что я хочу сделать сейчас, это показать вам, как я составляю рабочие процессы. Итак, я собираюсь использовать файл подсказки для планирования. У меня есть пользовательский файл подсказки для планирования, а затем я попрошу его переработать пользовательский интерфейс этого приложения, чтобы он стал более чистым и современным. И вы заметите, что первое, что он делает, это переключает нас на Opus45, потому что именно это я определил в файле подсказки. Мы можем фактически посмотреть на это. Если мы пойдем сюда, вот мой файл подсказки. Вы можете видеть, что я определил модель, а затем мой файл подсказки для планирования очень похож на встроенный агент, но мой файл подсказки фактически инструктирует агента работать в концепции ветки. Таким образом, план фактически определяет один PR или одну ветку, и он просто определяет высокоуровневые шаги. Таким образом, он будет делать то, что делает встроенный план, пользовательский агент, например, исследовать кодовую базу и задавать мне вопросы, но формат плана, который он выдает, немного отличается, потому что это всего лишь один из строительных блоков, и это станет более понятным через секунду. Итак, режим планирования завершен, и у нас есть один файл, который был создан, и я автоматически создаю этот файл. У него есть некоторые вопросы, но они незначительные. Ничего, что мне действительно нужно решать. Но вы можете видеть, что он просто разбивает вещи на шаги. Шаг первый, сделайте это. Шаг второй, сделайте это. Идея в том, что каждый из этих шагов — это коммит. И коммиты должны быть небольшими и тестируемыми. И коммиты будут накапливаться и создавать один PR, который мы затем сможем отправить. Однако у нас нет кода. Итак, следующий шаг — фактически получить код. Итак, давайте продолжим и сохраним это. И поскольку мы не хотим контекстного гниения, давайте начнем новую сессию чата здесь. Очистим контекст. Итак, теперь я собираюсь сделать кое-что уникальное. Вместо того, чтобы фактически реализовывать план, я попрошу его сгенерировать документ на основе этого плана. А затем я просто передам файл плана здесь. Итак, в данном случае я использую подсказку "сгенерировать" и передаю план, который мы только что создали. И я объясню, что он делает. Таким образом, подсказка "сгенерировать" берет план, а затем пишет весь код, необходимый для реализации этого плана, но она не пишет этот код в проекте. Она фактически пишет его в файле markdown шаг за шагом. И причина, по которой я это делаю, заключается в том, что я пытаюсь максимально использовать свой премиальный тариф. Я уже дважды использовал Claude Opus 45. Это множитель 3x. Шесть премиальных запросов. Я хочу убедиться, что получаю максимальную отдачу от своих денег. Поэтому я фактически собираюсь использовать меньшую модель для реализации и большую модель для написания кода. Меньшая модель будет реализовывать, а большая модель будет писать. Итак, через секунду мы посмотрим на этот план реализации и вы увидите, как именно это работает. Это не сложно. План реализации, который генерируется, длинный. Он очень длинный. Этот почти на 2000 строк, но вы можете видеть, что каждый фрагмент кода, необходимый для выполнения этой задачи, фактически находится в этом файле. Но что более важно здесь, так это то, что все они разбиты на шаги. И каждый шаг имеет здесь флажок. Итак, теперь, когда у нас есть это, мы снова очистим контекстное окно, максимально эффективно используя наш контекст. И теперь мы собираемся использовать пользовательский агент, который просто называется "реализовать". И все, что нам нужно сделать, это передать план реализации здесь, вот так, и дать ему простую подсказку, а затем мы просто отправляем его. И вы можете видеть, что он автоматически переключается на VS Code Prime или Raptor Prime, который является вариантом с пятью мини-моделями, и это модель, которую я люблю использовать для реализации. Итак, мы продолжим и отправим это. Теперь, пока эта меньшая модель работает с этим документом, она будет реализовывать то, что находится в документе, дословно. Она фактически не пишет никакого кода. Она просто реализует код, написанный большой моделью. И эта стратегия позволяет вам как бы одним выстрелом использовать огромную модель, а затем реализовывать и итерировать с небольшой бесплатной моделью. И эта модель будет продолжать работать до тех пор, пока не завершит любой шаг, на котором она находится в плане реализации. А затем она остановится и вернет управление мне, чтобы я мог протестировать, убедиться, что мне это нравится, а затем я просто подготовлю и закоммичу. А затем я просто повторю то, что сделал. Использую агент реализации, передам документ реализации, и он просто продолжит с шага два и так далее. И я буду итерировать с ним таким образом, пока мы не дойдем до конца реализации и все не заработает. И тогда у меня будет пул-реквест, которым я буду очень доволен. Итак, теперь у вас есть очень хорошее понимание того, что происходит за кулисами для агента в VS Code. Вы понимаете системную подсказку агента и как добавляются пользовательские подсказки, и где пользовательские инструкции и файлы подсказок фактически находятся в этой подсказке. Идите и создавайте ИИ-рабочие процессы, которые работают для вас. Я размещу ссылки на свои ниже и проверьте репозиторий Awesome Copilot, где вы найдете мои рабочие процессы, а также множество других файлов подсказок, инструкций и пользовательских агентов, которые вы можете использовать сегодня. И, как всегда, счастливого кодирования.