Карта инструментов
На прошлом уроке мы настроили Claude Code. Но кроме него есть ещё два полезных инструмента: Google AI Studio и Lovable. Каждый хорош для своей задачи.
Представьте мастерскую: у вас есть молоток, отвёртка и дрель. Забивать гвозди дрелью можно, но молотком быстрее. В вайбкодинге то же самое — для каждой задачи свой инструмент.
Claude Code — швейцарский нож. Может всё, но платный. Google AI Studio — бесплатная мастерская для тренировок. Lovable — конструктор, который за минуту собирает красивый сайт.
1. Три типа AI-инструментов
В мире вайбкодинга есть три типа инструментов. Не нужно запоминать все — достаточно знать по одному из каждого типа.
Первый тип — AI-помощники в редакторе кода. Это программы, которые живут внутри VS Code и работают с вашими файлами напрямую. Вы говорите — они делают. Сюда относится Claude Code. Есть похожие программы (Cursor, Windsurf), но на курсе мы работаем именно с Claude Code.
Второй тип — AI-конструкторы сайтов. Они работают прямо в браузере. Вы пишете, что хотите — и через минуту видите готовый сайт. Самый известный — Lovable. Результат красивый, но контроля меньше.
Третий тип — AI-чаты. Это привычные ChatGPT и Google AI Studio. Вы задаёте вопрос — получаете ответ. Хороши для текстов, идей и обучения.
| Тип | Наш инструмент | Для чего |
|---|---|---|
| AI в редакторе кода | Claude Code | Полноценные продукты: сайты, боты, приложения |
| AI-конструктор сайтов | Lovable | Быстрые красивые сайты прямо в браузере |
| AI-чат | Google AI Studio | Тексты, идеи, вопросы, обучение |
2. Claude Code — главный инструмент
Мы уже установили его в прошлом уроке. Давайте разберёмся, почему именно он — основа всей работы.
Что умеет Claude Code:
- Создавать с нуля — сайты, Telegram-ботов, приложения, автоматизации
- Работать с готовым проектом — разобраться в коде, исправить ошибку, добавить функцию
- Подключать сервисы — базы данных, оплату, аналитику
- Публиковать проекты в интернет
- Сохранять историю изменений через Git
Почему именно Claude Code, а не что-то другое:
Он покрывает все задачи — от простого лендинга до сложного Telegram-бота с оплатой. Ни один другой инструмент так не может. Lovable умеет делать только сайты. AI Studio вообще не создаёт файлы на вашем компьютере.
И главное — вы владеете кодом. Всё, что Claude Code создал, лежит у вас на компьютере. Вы можете продавать это, дарить, переносить куда угодно.
Стоимость: Pro — $20/мес (для старта хватит). Max — $100–200/мес (для активной работы).
3. Google AI Studio — бесплатный помощник
Google AI Studio — это AI-чат от Google. Работает прямо в браузере, ничего устанавливать не нужно. И самое важное — он бесплатный.
Google AI Studio из России напрямую не открывается. Но наши ученики в чате обучения заходят туда без проблем — умельцы находят решение за один день. По определённым причинам мы не можем публично рекомендовать конкретный способ. Но когда вы окажетесь в кругу единомышленников, которые развиваются и помогают друг другу — вопрос решится сам собой. В интернете полно информации, а в нашем сообществе всегда подскажут.
Зачем нужен AI Studio, если есть Claude Code?
Потому что Claude Code платный. Каждое ваше сообщение там стоит денег. А в AI Studio можно тренироваться, экспериментировать и ошибаться сколько угодно — бесплатно.
Думайте об этом так: Claude Code — это рабочая стройка, где каждый кирпич стоит денег. AI Studio — это песочница, где можно пробовать и учиться без последствий.
Режим Playground — ваш бесплатный ChatGPT
Playground — это обычный чат с искусственным интеллектом. Вы пишете вопрос или задание — AI отвечает. Выглядит как переписка в мессенджере: слева ваше сообщение, справа — ответ.
Это по сути то же самое, что ChatGPT, только бесплатно и на базе модели Gemini от Google. Можно вести длинные диалоги, уточнять, просить переделать — без ограничений.
Что можно делать в Playground:
- Написать текст — пост для Telegram, описание продукта, письмо клиенту
- Составить план — техническое задание на проект, план запуска, структуру сайта
- Разобраться в теме — задать любой вопрос и получить понятное объяснение
- Проанализировать файл — можно прикрепить фото, документ или таблицу, и AI их разберёт
- Диктовать голосом — есть кнопка микрофона, быстрее чем печатать
Пример промпта для Playground:
Напиши пост для Telegram-канала про вайбкодинг.
Тема: как я создал лендинг за 5 минут без кода.
Стиль: дружеский, без пафоса, с эмодзи.
Длина: 150-200 слов.
Режим Build — конструктор приложений
Build — это совсем другой режим. Здесь AI не просто отвечает текстом, а рисует работающее приложение прямо в браузере. Вы описываете словами, что хотите — и через минуту видите результат: с кнопками, полями, дизайном.
Представьте, что вы рассказываете дизайнеру, какой калькулятор вам нужен — и он тут же рисует его на ваших глазах. Именно так работает Build.
Результат можно сразу потрогать — понажимать кнопки, ввести данные, проверить как выглядит на телефоне. Если что-то не нравится — пишете «поменяй цвет на синий» или «добавь ещё одно поле» — и AI переделывает на лету.
Что можно делать в Build:
- Калькулятор — стоимости услуг, калорий, доставки, ипотеки
- Квиз или тест — для клиентов, для обучения, для развлечения
- Простая форма — заявка, обратная связь, регистрация
- Набросок будущего сайта — проверить идею бесплатно, до того как тратить деньги в Lovable
Пример промпта для Build:
Создай калькулятор стоимости доставки.
Поля: вес посылки, город отправления, город получения.
Дизайн: светлая тема, крупные кнопки, мобильная версия.
Добавь кнопку «Рассчитать» и покажи итоговую стоимость.
Как начать работу
- Откройте aistudio.google.com в браузере
- Войдите с аккаунтом Google (тем же, что для Gmail)
- Выберите режим: Playground (чат) или Build (конструктор)
- Начинайте работу — это бесплатно
Говорите AI чётко, как повару на кухне: «добавь», «исправь», «удали», «поменяй». Не пишите «может быть стоит подумать над...» или «как ты считаешь?» — это работает плохо. AI — исполнитель, а не советчик.
Когда использовать AI Studio
- Нужно бесплатно набросать идею — открываете Build
- Нужно написать текст — открываете Playground
- Хотите потренироваться перед работой в Claude Code — открываете AI Studio
- Нужно проанализировать фото или документ — загружаете файл в Playground
AI Studio — ваш бесплатный тренажёр. Тренируйтесь здесь, а серьёзную работу делайте в Claude Code.
4. Lovable — конструктор сайтов
Lovable — это сервис, который собирает красивые сайты прямо в браузере. Вы описываете словами, что хотите — через минуту видите готовый результат с дизайном, анимациями и рабочими кнопками.
Если Claude Code — это стройка, где вы контролируете каждый кирпич, то Lovable — это конструктор LEGO. Быстро, красиво, но только из тех деталей, что есть в наборе.
Что умеет Lovable:
- Создавать красивые сайты за считанные минуты
- Сразу публиковать их в интернет (без настройки)
- Подключать базу данных (хранилище информации)
- Подключать оплату
Чего Lovable НЕ умеет:
- Создавать Telegram-ботов (только сайты)
- Работать с файлами на вашем компьютере
- Давать полный контроль над кодом
Как устроен внутри. У Lovable три «работника»: один отвечает за внешний вид, второй — за логику работы, третий — проверяет ошибки. Вы даёте задачу — они втроём выполняют её.
Стоимость: бесплатно 5 генераций в день (попробовать). Pro — $25/мес.
Как начать
- Откройте lovable.dev в браузере
- Зарегистрируйтесь
- Опишите, что хотите создать — Lovable сделает за минуту
Готовый промпт для Lovable
Создай лендинг для онлайн-курса по фотографии.
Название: «ФотоСтарт — научись снимать за 2 недели».
Секции: главный экран с заголовком, 3 преимущества, отзывы учеников, форма записи.
Дизайн: тёмная тема, современный и чистый.
Галерея — не создавайте с нуля
В Lovable есть галерея с тысячами готовых проектов. Прежде чем создавать что-то с нуля — всегда ищите похожее в галерее. Нашли? Нажимаете кнопку Remix — и получаете копию, которую можно переделать под себя.
Remix — это как взять готовый чертёж дома и перестроить его по-своему. Не с нуля, а на основе готового проекта. Быстрее и дешевле.
Первая команда в любом проекте Lovable
Когда начинаете работу в Lovable, всегда отправляйте эту команду первой. Она поможет AI быстрее находить и исправлять ошибки:
Сделай подробное логирование, чтобы ты видел все ошибки и мог их быстрее исправить
Что можно подключить к Lovable
| Сервис | Что делает | Как подключить |
|---|---|---|
| Supabase | Хранилище данных и вход пользователей | Автоматически в один клик |
| Stripe | Приём оплаты от клиентов | Команда «Подключи Stripe» |
| N8N | Автоматические действия (отправка писем и т.д.) | Через настройки |
Каждое сообщение в Lovable стоит денег — даже если AI ошибся. За 6 часов работы можно потратить $20. Поэтому тренируйтесь в бесплатном AI Studio, а Lovable используйте для готовых задач с чётким планом.
5. Другие инструменты (коротко)
Кроме основной тройки есть ещё несколько полезных инструментов. Подробно изучать не нужно — просто знайте, что они существуют.
ChatGPT — AI-чат от OpenAI. Бесплатная версия ограничена, платная $20/мес. Хорош для текстов и вопросов. По сути — аналог AI Studio, только платный.
Cursor — программа для работы с кодом, похожая на VS Code + Claude Code. Платная ($20/мес). Если вам по какой-то причине не подошёл Claude Code — можно попробовать Cursor.
NotebookLM — бесплатный инструмент от Google для создания презентаций с инфографикой.
Gamma — бесплатный генератор презентаций. Описываете тему — получаете готовые слайды.
6. Стратегия экономии
Умный вайбкодер не тратит деньги зря. Вот как это работает на практике:
| Этап | Что делаем | Инструмент | Стоимость |
|---|---|---|---|
| 1 | Придумываем идею, пишем план | Google AI Studio | Бесплатно |
| 2 | Делаем быстрый красивый набросок | Lovable | $25/мес |
| 3 | Собираем полноценный продукт | Claude Code | $20/мес |
Главный принцип: сначала бесплатно, потом за деньги.
Не бросайтесь сразу в Claude Code или Lovable. Сначала продумайте проект в AI Studio — это бесплатно. Напишите план, структуру, тексты. И только потом переходите к платным инструментам с готовым планом. Так вы потратите в разы меньше.
Формула экономии:
1. План и тексты в AI Studio (бесплатно) → экономите деньги
2. Набросок сайта в AI Studio → переносите в Lovable
3. Готовое из галереи Lovable → Remix вместо создания с нуля
4. Серьёзная работа в Claude Code → полный контроль над проектом
Запомните порядок: AI Studio → Lovable → Claude Code. Бесплатно → быстро → качественно.
7. ТОП-100 задач вайбкодинга — копируй и создавай
Это не просто список идей. Каждая задача сформулирована как готовый промпт — проверенный на практике и написанный в формате «образа идеального конечного результата».
Как пользоваться: копируете задачу, вставляете в Claude Code (или AI Studio / Lovable), подставляете свои данные — и AI создаёт.
Эти формулировки построены так, чтобы AI сразу понимал, что от него хотят. Каждая задача — готовая команда. Просто скопируйте, подставьте свои данные и отправьте.
Сайты и лендинги
1. Создай лендинг для продажи онлайн-курса с секциями: главный экран, программа, отзывы, кнопка записи
2. Создай сайт-визитку с фото, описанием, контактами и кнопкой «Написать в Telegram»
3. Создай портфолио дизайнера с галереей работ, фильтрами по категориям и формой обратной связи
4. Создай лендинг для фитнес-тренера: услуги, до/после, расписание, запись на тренировку
5. Создай мини-сайт ресторана с меню, фотографиями блюд, адресом на карте и кнопкой бронирования
6. Создай лендинг для мобильного приложения: скриншоты, преимущества, ссылки на App Store и Google Play
7. Создай страницу мероприятия: дата, программа, спикеры, таймер обратного отсчёта, кнопка регистрации
8. Создай сайт для интернет-магазина с каталогом товаров, карточками, корзиной и формой заказа
9. Создай лендинг для вебинара: тема, для кого, программа, спикер, таймер и кнопка записи
10. Создай многостраничный сайт компании: главная, услуги, о нас, контакты, блог
11. Создай лендинг для запуска нового продукта: проблема → решение → преимущества → CTA
12. Создай сайт для фотографа: галерея, пакеты услуг, отзывы, форма заявки
13. Создай страницу «Скоро открытие» с таймером, формой для email и ссылками на соцсети
14. Создай лендинг для подписки на рассылку: заголовок, 3 причины подписаться, форма ввода email
15. Создай сайт для агентства недвижимости: каталог объектов с фильтрами, карточки, форма заявки
Telegram-боты и Mini App
16. Создай Telegram-бота для записи клиентов: выбор услуги, дата, время, подтверждение
17. Создай Telegram-бота для ресторана: меню, выбор блюд, оформление заказа на доставку
18. Создай Telegram-бота-помощника, который отвечает на частые вопросы клиентов из базы знаний
19. Создай Telegram-бота для фитнес-клуба: расписание, запись на тренировку, отмена записи
20. Создай Telegram Mini App — каталог товаров с карточками, корзиной и оформлением заказа
21. Создай Telegram-бота для сбора заявок: имя, телефон, описание задачи → отправка в чат менеджеру
22. Создай Telegram-бота для рассылки: пользователь подписывается, админ отправляет сообщения всем
23. Создай Telegram-бота для обучения: вопросы с вариантами ответов, подсчёт баллов, результат
24. Создай Telegram Mini App — калькулятор стоимости услуг с выбором опций и итоговой ценой
25. Создай Telegram-бота-напоминалку: пользователь ставит задачу, бот напоминает в нужное время
Калькуляторы и квизы
26. Создай калькулятор стоимости ремонта: площадь, тип работ, материалы → итоговая цена
27. Создай калькулятор стоимости доставки: вес, откуда, куда → цена и срок
28. Создай квиз для подбора услуги: 5 вопросов → рекомендация + форма заявки
29. Создай калькулятор калорий: продукты, вес порций → калории, белки, жиры, углеводы
30. Создай квиз «Какой продукт вам подходит»: вопросы о потребностях → персональная рекомендация
31. Создай калькулятор ипотеки: сумма, срок, ставка → ежемесячный платёж и переплата
32. Создай калькулятор стоимости строительства дома: этажность, площадь, материал → смета
33. Создай тест на знание темы: 10 вопросов, варианты ответов, подсчёт баллов, результат
34. Создай калькулятор окупаемости бизнеса: вложения, расходы, доход → срок окупаемости
35. Создай квиз для сбора лидов: 7 вопросов → результат + форма с email и телефоном
Приложения и инструменты
36. Создай трекер привычек: добавление привычки, ежедневная отметка, статистика за неделю и месяц
37. Создай To-Do приложение: добавление задач, приоритеты, дедлайны, отметка «выполнено»
38. Создай таймер Помодоро: 25 минут работа, 5 минут отдых, звуковой сигнал, счётчик сессий
39. Создай мини-CRM для учёта клиентов: карточки клиентов, статусы сделок, заметки, поиск
40. Создай конструктор резюме: ввод данных → красивое резюме для скачивания в PDF
41. Создай генератор паролей: длина, спецсимволы, цифры → случайный надёжный пароль + копирование
42. Создай онлайн-таймер для кулинарии: выбор блюда → таймер с этапами приготовления
43. Создай планировщик путешествий: добавление дней, активностей, бюджета → итоговый маршрут
44. Создай трекер расходов: категории, суммы, дата → график расходов за месяц
45. Создай генератор счетов: данные компании, услуги, суммы → счёт для скачивания
46. Создай конвертер валют: выбор валют, сумма → результат по актуальному курсу
47. Создай платформу для опросов: создание вопросов, ссылка для участников, сбор результатов
48. Создай приложение для голосования: варианты, голосование по ссылке, результаты в реальном времени
49. Создай расписание занятий: дни недели, время, предметы → красивая таблица-расписание
50. Создай базу знаний для команды: статьи, категории, поиск, редактирование
Контент и маркетинг
51. Напиши 10 постов для Telegram-канала на тему вайбкодинга. Стиль: дружеский, с примерами
52. Составь контент-план на месяц для Instagram: 30 постов с темами и форматами
53. Напиши продающий текст для лендинга: боль → решение → выгоды → призыв к действию
54. Составь email-рассылку из 5 писем для прогрева новых подписчиков
55. Напиши описание для 10 товаров интернет-магазина: характеристики, преимущества, призыв
56. Создай шаблон коммерческого предложения: о компании, услуги, кейсы, цены, контакты
57. Напиши сценарий для Reels/Shorts на 60 секунд на тему «Как я создал сайт за 5 минут»
58. Составь FAQ для сайта: 15 частых вопросов с ответами по теме бизнеса
59. Напиши 5 вариантов заголовков для лендинга. Тема: онлайн-курс по фотографии
60. Создай медиа-кит для блогера: статистика, аудитория, форматы сотрудничества, цены
Автоматизации
61. Создай автоматическую отправку приветственного сообщения новым подписчикам бота
62. Создай автоматическую генерацию отчёта по данным из таблицы каждый понедельник
63. Создай бота, который проверяет наличие товара на сайте и уведомляет в Telegram
64. Создай автоматический постинг в Telegram-канал по расписанию из базы данных
65. Создай форму заявки на сайте, которая отправляет данные в Google Sheets и уведомляет в Telegram
66. Создай автоматическую рассылку напоминаний о записи за день до приёма
67. Создай скрипт, который собирает отзывы с формы на сайте и добавляет на страницу автоматически
68. Создай систему автоответов на email: фильтр по теме → шаблонный ответ
69. Создай автоматический бэкап базы данных каждый день в облако
70. Создай бота, который ежедневно отправляет курс валют или сводку погоды
Аналитика и панели управления
71. Создай дашборд продаж: графики по дням, топ товаров, средний чек, конверсия
72. Создай панель управления для сайта: статистика посещений, заявки, статусы
73. Создай дашборд финансов: доходы, расходы, прибыль — графики по месяцам
74. Создай панель для менеджера: список задач, статусы, дедлайны, нагрузка по сотрудникам
75. Создай дашборд для маркетолога: охваты, клики, подписчики, стоимость лида
76. Создай панель для учителя: список учеников, оценки, посещаемость, средний балл
77. Создай дашборд для склада: остатки товаров, поступления, списания, уведомления
78. Создай отчёт по продажам из CSV-файла: загрузи файл → таблица + графики + выводы
79. Создай трекер KPI для команды: метрики, прогресс, цели, статус выполнения
80. Создай панель для службы поддержки: заявки, статусы, время ответа, приоритеты
Бизнес-инструменты
81. Создай систему бронирования для салона красоты: услуги, мастера, дата, время
82. Создай CRM для риелтора: объекты, клиенты, показы, сделки, статусы
83. Создай систему лояльности: карточка клиента, баллы, скидки, история покупок
84. Создай систему управления проектами: доска задач, этапы, ответственные, дедлайны
85. Создай платформу для онлайн-записи к специалисту: выбор врача/мастера, дата, время
86. Создай генератор договоров: шаблон + данные клиента → готовый договор
87. Создай систему учёта заказов: новый заказ, статусы, история, фильтры
88. Создай каталог услуг с ценами, описаниями и кнопкой «Оставить заявку»
89. Создай внутренний портал для команды: новости, документы, контакты сотрудников
90. Создай базу знаний для клиентов: статьи с инструкциями, поиск, категории
Оплата и монетизация
91. Подключи приём платежей через Stripe: кнопка «Оплатить», обработка, подтверждение
92. Создай страницу с тарифами и кнопками оплаты: 3 тарифа, сравнение, подписка
93. Создай систему подписок: регистрация, оплата, доступ к контенту, управление подпиской
94. Создай магазин цифровых товаров: карточки, корзина, оплата, автоматическая отправка файла
95. Создай систему донатов для автора: выбор суммы, сообщение, оплата, благодарность
Дизайн и улучшения
96. Сделай сайт адаптивным: на телефоне одна колонка, на планшете две, на компьютере три
97. Добавь анимации: секции появляются при прокрутке, кнопки плавно меняют цвет
98. Поменяй тему сайта на тёмную: тёмный фон, светлый текст, неоновые акценты
99. Добавь мультиязычность: переключатель RU/EN, весь текст переведён
100. Проведи аудит сайта: проверь скорость, доступность, SEO — и исправь все найденные проблемы
Словарь терминов
Эти слова будут встречаться на протяжении всего курса. Не нужно заучивать — просто возвращайтесь сюда, когда встретите незнакомое слово.
| Термин | Что это простыми словами | Аналогия |
|---|---|---|
| Фронтенд | Внешняя часть сайта — всё, что видит пользователь: кнопки, тексты, картинки | Витрина магазина |
| Бэкенд | Внутренняя часть — логика, данные, вход пользователей. Скрыто от глаз | Склад и кухня за витриной |
| API | Способ, которым программы общаются между собой | Официант — берёт ваш заказ и приносит блюдо с кухни |
| Хостинг | Место в интернете, где живёт ваш сайт | Аренда квартиры для сайта |
| Домен | Адрес сайта (например, mysite.ru) | Название улицы и номер дома |
| Деплой | Процесс публикации сайта, чтобы его увидели все | Открытие магазина для покупателей |
| Токены | Единицы работы AI. Каждое слово стоит токенов | Минуты на телефоне — тратятся при разговоре |
| Промпт | Команда, которую вы пишете AI | Рецепт для повара — чем точнее, тем вкуснее |
| MVP | Самая простая версия продукта, которая уже работает | Самокат вместо автомобиля — уже едет |
| Remix | Копирование чужого проекта в Lovable для переделки | Взять чертёж дома и перестроить по-своему |
Домашнее задание
- Зарегистрируйтесь в Google AI Studio (aistudio.google.com)
- Попробуйте режим Playground — задайте любой вопрос
- Попробуйте режим Build — создайте простой калькулятор (промпт выше)
- Зарегистрируйтесь в Lovable
- Посмотрите галерею Lovable — найдите 3 интересных проекта
- Выберите 3 задачи из ТОП-100 и попробуйте создать их в AI Studio (бесплатно!)
После этого урока вы знаете три инструмента и понимаете, когда какой использовать. Claude Code — для серьёзной работы. AI Studio — для бесплатных тренировок. Lovable — когда нужен красивый сайт за минуту. А 100 задач — ваша шпаргалка на весь курс.