Zero to Vibe[coding]
160 subscribers
48 photos
2 videos
2 files
25 links
AI-инструменты, вайбкодинг и продукт в IT: https://t.iss.one/zero2vibecoding
Есть полезная информация для комьюнити -- пишите @YaLidia
Download Telegram
Channel created
🏁Что нужно для старта:
- ПК или ноут
- приложение Cursor
- ChatGPT/DeepSeek/Алиса -- на ваш выбор

Сначала всё будет происходить локально, поэтому ничего кроме Cursor/GPT не понадобится. Cursor работает бесплатно 2 недели, потом хочет 20 долларов в месяц -- понадобится карта иностранного банка. Она же пригодится в других сервисах, если захотите полноценный продакшен (иногда требуется привязать даже для бесплатного использования).

🤓 Что вам надо знать:
- базовые вещи типа что такое бэкенд, фронтенд/клиент, примерное понимание архитектуры;
- популярные технологические компоненты из которых, как из кубиков, собираются современные решения;
- принципы безопасности в интернете.

🌚 Что вам знать не обязательно, если вы хотите делать продакшен-прототипы:
- какие бывают языки программирования;
- как писать код компонентов;
- как увязывать их между собой.

🤩 Что вам надо уметь и хотеть этого:
- проявлять любопытство;
- учиться по ходу реализации как с помощью Cursor и GPT, так и различной документации, потому что она позволяет экономить время, деньги на токены Cursor и более осознанно двигаться вперёд.
1👍2
🤔 А как начать?
Открыли Cursor, нашли ассистента (это такой чатик, который будет справа) и… затупили 🫠.
Это нормально. Главное правило: тупить надо вслух, то есть словами.

Представьте, что вы в другой стране, про достопримечательности времени почитать не было, но рядом с вами есть человек, который мало вас знает и всячески готов вам помочь. Логично выдать ему немного информации про то, что вам интересно, что вы уже знаете, а что нет. Завяжется разговор и маршрут появится.

С ассистентом Cursor и другими LLM также. Честно скажите, что в программировании вы ноль, никакой инфраструктуры для программирования кроме Cursor у вас нет, но вам очень хочется создать свой первый веб-сервис (это проще, чем аппы). Cursor поможет вам всё настроить и напишет код, подробно поясняя по ходу, что и зачем он делает.

😎 А другие LLM зачем?
Можно прямо в процессе работы просить пояснять термины и процессы, а можно делать это сбоку в ChatGPT, DeepSeek или даже Алисе, и у этого есть пара плюсов:
- обсуждая термины и определения с DeepSeek вы однозначно экономите на токенах в Cursor;
- история переписки с ассистентом Cursor доступна временно. Я чуть дальше расскажу, почему она особо и не нужна для кодинга, но в образовательных целях возможность перечитать бывает полезна. Любая LLM сбоку, надежно сохранит инфу.

Для начала попробуйте сделать локальную статическую веб-страничку, например, сайт о себе любимом. Опишите, что вы хотите на ней видеть, дополните её ссылками на странички с приятным для вас дизайном и попросите сделать также. Ассистент Cursor будет спрашивать разрешения каждый раз, когда он что-то скачивает, устанавливает, выполняет команду.

😈 Не забывает быть микро-менеджером!
“А когда заработает?”, “А как посмотреть?”, “А почему тут ошибка вместо странички?” (копипасты ошибок ассистенту Cursor сильно ускоряют разбор). Всё это очень поможет вашему проекту двигаться вперед. Оглянуться не успеете, как у вас готов сайт. Но пока он локальный, это только ваша прелесть, а как поделиться — расскажу дальше.
🗂 Добро пожаловать на GitHub
GitHub для вайбкодера-прототиписта — это прекрасная возможность хранить код проекта в облаке и уметь, например, такое:
- быстро восстановить работу вашего пет-проекта, если выйбкодинг завёл вас не туда;
- помнить, что и когда вы меняли, благодаря заметкам к коммитам (они же сохранения);
- использовать чужие наработки из публичных репозиториев GitHub.

Это мягко говоря не полный список ценностей GitHub, но у вас ведь есть любимая LLM, у которой вы спросите про остальные, если захотите.

Итак, регистрируете аккаунт GitHub, сообщаете эту радостную новость Cursor, а он поможет настроить работу и сохранить ваш проект.

✍️ "Запуш правки в гит"
Этот незатейливый промт в Cursor поможет вам сохранить апдейт кода в GitHub, то есть закоммитить. Cursor предложит вам выполнить нужные для этого команды, которые можно писать руками в терминале впоследствие. Он будет писать за вас релизные комментарии автоматом. Иногда комментарии повторяются, поэтому для красоты и чистоты можете править их руками прям внутри ассистента перед разрешением выполнить команду.

Сохраняйте апдейты кода в GitHub периодически, НО сначала проверяйте, что ваш проект всё ещё работает. Иногда Cursor бодро рапортует, что всё готово, а у вас вместо сайта теперь 404, пропали кнопки или ещё какой портал в ад открылся.

