📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Claude Code for Desktop is the BEST way to build apps with AI EVER

Alex Finn14:03

Transcription

Приложение Claude Code Desktop — это абсолютный лучший способ создавать приложения с помощью ИИ, но только если вы используете его правильно. В этом видео я расскажу обо всем приложении Claude Code Desktop, дам вам мастер-рабочий процесс, который увеличит скорость создания приложений с помощью ИИ в 10 раз, даже если вы никогда в жизни не писали код. Давайте приступим. Итак, это приложение Claude Code Desktop. Оно уже доступно для Mac. Просто зайдите на claude.ai, скачайте настольное приложение, и вы увидите эту новую кнопку прямо здесь. Это раздел Claude Code. Это раздел чата Claude, где вы видите все свои чаты. Это раздел кода Claude, и это абсолютно невероятно. Но есть множество мелких скрытых вещей, о которых вам нужно знать. Я расскажу о том, как чат Claude, код Claude, а также агенты Claude, с которыми вы можете работать, связаны между собой, и как получить от них максимум пользы в этом приложении, а также обо всех мелких секретах и кнопках, которые они добавляют, но которые вы не можете по-настоящему увидеть. Итак, давайте сделаем это. Давайте вместе создадим приложение. Я покажу вам свой мастер-рабочий процесс и все, что вы можете сделать. Итак, я начну с Claude Code, и мы выберем папку, в которой будем работать. Мы будем создавать приложение-холст. Так что, если вы смотрели мои видео раньше, вы знаете, что я использую это приложение-холст под названием Excal, которое позволяет мне рисовать, печатать и добавлять изображения на холст, что делает мою организацию и видео более графичными и интерактивными. Я просто создам свою собственную версию этого, и вы можете сделать это вместе со мной. Так что не стесняйтесь открыть Claude Code Desktop, и мы сделаем это вместе. Итак, я открываю новую папку здесь, и теперь мы готовы. Мы готовы начать работу с Claude Code. Вот подсказка, которую я собираюсь использовать. Итак, мы находимся в нашей новой папке. Мы находимся в локальном рабочем дереве, что означает, что мы будем кодировать локально, как вы обычно делаете с Claude Code. Мы перейдем к облачным агентам и всему такому, что будет потрясающе. Я хочу создать приложение с бесконечным холстом, где я могу рисовать мышью, добавлять текст, добавлять различные фигуры, менять цвета, добавлять изображения и использовать его как бесконечный творческий холст. Давайте используем Nex.js и локальное хранилище для этого, а также любые другие библиотеки, которые вы считаете подходящими. Сначала дайте мне знать, какие библиотеки вы считаете подходящими. Итак, я размещу эту подсказку ниже. Не стесняйтесь копировать и вставлять ее. Если вы будете следовать за мной, у вас будет отличное приложение, которое вы сможете использовать самостоятельно. Сначала я просто хотел узнать, какие библиотеки нужны для этого приложения с бесконечным холстом. Это различные технические библиотеки. Вам не нужно быть техническим, чтобы понять это. Мне просто интересно, как Claude хочет подойти к этому. Я нажму отправить. Я буду использовать Opus 45, потому что это лучшая модель для кодирования, и она также стоит столько же, сколько Sonnet 45 в Claude Code. Так что мы получаем тот же лимит. Так что лучше использовать лучшую модель. Я нажму отправить. Я доверяю этому рабочему пространству, и Claude Code Desktop приступит к работе. Через секунду я покажу вам действительно удивительные вещи, которые возможны только в Claude Code Desktop, но он приступит к работе и сначала начнет планировать это. Вот одна вещь, которую вам нужно знать о Claude Code Desktop, которая отличается от всего остального. На данный момент в Claude Code Desktop нет режима планирования. Я спросил некоторых людей из Anthropic, почему это так. Они сказали, что это произойдет очень, очень скоро. Итак, вот обходной путь, который я придумал. Вы увидите эти две кнопки внизу, и мы подробнее рассмотрим их через секунду, но вам нужно открыть терминал. Итак, Claude Code Desktop на самом деле является просто оболочкой для вашего терминала. Он буквально берет ваш терминал, все, что вы делаете, выполняется в нем, а затем просто оборачивает это в этот очень приятный пользовательский интерфейс внутри настольного приложения Claude. Итак, чтобы получить режим планирования, мы откроем CLI. Я знаю, что это выглядит пугающе. Не волнуйтесь. Теперь, когда мы здесь, мы можем нажать Shift Tab, Shift Tab. Теперь мы в режиме планирования. У вас также есть приятный режим мышления, который здесь совершенно новый. Вам нужно нажать Tab, чтобы включить режим мышления. Так что вы получите немного больше пользы от вашего планирования. И теперь мы просто скажем: "Хорошо, это выглядит отлично. Пожалуйста, составьте мне план". И я нажму Enter. И вот как мы получим режим планирования. Это всего лишь временный обходной путь. Скоро они добавят его нативно в приложение. Но если вы хотите использовать Claude Code Desktop и хотите использовать режим планирования, вот как это сделать. Откройте CLI. Shift Tab. Shift Tab. Мы получим план здесь. Мы его примем. А затем мы перейдем обратно в настольное приложение. Так что мы получим этот очень приятный пользовательский интерфейс. И вуаля. Просто так, за секунды. Это действительно поражает, что Opus значительно быстрее, чем Sonnet. И он в 10 раз умнее. Это действительно поражает меня каждый раз, когда я это вижу. Итак, вот план. Он создаст приложение Next.js. Он установит зависимости. Он настроит все управление состоянием. Куча технических вещей, о которых вам не нужно знать. Создаст инструменты для рисования. Функции загрузки изображений, все, что нам нужно. Панель инструментов сборки. Мне нравится. Да, и автоматическое принятие. И он приступит к работе. Итак, похоже, он быстро закончил V1 приложения. Давайте посмотрим, как это выглядит здесь. И это очень похоже на Excalibur. Давайте посмотрим, можем ли мы рисовать здесь. Да, вы можете рисовать. Давайте посмотрим, можем ли мы ставить прямоугольники. Мы можем ставить прямоугольники. Отлично. Итак, теперь, когда мы это сделали, давайте переключимся обратно в режим чата. Что мы сделаем, так это возьмем нашу исходную подсказку. Я зайду в режим чата. И любой, кто меня знает и смотрел мои видео, кстати, если это ваше первое видео от меня, спуститесь вниз, нажмите "Подписаться", включите уведомления, поставьте лайк. Я всегда создаю со-пилота CEO для каждого приложения, которое я строю. Обычно мне приходится постоянно переключаться между несколькими окнами. Claude Code, Visual Studio, приложение Claude Desktop, приложение Chat GPT. Теперь, благодаря Claude Code Desktop, у нас есть чат и Claude Code в одном и том же окне, что делает это в 100 раз проще. Итак, я начну новый чат в Claude. Мы сделаем это под Opus 45, потому что, опять же, лучшая модель в мире. Я работаю над новым приложением. Это приложение с бесконечным холстом. Вот подсказка, которую я использую с Claude Code. Затем я перейду под нее и скажу: "Я хочу, чтобы ты был моим со-пилотом CEO для этого приложения. Что ты думаешь об идее и какие функции ты бы добавил?" Я просто поставлю это в кавычки, а затем нажму отправить. И мы настроили нашего со-пилота CEO в том же окне, в котором мы кодируем. Так что у нас есть вся наша команда, все наши сотрудники в этом одном настольном приложении Claude, что потрясающе. Что я сделаю здесь, так это получим кучу идей от CEO. Мы возьмем эти идеи и поместим их в Claude Code и запустим агентов в Интернете и запустим агентов локально. Это действительно крутой рабочий процесс, который делает все в 10 раз проще, и вам следует его использовать. Итак, снова, номер один, начните свое приложение в Claude Code. Номер два, перейдите в раздел чата, а затем начните своего со-пилота CEO, чтобы начать разработку идей для вашего приложения. Итак, хорошо, давайте зайдем сюда. Каков твой угол? Итак, CEO говорит, что мы должны найти интересный угол для нашего холста, поскольку существует множество других приложений-холстов. Нативный ИИ-холст генерирует изображения, мозговой штурм и идеи автоматической компоновки в Claude. Это действительно умная идея. Что, если мы сделаем так, чтобы в нашем холсте появилась новая кнопка ИИ, где мы можем генерировать изображения, которые попадают прямо на наш холст с помощью, например, нано банана? Мне это очень нравится. Мы будем использовать нано банан в этом. Итак, давайте возьмем эту идею. Мы переключимся обратно в Claude Code. Мы зайдем сюда, и я действительно хочу начать запускать облачные агенты. Итак, когда вы находитесь в Claude Code в настольном приложении, у вас также есть Claude Code для веба, встроенный, что означает, что вы можете запускать агентов в облаке, которые выполняют задачи для вас в Интернете, пока вы работаете локально и выполняете там основные задачи. Итак, я хочу выполнить некоторые облачные задачи. Для этого нужно поместить ваш код на GitHub. Быстро, вот как это сделать. Зайдите на github.com, зарегистрируйтесь. Если вы еще этого не сделали, создайте новый репозиторий. Я назову его canvas. Мы сделаем его приватным и создадим репозиторий. Мы возьмем этот URL. Мы вернемся в Claude Code для настольных ПК. Я зайду в чат, который мы только что сделали, который создал холст. Я скажу: "Можешь ли ты закоммитить этот код на GitHub, пожалуйста?" И это позволит нам начать запускать агентов в облаке, чтобы они выполняли работу за нас. Мы создадим армию ИИ-агентов, которые будут работать на нас. Я нажму Enter, и Claude Code приступит к работе, размещая это на GitHub, чтобы мы могли запускать эти облачные агенты. Итак, он выполнит кучу команд. Он поместит ваш код на GitHub, и мы будем готовы. Это сделано. Это блестяще. Теперь давайте запустим несколько облачных агентов, чтобы реализовать новые функции, которые мы придумали с нашим Copilot CEO. Итак, я нажму на этот выпадающий список. Мы перейдем к умолчанию, которое является облачной средой. Затем мы зайдем сюда и найдем canvas. И вот наш новый GitHub со всем кодом, который только что был написан. Теперь мы можем начать запускать облачные агенты, чтобы они выполняли работу за нас. Итак, я введу нашу подсказку в это приложение-холст. Пожалуйста, реализуйте функциональность ИИ. Я хочу кнопку генерации изображений с использованием нано банана, которая генерирует изображения для нас на холсте. Я нажму отправить. И теперь агенты запускаются на серверах Claude, которые выполняют работу за нас. Так что, пока это происходит, мы можем вернуться. Давайте вернемся к нашему CEO, найдем новую функцию, которую мы можем реализовать, и начнем работать над ней локально. Итак, как вы видите здесь, у нас теперь есть наш CEO и куча инженеров в одном месте, а не в 10 разных окнах, работающих с нами над этим приложением. Хорошо, экспорт в PNG. Мне нравится, что мы можем экспортировать наши холсты в PNG. Так что, если мы создадим миниатюру или что-то еще, мы сможем легко ее экспортировать. Итак, давайте сделаем это. Давайте вернемся в Claude Code. Мы перейдем в наш локальный чат, верно? Итак, у нас работает облачный чат, работающий над функцией. Теперь я могу перейти в наш локальный чат и сказать, что мне нужна кнопка экспорта. Она должна экспортировать холст в PNG для нас. И я нажму Enter. И это начнет работу локально. Итак, у нас работают агенты в облаке. У нас работают агенты локально. У нас есть наш со-пилот CEO. Еще пара интересных моментов, которые стоит отметить. У вас есть наши кнопки внизу. Я уже показывал вам кнопку CLI, но у вас также есть кнопка VS Code здесь. Если вы нажмете на нее, она откроет для вас VS Code с открытым Claude Code CLI. Так что вы можете начать работать над своим кодом напрямую. Так что, если вы хотите увидеть свой код, вы хотите более ощутимый опыт в VS Code, возможно, вы хотите объединить его с другими инструментами, верно? Возможно, вы хотите открыть другие ИИ-инструменты для кодирования или использовать другие расширения в VS Code. Вы можете быстро нажать эту кнопку, и она откроет для вас VS Code там, где вы остановились в этом рабочем процессе. Еще одна вещь, которую я люблю делать здесь, это то, что вы можете переименовывать разговоры. Так что просто для целей организации, я люблю переименовывать этот локальный агент приложения-холста. И мы нажмем сохранить. И это позволит нам организовать нашего агента, чтобы мы знали, над какими приложениями они работают, являются ли они локальными, являются ли они облачными, все это делает его очень, очень организованным. Хорошо, похоже, что с PNG все готово. Давайте откроем это и посмотрим, и посмотрим, сработало ли это здесь. Итак, давайте прокрутим вправо. О, экспорт PNG. Давайте нажмем на это. О, автоматически скачивается. Давайте посмотрим, как выглядит этот PNG. И вуаля, вот он. Вот наш холст в формате PNG. Итак, у нас есть функциональность экспорта. Видите ли, теперь вы можете увидеть мощь этого рабочего процесса. Давайте перейдем к нашему другому ИИ-агенту, который работает, и он создает функциональность генерации изображений с помощью ИИ. Итак, вот мощь рабочего процесса в действии. Сейчас мы хотим вернуться к нашему чату со-пилота CEO и сказать: "Хорошо, мы сейчас реализуем функциональность генерации изображений с помощью ИИ и функциональность экспорта. Можете ли вы составить маркетинговый план для этого приложения?" И теперь наш со-пилот CEO составляет для нас маркетинговый план для запуска. Мы можем зайти в Twitter, написать для нас твиты, написать рассылки. У нас выходит полный маркетинговый план. Это мощь рабочего процесса. 99% людей используют Claude Code именно так. Они запускают одного агента, сидят там, дают ему команду, он начинает работать, они уходят, берут телефон, начинают "думскроллить", заходят в TikTok и Instagram, возможно, Twitter, ничего не делают, возвращаются через час, затем дают вторую подсказку. Но не вы. Что вы будете делать, так это использовать всю мощь Claude Code Desktop. Вы будете запускать локальных агентов для выполнения больших задач. В то же время у вас будут облачные агенты, выполняющие мелкие задачи, как стажеры. У вас также будет ваш со-пилот CEO, работающий на вас, создающий маркетинг, разрабатывающий другие идеи, дорожные карты и тому подобное. В то время как другие люди выполняют одну задачу и "думскроллят" TikTok весь день, у вас работают несколько разработчиков. У вас есть со-пилот CEO, разрабатывающий маркетинговый план. И теперь вы можете зайти сюда, и пока ваши облачные агенты работают, мы можем открыть эти изменения. Мы можем скачать эти изменения. Нажмите "Создать запрос на слияние", и он фактически создаст запрос на слияние. Так что все изменения кода, чтобы мы могли скачать их и просмотреть код. Если вы сделаете то, что я только что показал, увеличение скорости в 10 раз может быть преуменьшением того, чего мы достигли. Используйте максимум возможностей Claude Code Desktop. Запускайте облачные агенты. Запускайте локальные агенты. И в том же окне убедитесь, что ваш CEO постоянно работает над маркетинговой дорожной картой и другими функциями. Вот как получить максимум от Claude Code Desktop. Если вы узнали что-нибудь, поставьте лайк, подпишитесь, включите уведомления. Я только и делаю, что создаю потрясающие видео об ИИ. Я также запускаю Vibe Coding Academy в эту пятницу. Запишитесь в список ожидания ниже. Вы будете встречаться со мной еженедельно. Я помогу вам создавать ваши приложения. Это будет потрясающе. Увидимся в следующем.