Transcription
В этом видео мы рассмотрим различия между вайб-кодингом, промпт-инжинирингом и промпт-ориентированной разработкой. Сосредоточившись на промпт-ориентированной разработке, мы исследуем некоторые функции VS Code, которые облегчают работу с промптами, такие как пользовательский режим, файлы промптов, Copilot Vision и многое другое. Итак, давайте приступим.
В последнее время с развитием ИИ появилось много новых терминов, касающихся того, как мы фактически пишем код. Появляются разные стили: некоторые игривые, некоторые структурированные, а некоторые становятся полноценными методологиями. И в этом сегменте я хочу разобрать несколько из них, чтобы вы могли увидеть, где они пересекаются, где различаются и как вы можете использовать их в своем рабочем процессе. Конкретно, те, о которых я собираюсь говорить, это вайб-кодинг, промпт-инжиниринг и промпт-ориентированная разработка.
Теперь давайте начнем с вайб-кодинга. Это, по сути, когда вы пишете код интуитивно. Просто следуете потоку и пишете то, что кажется правильным. Это творчески, экспериментально и весело. Но результаты могут быть непоследовательными и не всегда повторяемыми. Интересный факт: термин "вайб-кодинг" был фактически придуман Андреем Карпатым в вирусном посте, описывающем его как подход, при котором разработчики поддаются "вайбам" и используют естественные языковые промпты для управления большими языковыми моделями, полагаясь на интуицию и намерение, а не на детальные структуры кода.
Далее идет промпт-инжиниринг. Вместо того, чтобы просто следовать "вайбам", здесь вы действуете намеренно. Вы тщательно составляете промпты, структурированные входные данные, предназначенные для направления ИИ к конкретным, предсказуемым результатам. Думайте об этом как о переходе от набросков к черновикам. За дизайном стоит больше намерений.
И наконец, есть промпт-ориентированная разработка. Это не просто составление отдельных промптов. Это рассмотрение промптов как части дисциплинированного процесса разработки. В идеале промпты тестируются, версионируются, документируются и совершенствуются со временем. Вы не просто просите ИИ о помощи. Вы строите рабочий процесс, где промпты являются строительными блоками вашего кодовой базы. И промпт-ориентированная разработка будет фокусом этого видео.
И я хочу упомянуть, что подход к промпт-ориентированной разработке одного человека может сильно отличаться от подхода другого. Так что не думайте, что вам нужно строго следовать книге. То, чем я собираюсь поделиться, — это то, что я считаю своим стилем. Но в целом, это похоже на программирование. У всех нас могут быть разные стили программирования, но есть общие лучшие практики, которые мы хотим выработать, когда дело доходит до промпт-ориентированной разработки.
Прежде чем что-либо делать, вам нужно иметь представление о том, что вы собираетесь делать, верно? Ну, я хочу показать вам, как вы можете использовать VS Code для простого мозгового штурма идей для того, что мы могли бы создать. Итак, я собираюсь открыть папку. И поскольку мы сосредоточены на духе лучших практик, я хочу показать вам, как я делаю вещи, по крайней мере, с моей стороны. Мне нравится иметь мои проекты в папке dev. И для этого конкретного проекта я назову его, как мне его назвать? Иногда у вас нет названия фильма. "Untitled promptdriven development project". И мы можем переименовать его позже. Давайте откроем эту папку.
Я хочу попросить C-Pilot дать мне несколько идей для приложений, которые я мог бы создать и которые, возможно, смогу преобразовать в мобильное приложение. Так что, по сути, мы будем использовать его для мозгового штурма идей, а затем мы как бы документируем некоторые высокоуровневые шаги для начала. Можете ли вы дать мне 10 идей для приложений, которые я могу создать сначала как веб-сайт, а затем позже превратить в мобильное приложение? Давайте посмотрим, что он нам даст. И я буду использовать это для вдохновения, так как я могу не принять именно те идеи, которые он даст, но это может дать мне некоторое руководство. Итак, посмотрим здесь. Рынок местных услуг, ищется рынок для уборки, репетиторства. Хорошо, я вижу персональный финансовый бюджетный дашборд. Отлично. Общественный центр знаний. Интересные знания. Это наводит меня на мысль об академической среде, что наводит меня на мысль об учебе, планировании мероприятий. Хорошо. Интересно. Платформа микрообучения для команд, короткие курсы, модули, викторины. Видите? Это напоминает мне, когда я учился в школе или просто готовился к собеседованиям, особенно в технической сфере. Карточки. Я помню, как искал приложения для карточек, и многие из них были просто очень запутанными. Было бы неплохо иметь простое. Так почему бы нам этого не сделать? Микрообучение, как приложение для карточек, чтобы выучить что-то, верно?
Теперь я попрошу его создать мне небольшой план документации. Хорошо. Думаю, я хочу создать приложение для карточек, веб-версию. Можете ли вы создать файл markdown с некоторыми высокоуровневыми начальными шагами, которые я могу предпринять в виде промптов, которые я могу рассмотреть для использования? На этом остановимся. Я буквально только что думал об этом, когда пришла идея. Итак, посмотрим, что получится. Но это будет мой шаг. Обычно я люблю иметь какое-то руководство. Иногда я делаю вещи в Word или Google Doc, но приятно иметь возможность делать это и в Markdown, потому что тогда вы можете сохранить свой процесс, особенно если вы собираетесь поделиться им с командой, и сохранить его на GitHub. Итак, посмотрим здесь. Карточки, веб-приложение, начальные шаги и список промптов. Посмотрите на это. Краткие промпты, которые вы можете использовать для определения масштаба, проектирования, создания, а затем преобразования веб-версии приложения для карточек в мобильное. Это безумие. Это так хорошо.
Итак, до сих пор мы использовали VS Code для мозгового штурма идеи приложения, а затем использовали его как инструмент для письма, чтобы получить первоначальный черновик нашего подхода к созданию нашего приложения. Высокоуровневая документация. Итак, я отойду, просмотрю это, а затем вернемся к нашему следующему шагу.
Теперь, после просмотра этого, мне нравится то, что здесь есть, но это немного более абстрактно, чем мне хотелось бы. На самом деле я искал промпты, которые направят меня через процесс создания моего веб-приложения для карточек. Поэтому я попрошу его изменить и модифицировать это. И это одна из вещей, которые вы поймете. Чем больше вы становитесь искушенными в промпт-ориентированной разработке, тем больше вы осознаете важность повторного промптинга. Редко бывает так, что вы можете просто сделать свой первый промпт, и он сразу же будет идеальным. Часто приходится модифицировать промпт. Но прежде чем я модифицирую это, здесь есть несколько жемчужин, которые я хотел бы сохранить. Итак, я сохраню это на GitHub. Я хочу показать вам, как вы можете сделать это прямо из VS Code. И давайте просто используем голосовой чат для этого. Давайте сохраним это в VS Code. Я имею в виду, давайте сохраним это на GitHub, но также мне нужно, чтобы вы инициализировали для меня репозиторий под названием "Flashcard web version". Я остановлю это, нажав кнопку остановки здесь. Он не закончил мое предложение. И это важно. Давайте сделаем это снова. Давайте сохраним это на GitHub. И я хотел бы убедиться, что вы создадите для меня репозиторий, поскольку он еще не существует. И мы назовем это "flashcard". Пока этого достаточно.
Итак, он просит меня подтвердить это, что я очень ценю, даже несмотря на то, что мы в режиме агента. В режиме агента он выполняет много задач подряд, но когда дело доходит до некоторых важных частей, он просит вас подтвердить. Итак, я хочу убедиться, что он знает, что я хочу, чтобы он назывался. Я хочу лучшее имя. На самом деле, я просто назову его "flashcard web app". Фактически, давайте дадим ему более приятное имя. Это немного более запоминающееся. "Simple flashcard web". Хорошо, пока все выглядит хорошо. И кстати, я должен упомянуть, что я вошел в свою учетную запись GitHub, что вы можете сделать и здесь.
Похоже, ему не удалось создать репозиторий на GitHub, но он может сделать это локально. Итак, я собираюсь сделать это локально, а затем мы будем устранять неполадки и попытаемся заставить его сделать это на GitHub. Он спросил меня, хочу ли я репозиторий приватным или публичным. Я сказал публичным. И да, я хотел, чтобы он запустил команды CLI, чтобы начать. Хорошо, мы смотрим на эти команды здесь, и они выглядят хорошо. Итак, давайте продолжим. Я нажму на значок управления исходным кодом слева, чтобы мы могли видеть, где находятся вещи. И теперь я проверю статус репозитория. В последнем коммите он хочет, чтобы я подтвердил, что GitHub CLI установлен и аутентифицирован. Как вы хотите, чтобы я подтвердил, что GitHub CLI установлен и аутентифицирован? У меня есть свои способы, но я хочу увидеть, что он ожидает. Хорошо, gh. Итак, используя чат, я общался туда и обратно, пока он направлял меня через шаги, которые мне нужно было предпринять, чтобы отправить его в мой новый репозиторий. И в итоге это результат.
Хорошо. Итак, теперь, когда это сохранено на GitHub, я хочу изменить эти шаги. Мне нравится то, что вы дали мне до сих пор, но это немного слишком высокоуровнево. Можете ли вы просто дать мне серию шагов, которые я могу... Можете ли вы дать мне серию промптов, которые я могу использовать шаг за шагом для создания веб-версии приложения для карточек, которое я позже смогу превратить в мобильное приложение? Хорошо. Он дал мне шаги, но вы заметите, что он не поместил это в файл markdown. На самом деле я хотел изменить файл markdown. Так что я скажу ему сделать это. И я также укажу пару функций, которые я хочу. И это красота этого. Это танец туда и обратно с вашим программным обеспечением о том, как и лучше всего сообщить ему свои мысли. Можете ли вы переписать это, а также включить тот факт, что я хотел бы иметь категории в моем приложении для карточек для разных тем, а также поместить все это в файл markdown, который вы уже создали ранее? Я хочу, чтобы вы обновили его этим новым контентом, этим пошаговым подходом. Хорошо, я думаю, надеюсь, это сделает свое дело. Посмотрите на это. Вот оно. Он обновляет markdown, похоже. И теперь я не ожидаю, что это будет идеально, но это будет намного ближе к тому, что я хочу. Хорошо, обновленные начальные шаги для карточек в корне проекта с расширенным пошаговым планом, который включает категории, темы. Давайте сохраним это. Посмотрите сюда. Хорошо, видение и категории, метрики доступа, высокоуровневая информация. Хорошо, теперь мы приступим к созданию этого приложения, ссылаясь на этот документ. Итак, посмотрим, как это получится.
На основе документа, который у нас есть в рабочей области, давайте создадим веб-приложение для приложения карточек. Знаете, что в этом хорошо? Даже если вы можете... спотыкаться на словах, он просто понимает, что вы собираетесь сказать. Чаще всего у вас должен быть доступ к тому, что я отправил на GitHub, и вы увидите, что там упоминается стек, например, для пункта номер пять, стек и архитектура, которые будут React плюс Vite app или NexJS. Думаю, посмотрим, что он в итоге выберет. Nex.js плюс TypeScript. Хорошо, судя по файлам, похоже, что Vite задействован. Тем временем, пока это работает, я очищу свой терминал. Хорошо, теперь он создал приложение и попросил меня отправить его на GitHub, но я хочу сначала посмотреть, работает ли оно, если оно закончено. Можем ли мы протестировать приложение перед отправкой на GitHub? Хорошо, нам придется установить некоторые зависимости. Так что давайте сделаем это. Я имею в виду, нет смысла сохранять это на GitHub, верно? Особенно если это еще не будет работать или если есть какая-то проблема, о которой мы не знаем. Хорошо, похоже, установка завершена. Так что давайте запустим приложение. Хорошо, укажите правильный путь. Нам нужно выполнить npm rundev. И вот наш первый взгляд. Не очень красиво. Я имею в виду, давайте посмотрим, как это вообще работает. Что означает mcp? Хорошо, это превратилось в ссылку. О, я вижу, это была колода. И так, передняя и задняя сторона. Так вот где я бы поставил вопрос. Что означает MCP? А затем ответ будет: "model context protocol". Я вижу. Так что мы сохраняем карточку. О, посмотрите на это. А затем вы можете начать учебную сессию. Вот так. Что означает MCP? Раскрыть "model context protocol". О, как мило. Для чего эти цифры здесь? Я не уверен, для чего это. Хорошо, круто. Ну, я имею в виду, это начало. Хорошо, давайте остановим это и попросим сделать его более современным. Приложение выглядит нормально. Оно пока функционально, но можете ли вы сделать его современным? Оно выглядит слишком простым. Добавьте ему немного изюминки. Одна из практик, которой я люблю следовать, — это убедиться, что мы часто сохраняемся, когда видим, что вещи работают так, как мы ожидаем. Хорошо, он говорит, что сделано. У меня есть index html, и я заменил таблицу стилей на более современный, отполированный дизайн. Хорошо. Ну, давайте скажем "сохранить" и снова запустим приложение. Ну, это выглядит немного лучше, не так ли? Давайте нажмем сюда. Хорошо, мы можем добавить сюда больше вопросов. Это действительно выглядит лучше. Но мне нужна возможность изменить... изменить это, скажем, если я хочу изменить это. Я не вижу, где мы могли бы это отредактировать. Это функция, которую мы могли бы добавить. Пока не беспокойтесь. Давайте сохраним это, а затем добавим функции дальше. Отправить на GitHub.
Хорошо. Итак, мы на хорошем старте, и мы фактически сделали много, но давайте поговорим о некоторых других функциях и поэкспериментируем с другими моделями. Теперь, прежде чем мы продолжим, я хочу показать вам кое-что, что называется новой функцией, которую мы называем пользовательским режимом чата. И причина, по которой я хочу показать вам это, заключается в том, что, хотя я и оценил высокоуровневые шаги, которые дал Copilot, я хочу быть немного более конкретным и не хочу постоянно спрашивать его для будущих проектов. Итак, если мы перейдем к нашим опциям, где мы можем переключиться с "agent" на "ask" и "edit", вы увидите, что есть опция "configure modes", и мы можем создать то, что называется новым режимом чата, пользовательским режимом чата. Если я выберу папку "user data", я могу дать ему имя, такое как "plan mode". И здесь вы можете дать ему описание и указать инструменты, которые он использует, а затем определить цель для этого чата. Если вы хотите узнать больше о том, как работают режимы чата, у нас есть отличная документация прямо здесь. "Chat modes in VS Code". И прямо здесь "custom chat modes". Объясняется структура файлов. Теперь, ради экономии времени, я скопирую и вставлю то, что я уже создал, что, по сути, говорит ему упрощать высокоуровневые планы, рефакторить их. И я даю подробные инструкции о том, как это сделать. Как вы видите, у меня есть инструкции для "plan mode", цель этой задачи, некоторые ограничения, а также то, как я хочу, чтобы вывод выглядел. Итак, я закрою это и изменю на "plan mode". А затем я спрошу: "Можете ли вы рефакторить файл markdown под названием 'flashcards initial steps' так, чтобы он был рефакторен на основе моих настроек 'plan mode'?" Теперь, вероятно, мне даже не нужно было этого упоминать, но я сделал это. Хорошо. И это то, что я хотел, чтобы он сделал. Итак, теперь я скажу ему поместить это в markdown. Смотрите, на этот раз он дает конкретные промпты, которые я могу просто скопировать и вставить в Copilot. Так что в будущем, если я захочу передать это кому-то для воссоздания, это будет намного проще. В то время как здесь очень многословно. Вы видите, он говорит выбрать три метрики, он задает вам вопросы, на которые вам нужно ответить, чтобы иметь возможность записать их отдельно, а затем придумать промпты. Продолжайте и замените весь markdown тем, что вы только что мне дали. О, вы заметили? Он говорит, что не может сделать это сейчас, потому что это отключено. Ну, это потому, что я... я вставил это в инструкции. Так что я могу фактически просто прийти сюда сейчас, скопировать это и вставить все в markdown. И вот оно. И теперь я могу просто переключить это обратно в режим агента. Но это быстрый обзор того, как работают пользовательские режимы чата. У вас может быть один, настроенный для исследовательских целей, и целый ряд других сценариев. Теперь я сохраню это, отправлю на GitHub офлайн и перейду к следующему шагу, который заключается в добавлении некоторых функций с использованием того, что называется файлами промптов.
Хорошо, мы запускаем наше приложение, и я хочу добавить функцию удаления любых колод, которые мы создали. Что я собираюсь сделать, это сделать снимок экрана здесь. А затем в чате я перетащу этот снимок экрана сюда. И вы заметите, что мы можем перетаскивать изображения в чат и задавать вопросы на их основе. Так что я попрошу его дать мне функцию редактирования, чтобы переименовать колоду, которую мы смотрим. На основе изображения вы видите, что там есть вопрос. Я хочу, чтобы мы могли переименовать этот вопрос. Он слишком быстро меня оборвал, но понял, что у него нет всей необходимой информации. Я хотел бы, чтобы вы добавили функцию, чтобы мы могли переименовать этот вопрос, который является колодой. Так что, пожалуйста, добавьте эту функцию. Так что мы можем переименовать и даже удалить колоду. Итак, то, что мы сейчас отображаем, — это возможность использовать Copilot Vision для просмотра изображения, а затем давать ему команду на его основе. Похоже, он вносит некоторые изменения. Давайте протестируем функцию перед сохранением ее на GitHub. Он немного слишком рьяно сохраняет вещи на GitHub. Я понимаю, что это важно, но мы хотим убедиться, что мы сохраняем работающий код. Хорошо. Ну, давайте посмотрим, как это работает. О, вау. Вот так. Довольно круто. Давайте изменим это на "technology". Даже есть небольшой раздел заметок для описания. Вопросы по разработке программного обеспечения. Давайте добавим еще один вопрос. Что означает VS? JavaScript. Круто. Давайте начнем учебную сессию. MCP. Давайте раскроем "model context protocol". Хорошо, давайте выберем пять здесь. Что означает GS? JavaScript. Теперь мне нужно снова посмотреть спецификации, как я разработал эту программу. Но я полагаю, это, вероятно, показывает, насколько хорошо вы знаете материал. Так что, если я пять, он, возможно, не задаст вопрос снова. Если я ноль, он, вероятно, сделает это, что довольно круто. Но я выберу пять на данный момент.
Прежде чем закончить, я хочу немного исправить заголовок. Мы можем сделать немного этой работы по UI, просто зайдя сюда и добавив немного пространства между этими словами. И я собираюсь разместить все это на GitHub. И я хотел бы, чтобы вы, ребята, не стеснялись вносить предложения либо через GitHub через pull request, либо в комментариях. Какие функции вы хотели бы видеть, если бы это было преобразовано в мобильное приложение? И я могу учесть некоторые из них. И это все для этого введения в промпт-ориентированную разработку. Если вы нашли это видео полезным, не стесняйтесь нажать кнопку "лайк" и "подписаться" и дайте мне знать в комментариях, какие другие темы вы хотели бы увидеть, связанные с промпт-ориентированной разработкой. И прежде чем вы уйдете, не стесняйтесь посмотреть это видео здесь тоже. На этом все, и увидимся в следующем.