📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Как настроить окружение для вебкодинга с нейросетями без лишних затрат

Свидетели Курсора18:23

Transcription

Всем привет! Сегодня мы разберемся, как с нуля настроить vibe-coding среду — работу с ИИ в коде — без лишних затрат и головной боли. Я покажу несколько вариантов, от готовых платных сервисов до собственной независимой настройки. И объясню, почему последний вариант самый надежный и выгодный. Есть три основных пути. Вариант первый — Cursor, популярный ИИ-редактор. Стоит 20 долларов в месяц. Очень удобно, но недавно он заблокировал доступ к топовым моделям Anthropic — Claude Sonnet и Opus — для пользователей из России. Вариант второй — напрямую Claude, тоже 20 долларов в месяц. Но Anthropic может попросить вас подтвердить личность паспортом. Если вам меньше 18 лет или вы находитесь в неподдерживаемом регионе, например, в России, ваш аккаунт будет немедленно заблокирован, а деньги не вернут. Оба варианта работают, они отличные, самые мощные. Но помните, что в любой момент вы можете потерять все — свои деньги и свой рабочий инструмент. Эти платформы все больше закручивают гайки, усложняя работу с ними. Я считаю, что лучший вариант — это настроить свою собственную среду. Поэтому давайте подробнее рассмотрим третий подход и как все это настроить. Он немного сложнее в начале, но дает вам полный контроль. Хотите менять модели? Хотите переключать провайдеров? Никаких блокировок. Стек выглядит так — Visual Studio Code, бесплатный редактор кода. Кстати, Cursor — это форк VS Code, так что мы получим решение, похожее на Cursor. Второй компонент — расширение Kilo Code, добавляющее ИИ-функции прямо в VS Code. Также мы рассмотрим китайскую ИИ-модель GLM 5.1. Это сильная, доступная модель, которую можно подключить напрямую к Kilo Code. Также мы проверим OpenRouter — агрегатор ИИ, через который можно получить доступ к топовым моделям на условиях Pay As You Go. То есть вы платите за запрос, а не за подписку. Это может быть дешевле для вас, чем покупать отдельную подписку за 20 долларов. Что такое OpenRouter? Это как маркетплейс ИИ-моделей. Вы пополняете свой баланс и можете подключаться к любым моделям. Claude Sonnet, Opus, GPT, Gemini и другие. Никаких подписок, никаких региональных ограничений. Это особенно удобно, если вы хотите выборочно использовать топовые модели. Например, попросить Claude Opus написать вам скилл, правило или план работы. А основную работу поручить более дешевым моделям. Я хочу сказать кое-что особенное про GLM. Это китайская модель, и ее появление — настоящее явление. Это первая open-source модель, с которой можно реально vibe-кодить. Она появилась почти из ниоткуда и сразу заняла очень высокое место среди открытых моделей. Конечно, она слабее своих конкурентов от Anthropic и OpenAI, но я ожидаю, что китайские разработчики будут продолжать ее улучшать. Тренд очень многообещающий. Пока это отличный основной инструмент без региональных ограничений. Теперь перейдем к практической части. Она состоит из трех шагов. Шаг первый — скачать и установить Visual Studio Code. Шаг второй — купить доступ к GLM. И шаг третий — зарегистрироваться на OpenRouter, чтобы получить выборочный доступ к топовым моделям. После этого мы все подключим в KiloCode и VS Code, и вы готовы к работе. Итак, давайте начнем установку и настройку нашей vibe-coding среды. Сначала нам нужно скачать Visual Studio Code. Заходим на официальный сайт visualstudio.com. Все ссылки на скачивание я оставлю в закрепленном комментарии. Выбираем дистрибутив для вашей операционной системы. У меня macOS, поэтому я выбираю macOS. Скачивание должно начаться автоматически. Или нажмите на ссылку. Далее переходим на официальный сайт GLM. Здесь вы увидите несколько тарифных планов. Есть ежемесячная, квартальная или годовая оплата. Вы можете начать с тарифа Light, который стоит 18 долларов в месяц и включает в себя в три раза больше лимитов, чем тариф Claude Pro. Тариф Claude Pro — это то, что вы получили бы, купив подписку за 20 долларов на Anthropic. Здесь это утроено. Если этого недостаточно, вы можете перейти на тариф Pro. Там вы получите в 15 раз больше лимитов — это 5 умножить на 3. Что равно 15 лимитам тарифа Claude Pro. Все тарифы включают доступ к последним моделям этой компании. Но нас интересует только GLM 5.1, так как это самая мощная модель. И она способна разрабатывать приложения. Другие модели слабее, и нет смысла их использовать. Оплатить тарифы можно иностранной банковской картой. Если у вас ее нет, я оставлю информацию в закрепленном комментарии, как ее легко получить. После того, как у вас появится подписка, зайдите в настройки вашего аккаунта в раздел API Keys и сгенерируйте новый ключ. Я назову его, например, kilocode. И скопируем этот ключ — API Keys. После установки Visual Studio Code, давайте приступим к настройке. Сначала нам нужно отключить GitHub Copilot. Он нам сейчас будет только мешать. Введите здесь: GitHub Copilot how to hide AI features. И поставьте галочку disable. Готово, GitHub Copilot исчез. Теперь можем установить то, что нам нужно. Заходим в Marketplace расширений. И вводим здесь kilocode. Kilo Code установлен, и вот здесь появился этот маленький значок. Уже подключена бесплатная модель от самого Kilo Code. Давайте проверим, что модель жива и решение работает. Напишем hello. Hello, how can I help? Модель работает. Теоретически, можно попробовать что-то с ней сделать, но это слабая модель. Поэтому давайте подключим наш тариф, который мы только что настроили. Для этого заходим в раздел настроек — вот этот значок шестеренки. Provider. И внизу выбираем show more providers. Z, Z, AI coding plan. И вставляем ключ, который мы получили с сайта. Окей, давайте проверим. Теперь у нас есть список моделей, появились все модели из нашего Z, Z, AI coding plan. Нам нужен этот GLM 5.1. Кроме того, мы будем выборочно использовать топовые модели, поэтому давайте зарегистрируемся на сайте OpenRouter. Можно зарегистрироваться по электронной почте, так что не придется создавать новый логин и пароль. Заходим в раздел Credits. У меня здесь уже есть небольшой баланс. Как видите, я пополняю его довольно редко, потому что он тратится очень медленно. Чтобы пополнить, вам также понадобится иностранная банковская карта. Информацию ищите в закрепленном комментарии. Также можно пополнить криптовалютой. После того, как вы пополнили баланс, зайдите в раздел API Keys здесь и создайте новый. Я назову его так же. Kilo code. Credit limit. Нужно ли его заполнять? Да, нужно — потому что вы можете забыть переключить модель, начать основную работу на самой мощной ИИ, на Opus или еще чем-то. И весь ваш баланс сольется очень, очень быстро. Я поставлю сюда 5 долларов, и этого хватит на неделю. Появился ключ, скопируем его. И вернемся в настройки KiloCode. OpenRouter здесь указан среди популярных провайдеров. Нажимаем Connect и вставляем наш ключ. И получаем второй ИИ-провайдер в нашем KiloCode. Все, настройка завершена. Теперь давайте попробуем что-нибудь с этим сделать, пустим в ход. Я создам новую папку, YouTube demo. Да, я доверяю себе. Открылась новая папка, она абсолютно пустая. Я открою KiloCode справа — мне так удобнее, как в Cursor. Давайте сделаем что-нибудь интересное. Сначала переключимся на топовую модель, Opus 4.7. И попросим ее создать. Новый глобальный скилл для генерации PPTX презентаций. Используя лучшие мировые практики. И отправляем. В блоках Thinking можно прочитать ход мысли — о чем он рассуждает. Он запрашивает разрешение на чтение директорий, которых нет в текущей папке. Поскольку я попросил сделать скилл глобальным, чтобы его можно было вызывать из любого проекта в дальнейшем, ему нужно создать его в общей конфигурации. Он начал создавать папки scripts и references. Только что закончил файл skill.md — основной файл с рекомендациями и инструкциями по созданию презентации. Да, конечно, мы его применим. Качество очень важно при создании скиллов. Они должны быть описаны максимально подробно, с паттернами и антипаттернами. То есть, как надо делать и как не надо. И тогда вы сможете использовать этот скилл в своей повседневной работе. А вот менее мощный, более дешевый ИИ сможет реально использовать скилл. Так, он просит разрешение на создание скрипта. Да, разрешаем. Работа сделана, давайте прочитаем, что он выдал. Скилл создан и проверен. Что было сделано? Глобальный скилл в папке pptx generation. Вот основной файл, какой-то Python wrapper. Reference narrative, design checklist. Это потому, что я попросил использовать лучшие мировые практики — он выбрал какие-то популярные методологии. Что внутри скилла? Инструкции следуют лучшим мировым практикам, как и было запрошено. Восемь фаз запрещают писать код до согласованного плана. Narrative, Kawasaki, 10-20-30. Action Titles. Главный рычаг качества: заголовок каждого слайда должен быть утверждающим предложением, а не темой. Design system. И так далее. Вот антипаттерны, кстати. Черный список того, чего делать не стоит. Никаких 3D-графиков, никаких круговых диаграмм, никаких теней, никаких заголовков с метками. Вдобавок ко всему, он проверил, что скилл реально работает, сгенерировав 7 слайдов. Скилл сразу доступен из любого проекта. Kilo автоматически подхватит его для запросов типа "сделать презентацию", "PPTX", "слайдшоу". Вот здесь наверху показано, сколько денег мы сожгли за эту сессию. Создание этого скилла обошлось нам почти в доллар. Это около 80 рублей. Теперь откроем новый чат. Самое главное, переключим модель на дешевый GLM 5.1. Не путайте — нужно выбирать из coding plan, а не из OpenRouter. Если вы выберете OpenRouter, с вас будет списываться плата за каждый сожженный токен. GLM 5.1 И давайте спросим — какие у тебя есть скиллы? Сейчас он не видит новый скилл, который мы создали, потому что скиллы загружаются при инициализации KiloCode. Вы можете включить его в настройках, или просто перезапустить Visual Studio Code. Я только что перезапустил Visual Studio Code и давайте спросим снова. Теперь появился новый скилл. PPTX, Generation, Generations, PowerPoint, Presentation. Откроем еще один чат для чистого эксперимента. И здесь мы наконец-то попросим его сгенерировать презентацию. Make a presentation on the topic: Animals of Africa. Проверим, что у нас выбран coding plan GLM 5.1. И он использует Skill, написанный Opus. Он сам себе создал список дел, что нужно сделать. Два из четырех шагов выполнены, теперь он запускает скрипты, которые написал. И последний шаг — проверка выходного файла. Все сделано. Все четыре шага выполнены. Презентация создана: Animals of Africa. Тринадцать слайдов. Цветовая палитра в африканских тонах. Шрифт Calibri. Логично. Цветовая схема 60-30-10. Давайте посмотрим на презентацию, которую сгенерировал GLM для нас. Вот папка. Открываем презентацию Animals of Africa. The Amazing World of Wildlife. Африка является домом для четверти всех видов животных на Земле. Вау. Он приводит свой источник. African Predators — Top of the Savannah Food Chain. Африканская дикая собака успешна в 80% охот. Здесь немного сбилась верстка, но, думаю, это можно будет подправить. Не беда. Это не будет иметь значения. Африканский слон — крупнейшее сухопутное животное. Интересная штука здесь. Появились таблицы. Скорость различных хищников. И не только страус. Графики. Популяция крупных млекопитающих в Африке. Снижается десятилетиями. Да, если так пойдет дальше, мы можем попрощаться со слонами, львами и носорогами. Проблема: браконьерство, международные усилия. Любой фидбек также можно будет передать и обновить скилл, чтобы он пересмотрел свой подход к верстке, к этим пустым слайдам, и избегал этого в будущем. Улучшение этого скилла я оставлю вам в качестве домашнего задания. В итоге, вместо того чтобы платить 20 долларов в месяц за одну подписку и переживать из-за блокировок, вы можете построить свою собственную среду, которая работает на вас. GLM для повседневных задач. OpenRouter, когда нужен доступ к топовым моделям. Гибко, дешево, надежно. Если это было полезно, ставьте лайк — это очень помогает каналу. Подписывайтесь — впереди еще много практики vibe-coding. Также присоединяйтесь в Telegram-канал, где я публикую важные новости и полезную информацию. Увидимся в следующем видео.