Правим код, тестируем проект, закрываем силами Cursor открытый им же портал в ад, и коммитим код, который точно работает. Профит!
💎 Сокровище из GitHub-а
Теперь представим, что вы хотите сервис посложнее.

Cursor способен заменить вам нескольких специалистов (пока скорее джунов), и ему/им полезно узнать заранее, что ж вы хотите в целом, а не в частностях. К вам в мозг Cursor пока заглянуть не может, поэтому папочка с базовыми вводными, способна сильно облегчить жизнь и вам, и ему.

Новый термин Contextual Engineering -- это подготовка к написанию кода и в частности вайбкодингу, помогающая LLM меньше галлюцинировать и лучше помнить, что вы вместе делаете. Фактически это проектная документация и план, доступные ассистенту Cursor, и позволяющие вам с ним бежать в одну сторону.

👌 Пошаговый метод:
- создаете себе аккаунт на GitHub и связываете его с Cursor, если ещё этого не делали;
- клонируете себе этот репозиторий https://github.com/coleam00/context-engineering-intro и дальше действуете так, как описано в [README.md](https://readme.md/) -- пишете несколько базовых документов;
- можно бомбить вопросами ChatGPT и править файлики руками, можно сообщить Cursor, что вы будете работать по модной системе и попросить его прочитать [README.md](https://readme.md/) за вас -- Cursor закидает вас вопросами в попытке получить из вас контекст, сам перепишет документы.

Настройка контекста может занять время, но даже частично заполненные шаблоны помогут вам проще контролировать происходящее при написании кода силами Cursor, не говоря уже о том, что пока вы будете объяснять LLM чего вы хотите, сами получше это поймёте 🙂

Дополнительный бонус, если вы менеджер: после демонстрации прототипа, пораженная мощью вашей продуктовой мысли команда, тут же получит полноценные требования для реализации!
👍1
💥 Майним первых пользователей
Теория: в интернете полно мест, где уже тусуются люди. Вам просто надо лечь на их пути с указателем 😁

Переходим к практике.

👩‍💻Что за проект я делаю
Это сайт, который помогает подобрать товары под задачу. Для поиска я решила использовать ChatGPT. Для тренировки сделала Custom GPT, чтобы убедиться, что идея сработает. И вот у меня есть контент ответа и открытый вопрос “А нужен ли кому-то этот контент?”.

Руководствуясь принципами Lean-подхода, ищем самый быстрый способ проверить сырую идею. Кто мой пользователь? Человек, у которого возникло новое дело, требующее шоппинга.

Сложное и затратное дело пока не подойдет: мне долго делать хорошо, и почему пользователь должен довериться неизвестному источнику, непонято. Значит эти новые дела должны быть популярные, относительно простые, требующие для шопинга не много денег. По описанию похоже на хобби.

🤓 Step-by-step
- Штурмим с GPT — на выходе список новых хобби и идея продвигать их на Pinterest.
- Рисерчим с GPT тренды — список хобби отприоритизирован.
- Не верим GPT, ведь он всех посылает в одну сторону — добавляем идеи, которые по его мнению не зайдут.
- Создаем план для новых контент-мейкеров тоже при помощи GPT.

🤓 Собираем MVP
GPT посоветовал создать контент при помощи [Canva](https://www.canva.com). Сервис не работает в России — используйте VPN. Он позволяет создавать коллажи, обложки, визитки при помощи простых графических шаблонов, готовых шрифтов и довольно разнообразных инструментов кастомизации. Пока мне полностью хватило бесплатных опций.

Создаем контент, который красиво продемонстрирует список товаров для нового хобби. Я протестила несколько вариантов:
- коллаж с реальными товарами по шаблону в Canva (на коллаж уходил час времени);
- обложки с помощью Шедеврум + Canva;
- генеративный коллаж при помощи Midjourney (найдена внутри GPTs от ChatGPT, работает бесплатно) + Canva.
Для 2 и 3 в Canva просто накладывала заголовок, на создание реально ушло 5 минут.

Заводим на Pinterest бизнес-аккаунт, всё бесплатно, понятно и нет никаких драконовских требований типа ИНН или привязки карты. Выкладываем картинки и умещаем свой полезный GPT-текст в 800 символов. Нервно наблюдаем за статистикой.

🍿 И чем кончилось?
Итоги “творчества” тут. За несколько дней по статистике внутри Pinterest 283 показа, 43 клика в пин (CR из показа 16%), 5 переходов на сайт (CR из показа 1,7%). Google Analytics при этом настаивает, что было 14 юзеров.

Штош, плюс-минус 10 совершенно бесплатных людей, павших жертвами моего доморощенного маркетинга, мы имеем. Конверсии за неделю стабильные (кроме дней, когда Pinterest поломался и обнулил всю стату, но потом вернул). Значит придумав, как генерировать контент с тем же качеством, но в 100 раз больше, чем 1 пин в день, можно и на 1К пользователей выйти без бюджета, а на таком потоке уже реально и денег заработать на рекламе и на affiliate-программах (в теории).
3
Я знаю, что к пятнице вы подустали, поэтому сегодня про вайбкодинг будут только мемасики! 💥
3
☁️Google Cloud или Yandex Cloud?

😎 TLDR
Для вайбкодер лучше Google, потому что развернуть веб-сервис в облаке впервые при помощи только Cursor в облаке Yandex невозможно.

🤓 Детально
Если вы хотите, чтобы к вам смогли прийти живые люди, то самый быстрый и простой способ — это сервер в облаке.

В Яндекс Облако я выкладывала простенький прокси-сервер. В облако Google веб-сервис. Дальше пройдём по этапам и разнице.

1. Регистрируемся на сайте облака. Без Cursor, лапками. Нужно привязать карту. На этом этапе различий нет, кроме того, что в Google не привяжешь карту русского банка.
2. Получаем стартовые гранты. В обоих случаях суммы внушительные и вайбкодеру на глаз хватит на год-другой, если не строить массовые сервисы.
3. На всех следующих этапах работает так:
1. любое действие в Я Облаке заканчивается тем, что ничего не работает, Cursor ходит по кругу и обещает всё исправить. Но этого не случится никогда, потому что Cursor не знает документацию облака и очень многие настройки нельзя сделать через CLI (а это пока единственный способ связи между облаком и Cursor).
2. почти все действия с Google Cloud прошли через CLI. Cursor качественно пояснял, что и зачем надо пойти сделать в веб-интерфейсе облака, 1-2 раза было нужно, но всё было понятно.

🧮 В сухом остатке
От регистрации до выкладки в прод:
1. в Я Облаке — несколько часов чистого времени с осознанием, что Cursor опять встрял и надо ботать доки. Документация Облака витиеватая и склонная непонятно объяснять непонятное.
2. в облаке Google — 20 минут от старта до моего сервиса в продакшене на гугловском домене.

Даже жадность пока не заставит меня вернутся в Yandex Cloud за не потраченными грантами, потому что суть вайбкодинга в том, что всё магическим образом происходит само. Но не все инструменты пока одинаково хорошо поддерживают магию. И пока Yandex Cloud этому научится, я выбираю Google Cloud.

Если для вас Google это плохой выбор, то вот ключевые затыки Cursor и возможное решение:
- Cursor не понимает разницу между облаками, поэтому не знаем, когда CLI не сработает или использует терминологию Google, а у Яндекса всё чуть иначе > руками скормите документацию облака в Cursor. Можно передавать статьи с запросами, можно сгрузить в папку в проекте и добавлять её в контекст Cursor.
- Чаще всего ломается на правах, которые можно настроить только в интерфейсе. Посмотрите видосики про настройку прав в веб-интерфейсе, этой операции лапками вам не избежать.

Немного магии вайбкодингу должно вернуть, но это не точно 🙂
💫 Cursor: вам поговорить или реально сделать?

TLDR: чтобы реально сделать, пользуйтесь приложением Cursor, не веб-версией.

Cursor в приложении (на ПК)

Это полноценная среда разработки (IDE) на базе VS Code. Поддерживает:
• автокомплит с GPT;
• редактирование и объяснение кода;
• генерацию коммитов;
• запуск и отладку кода;
• работу с локальными проектами и Git.

Cursor в вебе
Упрощённая версия.
Можно:
• писать и объяснять код в отдельных файлах;
• использовать GPT-помощника;
но нет полноценной работы с проектами, запуском и интеграцией с Git.

👉 Веб — для быстрых экспериментов. Приложение — для реальной разработки.
UPD: для мобильный устройств у Cursor есть только веб-версия.
2
💸 Вайбкодер — горе в семье
По многочисленным единственной просьбе моих читателей, рассказываю про расходную часть вайбкод-хобби.

Подписка на Cursor Pro — 20$
Пользуясь отпуском я играюсь с Cursor ежедневно часов по 8. Пруфпик с интенсивностью и объемами прилагается -- пока не было уведомлений о лимитах.

API Open AI — счёт пополнен на 10$, фактически потратила 0,37$.
API оплачивается отдельно от ChatGPT, которым я тоже пользуюсь, но для всего на свете, поэтому расхода на него мы учиывать не будем. К тому же, есть Алиса, Grok, Gemini и DeepSeek, если хочется бесплатного помощника сбоку.

Googel Cloud — 11$ из 300$ кредитов, пока не пополняла.
Тут практически 99% расходов приходится на мои игры с использование Google Search для подклейки картинок к текстовому поисковому ответу от Open AI. При условии, что в Open AI и поиска Гугла я сделала одинаковое количество запросов, смело можно сказать, что 1 запрос в картинки гугла — это примерно 27 запросов в Open AI. Неочевидно было, что поиск картинок — это так дорого (хоть и пока бесплатно).

🧮 Итого пока реальных денеге 20,37$ и ещё около 10$ в заложниках у Open AI.

Ещё у меня есть подписка на Manus — 16$. Но после погружения в Cursor в Manus пока без дела копятся кредиты. 🤷‍♀️
🔥2