Transcription
Cursor AI только что выпустил новое обновление, которое делает так, что вам действительно больше не нужно знать, как кодировать. В этом видео я докажу это вам, скопировав эту точную целевую страницу от Stripe. Все эти разделы, все эти части, всё. И, проще говоря, я не напишу ни строчки кода. Я буду использовать промпты для всего. Это должно доказать вам, что мы живем в новую эпоху, и это просто смешно. С возвращением, ребята. В сегодняшнем видео я покажу вам, как использовать возможности агентов Cursor с другой возможностью, которая делает его абсолютно смешным, когда дело доходит до фронтенд-разработки. Прежде всего, давайте просто создадим новый проект. Открыть проект. Просто назовите эту папку. Как это возможно? Прежде всего, давайте просто создадим наш текстовый стек. Я буду использовать приложение React. Я просто введу "создать приложение React". Это холст, на котором мы будем рисовать и показывать вам этот сумасшедший вариант использования, который я только что нашел. Что еще более сумасшедшее, так это то, что этот вариант использования буквально не был возможен еще пару недель назад. Прежде всего, этот простой промпт построит всю мою инфраструктуру для моего приложения. Удивительно, как далеко мы продвинулись, ребята. Это включает в себя установку всех соответствующих зависимостей, но это еще не магия. Это просто безумие. Сначала я просто скажу "запустить приложение", чтобы мы могли увидеть это в браузере. Он дает мне соответствующую ссылку здесь. И вот с чего все началось. Теперь давайте займемся безумием. Создать новый чат. И это наше текущее приложение. Но позвольте мне показать вам эту новую функцию. Прежде всего, чтобы это работало максимально функционально, перейдите сюда к команде "pass". Обратите внимание, что здесь написано "run everything". Убедитесь, что это выбрано. Нажмите "continue". Это сделано для того, чтобы вам, по сути, не пришлось ничего писать. Никакого кода, ничего. Нажмите "new chat". Включить браузер. Когда браузер будет включен здесь, посмотрите на этот промпт. Я просто скажу, что наш текущий веб-сайт — это ссылка, которую мы только что видели там. Я хочу, чтобы этот сайт выглядел точно так же, как эта страница. Предоставьте ссылку на веб-сайт. Это был соответствующий веб-сайт. Загрузите все необходимые для этого зависимости для значков. Можно использовать бесплатные значки из Font Awesome. Вы спрашиваете себя: "Корбин, как ты это узнал?" Спросите у чата ChatGPT. Но, по сути, это бесплатная библиотека, которая использует значки, которые мы можем использовать во всем нашем фронтенде. Что такое значок? Примером значка является эта маленькая галочка здесь. Использование чего-то вроде Font Awesome позволяет нам получить доступ ко всем этим бесплатным значкам. Главное, однако, при выполнении такого рабочего процесса, который вы сейчас увидите, включите эту строку. Также включите другие зависимости, которые могут быть для вас актуальны, например, интеграцию Stripe. Пока же смотрите на магию. Введите. На самом деле, есть еще одна последняя вещь, которую я забыл добавить. Этот промпт фундаментально очень важен. Не прекращайте кодирование, пока наше приложение не будет выглядеть точно так же, как, а затем снова дайте ссылку. Введите. Первое, что он сделает, это откроет инкогнито-браузер, чтобы я мог визуально видеть обе эти страницы. Далее он фактически создаст список дел для выполнения точных шагов. Поэтому он позволяет мне, пока это происходит, просто нажать на это и сказать: "Где ты, агент? Ты еще не закончил? Я быстро выпью кофе." Если он не откроет ссылку, просто скажите: "Открой обе ссылки для визуального контекста. Введите." И это будет поставлено в очередь. Если в процессе разработки вы хотите убедиться, что он прочитает это перед тем, как делать что-либо еще. Просто нажмите "submit now". И посмотрите на это. Он сейчас открывает сайт. Он откроется прямо здесь. И он будет функционально способен делать скриншоты и вносить наши изменения здесь. И просто смотрите на магию. Он перешел на конкретную страницу Stripe. Сделал там скриншот, чтобы понять контекст. Это безумие, ребята. Прошли те дни, когда нам приходилось делать скриншоты очень специфических компонентов. Перетаскивать их туда и обратно. Нет, нет, нет. Он просто работает. Я позволю этому агенту работать здесь. Когда я пойду есть, и когда я вернусь, я гарантирую, что все будет сделано. Так что имейте в виду, что у нас буквально есть автономный AI-разработчик, которому может потребоваться 10-15 минут, чтобы закодировать выполненную задачу. Но что сейчас безумно, так это то, что он фактически закодирует это. Теперь я хочу, чтобы вы заметили это. Я пока не вводил никаких данных. Вау. И это еще не конец. Он переключается между страницей Stripe и моей страницей. Копирование, вставка, скриншот, имитация. Все сделано. Я ничего не трогаю, ребята. Обязательно поставьте лайк. Это совершенно бесплатно. И это еще не конец, ребята. В конце этого рабочего процесса мы сравним бок о бок и посмотрим, каковы различия и почему эти различия вообще возникли. Итак, теперь он дважды проверяет свою работу. Он вернулся на страницу цен Stripe.com, а затем вернется на нашу страницу и внесет внезапные изменения. Когда он закончит, мы получим подтверждение здесь. Это не шутка, ребята. Во-первых, это заняло всего 37% контекста. Одна вещь, которую вам нужно знать об этом рабочем процессе, заключается в том, что вы можете углубляться в очень, очень глубокие кроличьи норы, и он просто обобщит этот контекст и позволит вам продолжать промптинг. Давайте посмотрим на это бок о бок. Итак, вот оно, ребята. Это официальный сайт Stripe, и это приложение, которое мы создали менее чем за пять минут, используя эту новую функцию Cursor AI. Прокручивая вниз, мы видим первый раздел: функции, доступные из коробки. Одна вещь, которую я хочу, чтобы вы отметили, это то, что он буквально получил точный текст. Безумие. Теперь, да, некоторые из вас могут сказать: "Корбин, это не выглядит хорошо". Просто перепромптите агента и скажите ему конкретно исправить это, чтобы это выглядело так. Прокручивая вниз. Отлично. Первый шаг сделан. Прокручивая вниз. Он смог получить все соответствующие различные UI-карты и продолжайте прокручивать вниз, и мы смогли получить похожий футер, как у Stripe. Теперь, да, это не точная копия, но, как вы, вероятно, могли бы сказать, если бы я потратил следующий час, просто переходя туда и обратно, используя этот метод, я, вероятно, получил бы точную такую же страницу. И я сделал все это, не написав ни строчки кода. Так что, если вы хотите узнать больше таких методов, обязательно подпишитесь здесь. Обязательно поставьте лайк. Это совершенно бесплатно. Я делаю много всего на этом канале в эту новую эпоху кодирования, где мы не учим этому так, как это было в 2017 году, когда вы смотрите видео, инструктор скучный, инструктор, по сути, пишет кучу кода, который нам больше не нужен. Это новая эра кодирования. Так что обязательно загляните сюда. Также я предоставляю кучу бесплатного исходного кода, и это последнее, что вам стоит посмотреть в этом видео. Если вы такой же строитель, как я, загляните в сообщество ниже. Вступить совершенно бесплатно. Думайте об этом как о форме Reddit, которая позволяет нам задавать вопросы, сообщать об ошибках, с которыми вы сталкиваетесь. Мы помогаем друг другу. Все, что вы, возможно, когда-либо полюбите в AI в эту новую эпоху. Проверьте это в описании. И некоторые из вас могут сказать: "Корбин, где тот бесплатный код, о котором ты говорил? Тот исходный код." Ну, я выкладываю разные вещи в своем X. Так что проверьте мой X. Хорошо. Мы только что выпустили новую вещь для Claude skill. Если вы не знаете, что это такое, загляните на мой канал сюда. Я даю вам все. И я смог создать бесплатный для скачивания навык, который вы можете использовать прямо сейчас в своем Claude. И вот оно. Как вы уже знаете по таким видео, увидимся в следующем. Убил ли Cursor AI с этой новой функцией все фронтенд-рабочие места? И фронтенд-рабочие места просто "приготовлены" на рынке труда. Лучше.